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

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

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

/* The subtitle, 'COMING TO THEATRES' */
div.subtitle {
  font-weight: normal;
  font-size: 22px;
  letter-spacing: 12px;
  animation-name: fade-in;
  animation-duration: 3s;
}

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

/* Links in the text */
p a:link, p a:visited, p a:active {
  color: white;
  text-decoration: none;
  font-weight: 600;
}
p a:hover {
  text-decoration: underline;
}

/* The blurb */
p {
  text-align: center;
  max-width: 650px;
  padding: 10px;
  margin: 20px auto;
  animation-name: fade-in;
  animation-duration: 4s;
}

/* The image grid */
div.images img {
    height: 200px;
    margin: 10px;
}

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