/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Exo:wght@400;700&display=swap');

html {
  font-family: 'Exo', sans-serif;
  color: white;
}

/* Body */
body {
  background-color: #000000;
  height: 4000px;
}

/* Layout */
.wrapper {
  top: 50%;
  left: 50%;
  width: 80vmin;
  height: 80vmin;
  transform: translate(-50%, -50%);
  position: fixed;
}

@media screen and (orientation:portrait) {

}
@media screen and (orientation:landscape) {

}

#logo, #border, #bandMembers {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
}

#border {
  z-index: 1;
}

#logo {
  z-index: 2;
}

#bio {
  position: absolute;
  display: none;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotateY(-90deg);
  font-size: 24px;
  z-index: 2;
}

/* Streaming service logos */
.streaming {
  position: absolute;
  display: none;
  transform: translate(-50%, -50%);
  width: 34%;
  z-index: 3;
}

#spotify {
  top: 25%;
  left: 50%;
}

#apple {
  top: 75%;
  left: 50%;
}

#amazon {
  top: 50%;
  left: 25%;
}

#youtube {
  top: 50%;
  left: 75%;
}

/* Social icons */
.social {
  position: absolute;
  display: none;
  transform: translate(-50%, -50%);
  z-index: 3;
}

#twitter {
  top: 33%;
  left: 50%;
  width: 25%;
}

#instagram {
  top: 66%;
  left: 33%;
  height: 25%;
}

#email {
  top: 66%;
  left: 66%;
  width: 25%;
}

/* Latest song */
#latestSong, #latestSongLarge {
  position: absolute;
  display: none;
  z-index: 2;
}

#latestSong {
  top: 25%;
  left: 50%;
  width: 40vh;
  height: 40vh;
  transform: translate(-20vh, -20vh);
}

#latestSongLarge {
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
}

#latestSongText {
  position: absolute;
  display: none;
  width: 100%;
  bottom: 5%;
  text-align: center;
  font-weight: bold;
  font-size: 3vh;
  z-index: 3;
}

/* Bandcamp embeds */
.bandcampPlayer {
  position: absolute;
  left: 50%;
  width: 300px;
  display: none;
  z-index: 3;
}

#bandcampPlayerSmall {
  bottom: 25%;
  height: 120px;
  transform: translate(-150px, 0px);
}

/* Lineup assets */
#bandMembers {
  display: none;
  z-index: 2;
}

.bandMemberText {
  position: absolute;
  display: none;
  z-index: 3;
  font-size: 2vh;
  font-weight: normal;
}

#shannonText {
  text-align: left;
  left: 5%;
  top: 46%;
}
#mikeText {
  text-align: right;
  right: 5%;
  top: 46%;
}
#willText {
  text-align: left;
  left: 5%;
  bottom: 46%;
}
#dannyText {
  text-align: right;
  right: 5%;
  bottom: 46%;
}

@media screen and (max-width: 480px) {
  .bandMemberText {
    font-size: 1vh;
  }
}

/* Fading menu, arranged like a horizontal scrolling picker. */
.menuWrapper {
  position: fixed;
  top: 10%;
  left: 50%;
  width: 100%;
  height: 8vh;
  transform: translate(-50%, -100%);
}

.menuItem {
  position: absolute;
  top: 0%;
  left: 50%;
  height: 100%;
  z-index: 1;
}

/* We use vh to position because all menu icons are square with an 8vh height.
   This means we can rely on that same measure to ensure proper spacing. */
#top {
  transform: translateX(-4vh);
}

#latest {
  transform: translateX(4vh) scale(0.6, 0.6);
  opacity: 0.6;
}

#listen {
  transform: translateX(12vh) scale(0.6, 0.6);
  opacity: 0.6;
}

#lineup {
  transform: translateX(20vh) scale(0.6, 0.6);
  opacity: 0.6;
}

#links {
  transform: translateX(28vh) scale(0.6, 0.6);
  opacity: 0.6;
}

/* Detail area. */
.detail {
  position: fixed;
  bottom: 10%;
  left: 50%;
  width: 100%;
  height: 8vh;
  transform: translate(-50%, 100%);
}

.detailItem {
  position: absolute;
  top: 0%;
  left: 50%;
  font-size: 6vh;
  font-weight: bold;
  z-index: 1;
}

@media screen and (max-width: 480px) {
  .detailItem {
    font-size: 5vh;
  }
}

#topDetail {
  transform: translate(-50%);
}

#listenDetail {
  transform: translateX(-50%) translateX(100vw);
}

#linksDetail {
  transform: translateX(-50%) translateX(100vw);
}

#latestDetail {
  transform: translateX(-50%) translateX(100vw);
}

#lineupDetail {
  transform: translateX(-50%) translateX(100vw);
}

/* Copyright */
.copyright {
  position: fixed;
  bottom: 0%;
  left: 50%;
  transform: translateX(-50%);
}

#copyright {
  font-size: 1vh;
}

/* Links */
a:link, a:visited {
  color: white;
}

.no-underline {
  text-decoration: none;
}

/* Animations */
@keyframes flipHide {
  from {transform: rotateY(0deg);}
  to {transform: rotateY(90deg);}
}

@keyframes flipReveal {
  from {transform: translate(-50%, -50%) rotateY(-90deg);}
  to {transform: translate(-50%, -50%) rotateY(0deg);}
}

.startFlip {
  animation: flipHide 0.5s ease-in 0s 1 normal both;
}

.endFlip {
  animation: flipReveal 0.5s ease-out 0.5s 1 normal both;
}