body {
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-family: "Raleway", sans-serif;
  background: #d8d397;
  max-height: min-content;
}

nav ul {
  display: flex;
  flex-wrap: wrap;
  position: sticky;
  top: 0px;
  left: 0px;
  right: 0px;
  font-weight: bold;
  font-size: 1em;
  list-style-type: none;
  padding: 10px;
}

nav ul li {
  padding: 20px;
  background: #b3ab59;
  border-radius: 5px;
  margin: 10px;
}
nav ul li:hover {
  background: black;
}

nav ul li a {
  color: hsl(202, 55%, 16%);
  text-decoration: none;
}
nav ul li a:hover {
  color: #eee;
}

h1 {
  text-align: center;
}

/* picture section css */

#picture_section {
  overflow: hidden;
}
#picture_section .picture_container_1,
#picture_section .picture_container_2,
#picture_section .picture_container_3,
#picture_section .picture_container_4 {
  padding: 20px;
  margin: 10px;
  border: 0px solid #ccc;
  width: 100%;
  max-width: 50vw;
  border-radius: 5px;
}
.bose_pose_picture img,
.laptop_picture img,
.bishop_oyedepo img,
.baloons_picture img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: 5px;
}

h2 {
  text-align: center;
}
#picture_section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-family: "Amethysta", serif;
  font-size: 19px;
  font-weight: 100;
}
#video_section {
  text-align: center;
  font-size: 14px;
}

#video_section figcaption ul li{
  font-family: "Amethysta", serif;
  font-size: 16px;
}

/* responsive styling starts here */

@media (max-width: 481px) {
  video {
    width: 70vw;
    height: auto;
  
  }
}

@media (min-width: 760px) {
  #picture_section {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-template-areas:
      "start ref1"
      "start2 ref2 "
      "start3 ref3"
      "start4 ref4";
    place-content: center;
    place-items: center;
    gap: 20px;
  }

  .picture_container_1 {
    grid-area: start;
  }

  .first_text {
    grid-area: ref1;
    font-size: 18px;
    font-weight: bold;
  }
  .picture_container_2 {
    grid-area: start2;
  }

  .picture_container_3 {
    grid-area: ref2;
    transform: translateX(-160px);
  }

  .picture_container_4 {
    grid-area: ref3;
    transform: translateX(-160px);
  }

  .second_text {
    grid-area: start3;
    font-size: 18px;
    font-weight: bold;
  }

  /* video elements css */

  h2 {
    text-align: center;
  }
  #video_section {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 10px;
    padding: 10px;
  }

  .first_video {
    grid-column: 2/4;
    grid-row: 2/3;
  }
  .first_video_text {
    grid-column: 1/2;
    grid-row: 2/3;
  }

  .second_video {
    grid-column: 1/2;
    grid-row: 3/4;
  }
  .second_video_text {
    grid-column: 2/4;
    grid-row: 3/4;
  }

  /* audio section css */
  #audio_section {
    margin-top: -100px;
  }
}
figure figcaption {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}

@media (min-width: 760px) {
  #picture_section .picture_container_1,
#picture_section .picture_container_2,
#picture_section .picture_container_3,
#picture_section .picture_container_4 {
  padding: 20px;
  margin: 10px;
  border: 0px solid #ccc;
  width: 100%;
  max-width: 30vw;
  border-radius: 5px;
}
  video {
    width: 45vw;
    height: auto;
  }
  figure figcaption {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 10px;
  }



  .picture_container_3 {
    grid-area: ref2;
    transform: translateX(-70px);
  }

  .picture_container_4 {
    grid-area: ref3;
    transform: translateX(-70px);
  }
}


.picture_hover_effect:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.2);
}

.picture_hover_effect2:hover {
  margin-bottom: 14px;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.2);
}