@media (orientation: portrait) {
  body {
      background: no-repeat right center/cover fixed url('../images/background_p.jpg') black;
      color: white;
      font-family: 'Open Sans', Verdana, Geneva, Tahoma, sans-serif;
  }
}

@media (orientation: landscape) {
  body {
      background: no-repeat center/cover fixed url('../images/background_l.jpg') black;
      color: white;
      font-family: 'Open Sans', Verdana, Geneva, Tahoma, sans-serif;
  }
}

h1 {
    font-size: 26px;
    font-weight: 600;
}

h2 {
    font-size: 20px;
}

h3 {
    font-size: 13px;
    font-weight: 300;
}

a {
    color: white;
    text-decoration: none;
}

.logo, .legal, .privacy, .event {
    background: rgba(0,0,0,0.8);
}

.panel, .year, .event:hover, .event.active, .eventdetails, .discography {
    background: rgba(48,48,48,0.9);
    border-color: gray;
}

.track:hover, .track.active, .trackdetails {
    background: black;
    border-color: darkgray;
}

.headline {
    text-align: center;
    font-size: 48px;
    font-weight: 600;
}

.year {
    font-size: 32px;
    font-weight: 600;
}

.event {
    text-align: left;
    font-size: 20px;
}

.eventdetails {
    text-align: left;
    font-size: 15px;
    font-weight: 400;
}

.track {
    text-align: left;
    font-size: 20px;
}

.trackdetails {
    text-align: left;
    font-size: 15px;
    font-weight: 400;
}

.nav {
    background-color: white;
}

.nav span {
    background-color: black;
}

.nav input:checked ~ span {
    background-color: red;
}

.menu li a {
    color: black;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 600;
}

.menu li a:hover {
    color: red;
}

.legal, .privacy {
    font-size: 13px;
}

.legaltext {
    text-align: end;
}