@import url("heading.css");
@import url("animations.css");
@import url("menu.css");
@import url("copyright.css");

/* General stuff */
body {
  background-color: white;
  text-align: center;
  font-family: 'Assistant', sans-serif;
  font-weight: 300;
  font-size: 16px;
  color: black;
  margin: 0;
  padding: 0;
}

/* Copyright blurb */
p {
  text-align: center;
  width: 650px;
  max-width: 95%;
  margin: 20px auto;
  animation-name: fade-in;
  animation-duration: 2s;
}

/* The individual headings, 'studio tracks' and 'live videos' */
h4 {
  font-family: Montserrat, sans-serif;
  font-weight: 900;
  font-size: 30px;
  margin-bottom: 0;
  letter-spacing: -1px;
  animation-name: slide-from-left;
  animation-duration: 1s;
}
h4 span {
  font-family: Assistant, sans-serif;
  font-weight: 400;
  font-size: 31px;
}

/* The 'studio tracks' section, with a black background */
div.studio {
  background: black;
  color: white;
  width: 100%;
  animation-name: fade-in;
  animation-duration: 1s;
}

/* Make the 'studio tracks' heading slide from the opposite side */
div.studio h4 {
  animation-name: slide-from-right;
}

/* This is the main div that contains all the studio tracks.
 * There are two divs within this: one for TPA, one for TSO.
 * Within each of those there is one div for each track.
 */
div.tracks {
  display: flex;
  flex-flow: row wrap;    /* on phone screens the two groups can appear vertically not horizontally */
  justify-content: center;
}

/* The logos that show which band each track is */
div.tracks img {
  height: 45px;
  width: 80px;
}

/* On screens narrower than around 350 pixels, the logos are slightly big */
@media screen and (max-width: 350px) {
  div.tracks img {
    width: 50px;
  }
}

/* The div for each track, which contains the band logo, and another div... */
div.tracks > div > div {
  display: flex;
  flex-direction: row;  /* the logo appears to the left of the track */
  margin: 15px;
}

/* ...which contains the audio element, and another div... */
div.tracks > div > div > div {
  display: flex;
  flex-direction: column;   /* the text appears below the audio track */
  text-align: left;
  margin-left: 10px;
  font-size: 14px;
}

/* ...which contains the song name. */
div.tracks > div > div > div > div {
  margin-left: 10px;
}

/* The div for the live videos */
div.live {
  display: flex;
  flex-flow: row wrap;  /* on phone screens they can appear vertically */
  justify-content: center;
  animation-name: fade-in;
  animation-duration: 2s;
}

/* The embedded YouTube videos */
div.live iframe {
  margin: 10px;
  border: none;
}