/* Fonts */
@font-face {
  font-family: 'Bobby Jones Soft';
  src: url("../fonts/BobbyJonesSoft.otf");
}

html {
  font-family: 'Bobby Jones Soft', sans-serif;
  color: white;
}

/* Body */
body {
  background-color: black;
}

a:link {
  color: #3344dd;
}
a:hover {
  color: #bb1122;
}
a:focus {
  color: #bb1122;
}
a:active {
  color: #bb1122;
}
a:visited {
  color: #884488;
}

/* Flickering animation */
@-webkit-keyframes flicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% {
    text-shadow: 0 0 12px white;
  }

  20%, 24%, 55% {        
      text-shadow: none;
  }
}
@keyframes flicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% {
    text-shadow: 0 0 12px white;
  }

  20%, 24%, 55% {        
      text-shadow: none;
  }
}

.neonText {
  -webkit-animation: flicker 1.5s infinite alternate;
  animation: flicker 1.5s infinite alternate;
}

/* Layout */
#header {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  text-align: center;
  z-index: 1;
}

#title {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  font-size: 150px;
  white-space: nowrap;
}

#subtitle {
  position: absolute;
  top: 150px;
  left: 0%;
  width: 100%;
  font-size: 50px;
}

#lineup {
  position: absolute;
  top: 250px;
  left: 50%;
  width: 640px;
  -webkit-transform: translateX(-320px);
  transform: translateX(-320px);
}

#lineupImage {
  position: absolute;
  top: 0%;
  left: 0%;
  height: 299px;
  box-shadow: 0 0 8px 4px white;
}

.lineupColumn {
  position: absolute;
  top: 299px;
  width: 160px;
  text-align: center;
}

#willLineup {
  left: 0%;
}

#ericLineup {
  left: 25%;
}

#mikeLineup {
  left: 50%;
}

#jasonLineup {
  left: 75%;
}

.lineupText {
  position: absolute;
  font-size: 16px;
  top: 8px;
  left: 0px;
  width: 100%;
}

#shows {
  position: absolute;
  top: 650px;
  left: 50%;
  width: 400px;
  -webkit-transform: translateX(-200px);
  transform: translateX(-200px);
  text-align: center;
}

#showHeader {
  font-size: 24px;
}

#shows th {
  font-weight: normal;
  border-bottom: 2px solid white;
}

#dateColumn, #detailsColumn {
  width: 100px;
}

#venueColumn {
  width: 200px;
}

#footer {
  position: absolute;
  top: 950px;
  left: 0%;
  width: 100%;
  z-index: 1;
}

#social {
  position: absolute;
  bottom: 0px;
  left: 50%;
  -webkit-transform: translateX(-100px);
  transform: translateX(-100px);
  width: 200px;
  text-align: center;
}

#socialHeader {
  position: absolute;
  bottom: 76px;
  left: 0%;
  width: 100%;
  font-size: 16px;
}

#fbLogo {
  position: absolute;
  bottom: 0%;
  left: 50%;
  width: 48px;
  -webkit-transform: translateX(-54px);
  transform: translateX(-54px);
  margin-bottom: 20px;
}

#igLogo {
  position: absolute;
  bottom: 0%;
  right: 50%;
  width: 48px;
  -webkit-transform: translateX(54px);
  transform: translateX(54px);
  margin-bottom: 20px;
}

.fb-page {
  position: absolute;
  top: 420px;
  left: 50%;
  -webkit-transform: translateX(-225px);
  transform: translateX(-225px);
  width: 450px;
}

@media screen and (max-width: 1000px) {
  .neonText {
    -webkit-animation: flicker 2.0s infinite alternate;
    animation: flicker 2.0s infinite alternate;
  }

  #lineup {
    top: 350px;
  }

  .lineupColumn {
    top: 309px;
  }

  .lineupText {
    font-size: 24px;
  }

  #shows {
    top: 900px;
    width: 600px;
    -webkit-transform: translateX(-300px);
    transform: translateX(-300px); 
    font-size: 30px;
  }

  #showHeader {
    font-size: 40px;
  }

  #dateColumn, #detailsColumn {
    width: 150px;
  }

  #venueColumn {
    width: 300px;
  }

  #footer {
    position: absolute;
    bottom: 0%;
    left: 0%;
    width: 100%;
    z-index: 1;
  }

  #social {
    -webkit-transform: translateX(-200px);
    transform: translateX(-200px);
    width: 400px;
  }

  #socialHeader {
    position: absolute;
    bottom: 152px;
    left: 0%;
    width: 100%;
    font-size: 32px;
  }

  #fbLogo {
    width: 96px;
    -webkit-transform: translateX(-108px);
    transform: translateX(-108px);
    margin-bottom: 40px;
  }

  #igLogo {
    width: 96px;
    -webkit-transform: translateX(108px);
    transform: translateX(108px);
    margin-bottom: 40px;
  }
}

@media screen and (prefers-reduced-motion) {
  .neonText {
    -webkit-animation: none;
    animation: none;
  }
}