:root {
    --light: #f7f0eb;
    --accent: #d1ab86;
    --dark: #38332c;
  }

body {
    margin: 0;
    padding: 0;
    background-image: none;
    background-color: white;
}


/* Hero Section */
.heroSection {
  height: 35%;
  background-image: url(../images/lionColour.jpg);
  background-size: cover;
  background-position: center center;
  border-bottom: 3px var(--accent) solid;

  display: flex;
  align-items: flex-end;
}

.heroText {
  margin: 0 0 1% 3%;
  font-size: 3.2rem;
  font-weight: 100;
  color: var(--light)
}

/* Main featured film section */
.topContent {
  padding: 5% 5% 0 5%;
  max-width: 100%;

  display: flex;
  align-items: flex-start;
}

.topVideo {
  aspect-ratio: 16 / 9;
  margin: 0 5% 0 5%;
  width: 50%;
  border: 1px solid var(--dark);
}

.topText {
  font-size: 1rem;
  margin-right: 5%;
  width: 50%;
}

.topMovieTitle {
  font-weight: 200;
  font-size: 1.8rem;
  margin: 0;
}

.readMoreButton {
  font-size: 1.2rem;
  text-decoration: underline;
  text-underline-position: under;
}



/* Film boxes layout */
.filmBoxSection {
  padding: 1% 4% 4% 4%;

  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.filmBox {
  /* max-width: 30%; */
  max-height: 80%;
  width: 30%;
  margin: 4% 1% 0 1%;
  background-color: var(--light);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.thumbImg {
  background-size: contain;
  background-position: center;
  aspect-ratio: 16 / 9;

  display: flex;
  align-items: flex-end;

  transition-timing-function: ease-in-out;
  transition-duration: .1s;
}

.thumbImg:hover {
  transition-timing-function: ease-in-out;
  transition-duration: .1s;
}

.thumbTitle {
  color: white;
  font-size: 1.4rem;
  margin: 0 0 2% 3%;
  text-shadow: 1px 1px 4px #000000;
}

.thumbText {
  font-size: 1rem;
}

.thumbBox1 {
  background-image: url(../images/bugNoColour.png);
}

.thumbBox1:hover {
  background-image: url(../images/bugColour.png);
}

.thumbBox2 {
  background-image: url(../images/bikeNoColour.png);
}

.thumbBox2:hover {
  background-image: url(../images/bikeColour.png);
}

.thumbBox3 {
  background-image: url(../images/wcamsNoColour.png);
}

.thumbBox3:hover {
  background-image: url(../images/wcamsColour.png);
}

.thumbBox4 {
  background-image: url(../images/fatherdaughterNoColour.png);
}

.thumbBox4:hover {
  background-image: url(../images/fatherdaughterColour.png);
}

.thumbBox5 {
  background-image: url(../images/tikehauNoColour.png);
}

.thumbBox5:hover {
  background-image: url(../images/tikehauColour.png);
}

.thumbBox6 {
  background-image: url(../images/dogNoColour.png);
}

.thumbBox6:hover {
  background-image: url(../images/dogColour.png);
}

.thumbBox7 {
  background-image: url(../images/nvcaresNoColour.png);
}

.thumbBox7:hover {
  background-image: url(../images/nvcaresColour.png);
}

.thumbBox8 {
  background-image: url(../images/moussasNoColour.png);
}

.thumbBox8:hover {
  background-image: url(../images/moussasColour.png);
}

.thumbBox9 {
  background-image: url(../images/codebreakerNoColour.png);
}

/* .thumbBox9:hover {
  background-image: url(../images/codebreakerColour.png);
} */

.thumbBox10 {
  background-image: url(../images/wcamscelebrationNoColour.jpg);
}

.thumbBox10:hover {
  background-image: url(../images/wcamscelebrationColour.jpg);
}


.thumbText {
  margin: 3%;
  font-size: .9rem;
}

.timeDate {
  margin: 3%;
}



/* Footer */
#footer {
  max-width: 100%;
  background-color: var(--dark);
  display: flex;
  justify-content: space-between;
  padding: 2%;
}

.footerText {
  font-weight: 100;
  font-size: 1rem;
  margin: 0;
  color: var(--light)
}




/* Media querries */
@media screen and (max-width: 1000px) {
  .topText {
    font-size: .9rem;
  }
}


@media screen and (max-width: 860px) {
  .topContent {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 80%;
    margin-left: 10%;
  }

  .topVideo {
    width: 80%;
    margin: 0;
  }

  .topText {
    margin-top: 5%;
    margin-bottom: 5%;
    width: 80%;
  }
}

/* snap to ipad size here even though ipad starts at 700 */
@media screen and (max-width: 750px) {
  .filmBox {
    width: 40%;
  }
}


@media screen and (max-width: 450px) {
  .filmBoxSection {
    justify-content: center;
  }

  .filmBox {
    width: 80%;
    margin-bottom: 5%;
  }
}