@import url(theme.css);
@import url(links.css);

body {
  background: var(--bg-main);
  color: var(--fg-main);
  font-family: "Helvetica", "Lucida Sans", "Courier New", monospace;
  font-size: 1.2rem;
  padding: 0.1rem 1rem;
  display: flex;
  flex-flow: row wrap;
  max-width: 100vw;
  margin-left: auto;
  margin-right: auto;
}

body > * {
  flex: 1 100%;
  padding: 1rem;
}

main {
  text-align: center;
}

nav {
  ul {
    list-style-type: none;
    padding: 0;
    text-align: center;
    li {
      display: inline;
      font-size: 1.5em;
      padding: 0 0.1em;
    }
  }
}

footer {
  text-align: center;
  ul {
    list-style: none;
    display: inline-block;
    float: none;
    padding: 0;

    li {
      display: inline;
    }
  }
}
@media all and (min-width: 300px) {
  .dates {
    li:not(:last-child):after {
      margin: 0.5em 4em;
    }
  }
}

@media all and (min-width: 800px) {
  .main {
    flex: 10 0;
  }
  .main {
    order: 1;
  }
  footer {
    order: 2;
  }
}

@media all and (min-width: 1000px) {
  body {
    max-width: 50vw;
  }
  .dates {
    li:not(:last-child):after {
      margin: 0.5em 10em;
    }
  }
}

@media all and (min-width: 2000px) {
  .dates {
    li:not(:last-child):after {
      margin: 0.5em 20em;
    }
  }
}

h1 {
  font-size: 2em;
}
h2 {
  font-size: 1.5em;
}
h3 {
  font-size: 1.3em;
}
h4 {
  font-size: 1em;
}
h5 {
  font-size: 0.8em;
}
h6 {
  font-size: 0.7em;
}

/* ION ICON */
footer ion-icon {
  color: var(--red);
  font-size: 3rem;
}

@media (hover: hover) and (pointer: fine) {
  ion-icon:hover {
    color: var(--fg-main);
  }
}

@media (hover: none) and (pointer: coarse) {
  ion-icon:active {
    color: var(--fg-main);
  }
}

/* STYLES */
.centered {
  margin: auto;
  display: block;
}

.info {
  ul {
    list-style: none;
    display: inline-block;
    float: none;
    padding: 0;
  }
}

.ub-logo {
  max-width: 100%;
}

.logo {
  max-width: 100%;
}

.dates {
  list-style-type: none;
  margin: 0;
  padding: 0;

  li:not(:last-child):after {
    content: "";
    display: block;
    text-align: center;
    height: 1px;
    /* margin: 0.5em 6em; */
    background: var(--red);
  }
}

.plakat {
  width: 100%;
}