:root {

  --main-text-color: rgba(255, 255, 255, 0.7);
  --main-text-darker-color: rgba(255, 255, 255, 0.9);
  --main-highlight-color: red;
  --main-shadow-color: darkred;
  --main-highlight-color: red;
  --main-shadow-color: darkred;

  font-family: serif;
  line-height: 1.5;
  font-weight: 400;

  color-scheme: light dark;
  color: var(--main-text-color);

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* {
  padding: 0;
}

input {
  display: none;
}

li {
  list-style: none;
}

h2 {
  font-family: sans-serif;
  text-transform: uppercase;
}

h2, h3, h4, h5 {
  color: var(--main-shadow-color);
}

a {
  font-weight: 500;
  color: var(--main-shadow-color);
  text-decoration: inherit;
}
a:hover {
  color: var(--main-highlight-color);
}

body {
  margin: 0;
  min-width: 360px;
  min-height: 100vh;
  display: flex;
  flex-flow: column;
  place-items: center;
  background-color: #242424;
  background-image: url(web_background.png);
  background-repeat: no-repeat;
  background-position: top;
  background-attachment: fixed;
  background-size: cover;
}

div#main {
  width: 80%;
  max-width: 800px;  
  flex: 1;
  display: flex;
  flex-direction: column;
}

header#top {
  background-image: url(tod.logo.textured.alpha.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 100%;
  min-height: 200px;
  margin-top: 1em;
}

#social {
  min-width: 500px;
  max-width: 800px;

  ul {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    li {
      width: 20%;
      text-transform: uppercase;
      font-family: sans-serif;
      text-align: center;
    }
    >:nth-child(1) {
      order: 5;
    }
    >:nth-child(2) {
      order: 3;
    }
    >:nth-child(4) {
      order: 1;
    }
    >:nth-child(5) {
      order: 4;
    }
  }
}

/** live */

#live-content {

  #nextgig, .livedate {
    .dateAndVenue, li, .date {
      font-family: sans-serif;
      text-transform: uppercase;
      display: block;
      font-size: large;
    }
    .dateAndVenue {
      border-bottom: 1px solid;
      margin-bottom: 1em;
      color: var(--main-text-darker-color);
    }
  }

  #live-history {
   
    article.livedate {
      margin-top: 1em;
    }
   
    p.date, p.venue, p.with {
      width: 100%;
    }


  }
}

/** footer */

footer {
  margin-top: 2em;
  padding-bottom: 1em;
  width: 100%;
  max-width: 800px;

  text-align: center;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  >:nth-child(1) {
    order: 3;
    width: 100%;
  }
  
  >:nth-child(2) {
    order: 4;
    width: 100%;
  }

  >:nth-child(3) {
    order: 2;
    width: 100%;
    margin: 0;
  }
  
  >:nth-child(4) {
    order: 1;
    width: 100%;
  }
}

#live-history-toggle,
#impressum-toggle,
#datenschutz-toggle {
  opacity: 0;
}

#impressum-toggle:not(:checked)~#impressum-content {
  display: none;
}

#datenschutz-toggle:not(:checked)~#datenschutz-content {
  display: none;
}

#live-history-toggle:not(:checked)~.livedate {
  display: none;
}

label {
  text-transform: uppercase;
  font-family: sans-serif;
  color: var(--main-shadow-color);

  &:before {
    content: ".:";
  }

  &:after {
    content: ":.";
  }

  &:hover {
    color: var(--main-highlight-color);
  }
}

/** small displays */

@media (max-width: 1024px) {

  header#top {
    min-height: 100px;
  }

  div#main {
    width: 90%;
  }

}

@media (max-width: 500px) {

  #social {
    min-width: 0px;
    ul {
      flex-direction: column;
    }
  }

  footer {
  
    >:nth-child(1) {
      width: 100%;
    }
    
    >:nth-child(2) {
      width: 100%;
    }
  }  

}