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

/* General stuff */
body {
  background-color: black;
  background-image: url('../images/tpa/background.svg');
  background-repeat: no-repeat;
  background-position: 50% 60px;
  text-align: center;
  font-family: 'Assistant', sans-serif;
  font-weight: 300;
  font-size: 18px;
  color: white;
}

/* On screens narrower than 400 pixels, the background can interfere */
@media screen and (max-width: 400px) {
  body {
    background-size: 600px; /* width */
  }
}

/* The heading */
h1 {
  margin-top: 40px;
}
h1 img {
  max-width: 90%;       /* so that on phone screens it doesn't go quite to the edges */
  animation-name: fade-in;
  animation-duration: 2s;
}

/* The subtitle, 'the totally authentic POLICE tribute experience' */
div.subtitle {
  font-family: Michroma, sans-serif;
  color: rgb(252, 89, 71);  /* red */
  font-weight: normal;
  font-size: 24px;
  line-height: 90%;         /* close up the line spacing */
  margin-top: -35px;        /* make it close to logo above */
  margin-left: 10px;
  animation-name: slide-from-left;
  animation-duration: 2s;
}
div.subtitle span {
  /* The second line of the TPA tagline */
  font-size: 20px;
  display: block;           /* to force a line break */
  color: rgb(255, 111, 71); /* slightly lighter red, to mimic a gradient fill */
  margin-top: -1px;
  padding-left: 180px;
}

/* On screens narrower than 1200 pixels, the subtitle slide in looks rubbish */
@media screen and (max-width: 1200px) {
  div.subtitle {
    animation-name: fade-in;
  }
}

/* On screens narrower than about 500 pixels, the subtitle is too wide */
@media screen and (max-width: 500px) {
  div.subtitle {
    font-size: 20px;
  }
  div.subtitle span {
    font-size: 16px;
    padding-left: 150px;
  }
}
@media screen and (max-width: 400px) {
  div.subtitle {
    font-size: 17px;
  }
  div.subtitle span {
    font-size: 14px;
    padding-left: 130px;
  }
}
@media screen and (max-width: 320px) {
  div.subtitle {
    font-size: 15px;
  }
  div.subtitle span {
    font-size: 12px;
    padding-left: 120px;
  }
}

/* the bullets separating the picture and the blurb below */
div.separator {
  font-size: 22px;
  font-weight: 600;
  margin: 20px auto;
  animation-name: slide-in;
  animation-duration: 3s;
}

/* The blurb */
p {
  text-align: center;
  width: 650px;
  max-width: 95%;   /* so that on phone screens it doesn't go quite to the edges */
  padding: 10px;
  margin: 20px auto;
  animation-name: fade-in;
  animation-duration: 4s;
}

/* The band shot */
img.band {
  margin: 20px auto 20px;
  max-width: 95%;   /* so that on phone screens it doesn't go quite to the edges */
  animation-name: fade-in;
  animation-duration: 4s;
}

/* The bookings and tour dates links */
div.links {
  margin: 40px 0;
}
div.links a {
  font-size: 14px;
  font-weight: 600;
  color: white;
  text-decoration: none;
  background-color: black;
  border: 1px solid white;
  border-radius: 5px;
  padding: 5px 15px;
  margin: 0 35px;
  letter-spacing: 6px;
  line-height: 4;       /* so that on smaller screens they don't overlap */
  white-space: nowrap;
  transition: all 0.6s;
}
div.links a:hover {
  background-color: white;
  color: black;
  border-color: rgb(200, 200, 200);
  border-radius: 12px;
}

/* The quotes */
div.quotes {
  width: 650px;
  max-width: 95%;
  margin: 30px auto 40px;
}
div.quotes-title {
  font-family: 'IM Fell English', serif;
  font-size: 90px;
  margin: 0 auto -10px;
  color: rgba(255, 255, 255, 0.8);
}
div.quotes-title span {
  color: rgba(255, 255, 255, 0.5);
  font-size: 70px;
  padding-bottom: 50px;
}
div.quote {
  margin: 0 auto 25px;
  font-family: 'IM Fell English', serif;
  font-size: 26px;
  color: rgba(255, 255, 255, 0.8);
}
div.quote span {
  display: block;   /* force it onto a new line */
  font-size: 16px;
  color: rgba(255, 255, 255, 0.5);
}

/* On screens narrower than about 500 pixels, the quote text starts to look big */
@media screen and (max-width: 500px) {
  div.quote {
    font-size: 22px;
  }
}

/* The video */
iframe {
  margin: 25px auto 50px;
  max-width: 95%;   /* so that on phone screens it doesn't go quite to the edges */
  border: none;     /* to avoid the naff default border */
  animation-name: fade-in;
  animation-duration: 2s;
}

/* Social media */
div.social a img {
  margin: 5px;
  height: 50px;
}