.page-2 {
  width: 100%;
  height: 92vh;
  background-color: #414141;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;

  & p {
    width: 100%;
    color: white;
    font-family: 'Ubuntu', sans-serif;
    font-size: 30px;
    font-weight: 600;
    padding-left: 2%;
  }

  & .gallery {
    width: 80vw;
    height: 80vh;
    /* border: 1px solid wheat; */
    /* background-color: white; */
    display: grid;
    grid-template-columns: repeat(6, 150px);
    grid-template-rows: repeat(3, 150px);
    gap: 10px;
    justify-content: center;
    align-content: center;

    perspective: 1200px;

    & .gallery-pic {
      width: 150px;
      height: 150px;
      border-radius: 20px;
      border: 1px solid white;
      color: white;
      font-size: 20px;
      /* padding: 20px; */
      overflow: hidden;
      background: #2c2c2c;
      transition: transform 0.6s ease, box-shadow 0.6s ease;
      transform-style: preserve-3d;
      & img{
        width: 100%;
        height: 100%;
        animation: fade 5.5s infinite ease reverse;
      }
    }

    & #gallery-pic-1:hover,
    & #gallery-pic-2:hover,
    & #gallery-pic-6:hover {
      transform: rotateY(20deg) scale(1.05);
      box-shadow: 10px 10px 20px rgba(124, 124, 124, 0.5);
    }

    & #gallery-pic-3:hover,
    & #gallery-pic-8:hover,
    & #gallery-pic-9:hover {
      transform: rotateX(-10deg) scale(1.02);
      box-shadow: 0px 0px 30px rgba(73, 73, 73, 0.5);
    }

    & #gallery-pic-4:hover,
    & #gallery-pic-5:hover,
    & #gallery-pic-7:hover {
      transform: rotateY(-20deg) scale(1.05);
      box-shadow: -10px 10px 20px rgba(94, 94, 94, 0.5);
    }

    & #gallery-pic-6 {
      grid-column: 1 / span 2;
      grid-row: 2 / span 2;
      width: 100%;
      height: 100%;
      animation: moveBox6 50s infinite ease-in-out;

    }


    & #gallery-pic-3 {
      grid-column: 3 / span 2;
      grid-row: 1 / span 2;
      width: 100%;
      height: 100%;

    }


    & #gallery-pic-7 {
      grid-column: 5 / span 2;
      grid-row: 2 / span 2;
      width: 100%;
      height: 100%;
 
    }
  }
}

@keyframes fade{
  0%{
    opacity: 1;
  }50%{
    opacity: 0;
  }100%{
    opacity: 1;
  }
}