@import url('https://fonts.googleapis.com/css2?family=Antonio:wght@300&display=swap');

body{
    background-color: #cec7bd;
   font-family: Helvetica;
}

.body1 {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.header1 {
  font-family: 'Antonio', sans-serif;
  text-transform: uppercase;
  font-size: 35px;
  line-height: 1.5;
  letter-spacing: 3px;
  position: fixed;
  top: 51%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10000;
}

.paragraph {
  font-size: 12px;
  color: #615143;
  position: fixed;
  top: 56%;
  left: 50%;
  z-index: 10000;
  transform: translate(-50%, -50%);
}

.title1 {
  text-decoration: none;
  color: #ffffff;
}

@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.floatingimage {  
  position: absolute;
  top: 500px;
  left: 400px;
  transform: translate(-50%, -50%) scale(0.2);
  animation: fadein 0.5s;
}

.gallery {
  position: absolute;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
}

/*end of landing */

.body2 {
  overflow: scroll;
  width: 100%;
  height: 1000px;
  
}

.header2 {
  font-family: 'Antonio', sans-serif;
  text-transform: uppercase;
  font-size: 25px;
  letter-spacing: 3px;
  position: fixed;
  left: 50%;
  transform: translate(-50%, 90%);
  z-index: 10000;
}

.title2 {
  text-decoration: none;
  color: #615143;
}

.menu {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  position: fixed;
  width: 100%; 
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 20px 24px 20px;
}



/*end of archive */

.body3 {
  width: 100%;
  height: 100%;
}

a {
  text-decoration: none;
  color: #615143;
} 

.left {
  font-size: 16.5px;
  font-style: italic;
  line-height: 1.7;
  font-weight: 500;
  color: #ffffff;
  display: block;
  padding: 8.5rem 40rem 3rem 17rem;
}

.right {
  font-size: 15px;
  color: #615143;
  display: flex;
  padding: 0rem 15rem 0 40rem;
  line-height: 1.5;
}

footer {
  text-decoration: none;
  display: flex;
  justify-content: space-between;
  color: #615143;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 105px auto 20px auto;
  text-align: center;
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
}

/*end of info */

.grid-container {
  display: grid;
  grid-template-columns: 0.5fr 0.5fr 0.5fr;
  gap: 13px 13px;
  margin-left: 50%;
  margin-right: 20px;
  margin-bottom:60px;
}
.photo1 { grid-area: 1 / 1 / 2 / 2; }
.photo2 { grid-area: 1 / 2 / 2 / 3; }
.photo3 { grid-area: 1 / 3 / 2 / 4; }
.photo4 { grid-area: 2 / 1 / 3 / 4; }
.photo5 { grid-area: 3 / 1 / 4 / 2; }
.photo6 { grid-area: 3 / 2 / 4 / 3; }
.photo7 { grid-area: 3 / 3 / 4 / 4; }
.photo8 { grid-area: 4 / 1 / 5 / 4; }
.photo9 { grid-area: 5 / 1 / 6 / 2; }
.photo10 { grid-area: 5 / 2 / 6 / 3; }
.photo11 { grid-area: 5 / 3 / 6 / 4; }
.photo12 { grid-area: 6 / 1 / 7 / 4; }

.poem1{
  font-size: 16.5px;
  font-style: italic;
  line-height: 1.7;
  font-weight: 500;   
  color: #ffffff;
  display: inline-block;
  padding: 10rem 40rem 0 2rem;
}

.title{
   padding-left: 2rem;
   padding-top: 2rem;
   line-height: 1.4;
   color: #ffffff;
   font-size: 15px;
}

/*end of archive 1  */

.grid-container1 {
  position: absolute;
  display: grid;
  grid-template-columns: 0.5fr 0.5fr 0.5fr;
  gap: 13px 13px;
  margin-left: 50%;
  margin-right: 20px;
  margin-bottom:60px;
}
.photo01 { grid-area: 1 / 1 / 2 / 2; }
.photo02 { grid-area: 1 / 2 / 2 / 3; }
.photo03 { grid-area: 1 / 3 / 2 / 4; }
.photo04 { grid-area: 2 / 1 / 3 / 4; }
.photo05 { grid-area: 3 / 1 / 4 / 2; }
.photo06 { grid-area: 3 / 2 / 4 / 3; }
.photo07 { grid-area: 3 / 3 / 4 / 4; }
.photo08 { grid-area: 4 / 1 / 5 / 4; }
.photo09 { grid-area: 5 / 1 / 6 / 2; }
.photo010 { grid-area: 5 / 2 / 6 / 3; }
.photo011 { grid-area: 5 / 3 / 6 / 4; }
.photo012 { grid-area: 6 / 1 / 7 / 4; }
.photo013 { grid-area: 7 / 1 / 8 / 2; }
.photo014 { grid-area: 7 / 2 / 8 / 3; }
.photo015 { grid-area: 7 / 3 / 8 / 4; }
.photo016 { grid-area: 8 / 1 / 9 / 4; }
.photo017 { grid-area: 9 / 1 / 10 / 2; }
.photo018 { grid-area: 9 / 2 / 10 / 3; }
.photo019 { grid-area: 9 / 3 / 10 / 4; }
.photo020 { grid-area: 10 / 1 / 11 / 4; }
.photo021 { grid-area: 11 / 1 / 12 / 2; }
.photo022 { grid-area: 11 / 2 / 12 / 3; }
.photo023 { grid-area: 11 / 3 / 12 / 4; }
.photo024 { grid-area: 12 / 1 / 13 / 4; }

/*end of archive 2  */

.grid-container3 {
  display: grid;
  grid-template-columns: 0.5fr 0.5fr 0.5fr;
  gap: 13px 13px;
  margin-left: 50%;
  margin-right: 20px;
  margin-bottom:60px;
}

.photo301 { grid-area: 1 / 1 / 2 / 2; }
.photo302 { grid-area: 1 / 2 / 2 / 3; }
.photo303 { grid-area: 1 / 3 / 2 / 4; }
.photo304 { grid-area: 2 / 1 / 3 / 4; }
.photo305 { grid-area: 3 / 1 / 4 / 2; }
.photo306 { grid-area: 3 / 2 / 4 / 3; }
.photo307 { grid-area: 3 / 3 / 4 / 4; }
.photo308 { grid-area: 4 / 1 / 5 / 4; }
.photo309 { grid-area: 5 / 1 / 6 / 2; }
.photo310 { grid-area: 5 / 2 / 6 / 3; }
.photo311 { grid-area: 5 / 3 / 6 / 4; }
.photo312 { grid-area: 6 / 1 / 7 / 4; }
.photo313 { grid-area: 7 / 1 / 8 / 2; }
.photo314 { grid-area: 7 / 2 / 8 / 3; }
.photo315 { grid-area: 7 / 3 / 8 / 4; }
.photo316 { grid-area: 8 / 1 / 9 / 4; }


/*end of archive 3  */


.grid-container4 {
  display: grid;
  grid-template-columns: 0.5fr 0.5fr 0.5fr;
  gap: 13px 13px;
  margin-left: 50%;
  margin-right: 20px;
  margin-bottom:60px;
}

.photo401 { grid-area: 1 / 1 / 2 / 2; }
.photo402 { grid-area: 1 / 2 / 2 / 3; }
.photo403 { grid-area: 1 / 3 / 2 / 4; }
.photo404 { grid-area: 2 / 1 / 3 / 4; }
.photo405 { grid-area: 3 / 1 / 4 / 2; }
.photo406 { grid-area: 3 / 2 / 4 / 3; }
.photo407 { grid-area: 3 / 3 / 4 / 4; }
.photo408 { grid-area: 4 / 1 / 5 / 4; }
.photo409 { grid-area: 5 / 1 / 6 / 2; }
.photo410 { grid-area: 5 / 2 / 6 / 3; }
.photo411 { grid-area: 5 / 3 / 6 / 4; }
.photo412 { grid-area: 6 / 1 / 7 / 4; }
.photo413 { grid-area: 7 / 1 / 8 / 2; }
.photo414 { grid-area: 7 / 2 / 8 / 3; }
.photo415 { grid-area: 7 / 3 / 8 / 4; }
.photo416 { grid-area: 8 / 1 / 9 / 4; }
.photo417 { grid-area: 9 / 1 / 10 / 2; }
.photo418 { grid-area: 9 / 2 / 10 / 3; }
.photo419 { grid-area: 9 / 3 / 10 / 4; }
.photo420 { grid-area: 10 / 1 / 11 / 4; }
.photo421 { grid-area: 11 / 1 / 12 / 2; }
.photo422 { grid-area: 11 / 2 / 12 / 3; }
.photo423 { grid-area: 11 / 3 / 12 / 4; }
.photo424 { grid-area: 12 / 1 / 13 / 4; }
.photo425 { grid-area: 13 / 1 / 14 / 4; }

/*end of archive 4  */

.grid-container5 {
  display: grid;
  grid-template-columns: 0.5fr 0.5fr 0.5fr;
  gap: 13px 13px;
  margin-left: 50%;
  margin-right: 20px;
  margin-bottom:10px;
}

.photo501 { grid-area: 1 / 1 / 2 / 2; }
.photo502 { grid-area: 1 / 2 / 2 / 3; }
.photo503 { grid-area: 1 / 3 / 2 / 4; }
.photo504 { grid-area: 2 / 1 / 3 / 4; }
.photo505 { grid-area: 3 / 1 / 4 / 2; }
.photo506 { grid-area: 3 / 2 / 4 / 3; }
.photo507 { grid-area: 3 / 3 / 4 / 4; }
.photo508 { grid-area: 4 / 1 / 5 / 4; }

/*end of archive 5  */

.grid-container6 {
  display: grid;
  grid-template-columns: 0.5fr 0.5fr 0.5fr;
  gap: 13px 13px;
  margin-left: 50%;
  margin-right: 20px;
  margin-bottom:60px;
}

.photo601 { grid-area: 1 / 1 / 2 / 2; }
.photo602 { grid-area: 1 / 2 / 2 / 3; }
.photo603 { grid-area: 1 / 3 / 2 / 4; }
.photo604 { grid-area: 2 / 1 / 3 / 4; }
.photo605 { grid-area: 3 / 1 / 4 / 2; }
.photo606 { grid-area: 3 / 2 / 4 / 3; }
.photo607 { grid-area: 3 / 3 / 4 / 4; }
.photo608 { grid-area: 4 / 1 / 5 / 4; }
.photo609 { grid-area: 5 / 1 / 6 / 2; }
.photo610 { grid-area: 5 / 2 / 6 / 3; }
.photo611 { grid-area: 5 / 3 / 6 / 4; }
.photo612 { grid-area: 6 / 1 / 7 / 4; }
.photo613 { grid-area: 7 / 1 / 8 / 2; }
.photo614 { grid-area: 7 / 2 / 8 / 3; }
.photo615 { grid-area: 7 / 3 / 8 / 4; }