@font-face {
  font-family: attila;
  src: url(attila.ttf);
}
@font-face {
  font-family: montserrat;
  src: url(Montserrat-Medium.ttf);
}
@font-face {
  font-family: dancing;
  src: url(DancingScript-VariableFont_wght.ttf);
}
@font-face {
  font-family: havelock;
  src: url(havelock.otf);
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: attila;
}

html,
body {
  height: 100%;
  background-color: #232025;
  width: 100%;
}

.no-scroll {
  overflow: hidden !important;
  /* Optional, but useful for fixed/full-screen overlays: */
  height: 100vh !important;
  /* Helps lock the screen better */
  width: 100vw !important;
}

html.no-scroll {
  /* Ensure it works on the root element too */
  overflow: hidden !important;
  height: 100vh !important;
}

::-moz-selection {
  color: #dd4e6e;
}

::selection {
  color: #dd4e6e;
}

body {
  background-color: #232025;
  color: #d1d1d1;
}

.full-nav {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  position: fixed;
  top: -100vh;
  background-color: #cecece;
  color: #2b2b2b;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: all ease 0.5s;
  z-index: 9999;
}
.full-nav h1 {
  font-size: 12rem;
  text-transform: uppercase;
  letter-spacing: -15px;
  position: absolute;
  top: 20%;
  left: 4%;
}
.full-nav .links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 25%;
  font-size: 1.5rem;
  position: absolute;
  left: 4.5%;
  bottom: 10%;
  cursor: pointer;
}
.full-nav .links .left {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.full-nav .links .left h4 {
  font-family: montserrat;
  font-weight: 550;
}
.full-nav .links .left h4 :hover {
  font-weight: 200;
  color: black;
}
.full-nav .links .right {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: start;
  height: 35vh;
  justify-content: center;
}
.full-nav .links .right h4 {
  font-family: montserrat;
  font-weight: 550;
}

nav {
  position: fixed;
  height: 10vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4rem;
  z-index: 999999;
  cursor: pointer;
}
nav h1 {
  text-transform: uppercase;
  font-size: 1rem;
  letter-spacing: 0.5rem;
}
nav .right-nav {
  display: flex;
  align-items: center;
  gap: 3rem;
}
nav .right-nav h2 {
  text-transform: uppercase;
  font-size: 1rem;
  letter-spacing: 2px;
}
nav .right-nav h2 span {
  margin-left: 5px;
}
nav .right-nav .open {
  font-size: 1.5rem;
}
nav .right-nav .close {
  display: none;
  font-size: 2rem;
}

main {
  background-color: #232025;
  color: #d1d1d1;
  position: relative;
}
main #page1 {
  position: relative;
  overflow: hidden;
}
main #page1 img {
  height: 100vh;
  width: 100vw;
  position: relative;
  -o-object-fit: cover;
     object-fit: cover;
  margin-top: 88vh;
  left: 50%;
  top: 60%;
  transform: translate(-50%, 0) scale(0.9);
}
main #page1 h1 {
  position: absolute;
  font-size: 13vw;
  text-transform: uppercase;
  letter-spacing: 1.5rem;
  top: 10%;
  left: 4.5%;
}
main #page1 .bottom {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  position: absolute;
  width: 90%;
  top: 30%;
  left: 8%;
}
main #page1 .bottom h4 {
  font-size: 2.7rem;
  line-height: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
main #page1 .bottom h4 .spacing {
  width: 130%;
}
main #page1 .bottom p {
  width: 12%;
  font-size: 0.85rem;
}
main #page2 {
  min-height: 100vh;
}
main #page2 h1 {
  text-align: center;
  line-height: 1.35;
  font-size: 3rem;
  opacity: 0;
  transform: rotateX(270deg);
  transform-origin: 100% 100%;
}
main #page2 h1 span {
  font-family: dancing;
}
main #page2 h1:nth-child(1) {
  margin-top: 30vh;
}
main #page3 {
  height: 120vh;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
main #page3 .page3-upper span {
  text-transform: uppercase;
  font-size: 0.7rem;
  padding-left: 10rem;
}
main #page3 .page3-upper .line {
  height: 1.5px;
  width: 30vw;
  background-color: #dadada;
  position: absolute;
  left: 5%;
}
main #page3 .page3-lower {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
main #page3 .page3-lower .container1, main #page3 .page3-lower .container {
  display: flex;
  width: 100vw;
  align-items: center;
  justify-content: space-between;
  padding: 2rem;
  position: relative;
}
main #page3 .page3-lower .container1 h1, main #page3 .page3-lower .container h1 {
  font-family: havelock;
  font-size: 4.9vw;
  cursor: pointer;
  transition: all cubic-bezier(0.19, 1, 0.22, 1) 2s;
  position: absolute;
  left: 15%;
  z-index: 2;
}
main #page3 .page3-lower .container1 h1:hover, main #page3 .page3-lower .container h1:hover {
  -webkit-text-stroke: 1px white;
  color: transparent;
}
main #page3 .page3-lower .container1 i, main #page3 .page3-lower .container i {
  font-size: 4.9vw;
  transition: opacity cubic-bezier(0.19, 1, 0.22, 1) 2s;
  opacity: 0;
}
main #page3 .page3-lower .container1 .container1-first, main #page3 .page3-lower .container .container1-first {
  display: flex;
  align-items: center;
}
main #page3 .page3-lower .container1 .container1-hover, main #page3 .page3-lower .container .container1-hover {
  opacity: 0;
  background-color: #ffd000;
  height: 45vh;
  border-radius: 2rem;
  position: absolute;
  color: #232025;
  padding: 2rem 3rem;
  font-weight: 600;
  transform: rotate(0deg);
  left: 5%;
  transition: opacity cubic-bezier(0.19, 1, 0.22, 1) 3s;
  z-index: 1;
}
main #page3 .page3-lower .container1 .container1-hover h1, main #page3 .page3-lower .container .container1-hover h1 {
  font-size: 2rem;
  padding-top: 2rem;
}
main #page3 .page3-lower .container1 .container1-hover h4, main #page3 .page3-lower .container .container1-hover h4 {
  padding-top: 100%;
}
main #page3 .page3-lower .container2, main #page3 .page3-lower .container {
  display: flex;
  width: 100vw;
  align-items: center;
  justify-content: space-between;
  padding: 2rem;
  position: relative;
}
main #page3 .page3-lower .container2 h1, main #page3 .page3-lower .container h1 {
  font-family: havelock;
  font-size: 4.9vw;
  cursor: pointer;
  transition: all cubic-bezier(0.19, 1, 0.22, 1) 2s;
  position: absolute;
  left: 15%;
  z-index: 2;
}
main #page3 .page3-lower .container2 h1:hover, main #page3 .page3-lower .container h1:hover {
  -webkit-text-stroke: 1px white;
  color: transparent;
}
main #page3 .page3-lower .container2 i, main #page3 .page3-lower .container i {
  font-size: 4.9vw;
  transition: opacity cubic-bezier(0.19, 1, 0.22, 1) 3s;
  opacity: 0;
}
main #page3 .page3-lower .container2 .container2-first, main #page3 .page3-lower .container .container2-first {
  display: flex;
  align-items: center;
}
main #page3 .page3-lower .container2 .container2-hover, main #page3 .page3-lower .container .container2-hover {
  opacity: 0;
  background-color: #e9ff22;
  height: 45vh;
  border-radius: 2rem;
  position: absolute;
  color: #232025;
  padding: 2rem 3rem;
  font-weight: 600;
  transform: rotate(0deg);
  left: 5%;
  transition: opacity cubic-bezier(0.19, 1, 0.22, 1) 2s;
  z-index: 1;
}
main #page3 .page3-lower .container2 .container2-hover h1, main #page3 .page3-lower .container .container2-hover h1 {
  font-size: 2rem;
  padding-top: 2rem;
}
main #page3 .page3-lower .container2 .container2-hover h4, main #page3 .page3-lower .container .container2-hover h4 {
  padding-top: 100%;
}
main #page3 .page3-lower .container3, main #page3 .page3-lower .container {
  display: flex;
  width: 100vw;
  align-items: center;
  justify-content: space-between;
  padding: 2rem;
  position: relative;
}
main #page3 .page3-lower .container3 h1, main #page3 .page3-lower .container h1 {
  font-family: havelock;
  font-size: 4.9vw;
  cursor: pointer;
  transition: all cubic-bezier(0.19, 1, 0.22, 1) 2s;
  position: absolute;
  left: 15%;
  z-index: 2;
}
main #page3 .page3-lower .container3 h1:hover, main #page3 .page3-lower .container h1:hover {
  -webkit-text-stroke: 1px white;
  color: transparent;
}
main #page3 .page3-lower .container3 i, main #page3 .page3-lower .container i {
  font-size: 4.9vw;
  transition: opacity cubic-bezier(0.19, 1, 0.22, 1) 3s;
  opacity: 0;
}
main #page3 .page3-lower .container3 .container3-first, main #page3 .page3-lower .container .container3-first {
  display: flex;
  align-items: center;
}
main #page3 .page3-lower .container3 .container3-hover, main #page3 .page3-lower .container .container3-hover {
  opacity: 0;
  background-color: #78e0c1;
  height: 45vh;
  border-radius: 2rem;
  position: absolute;
  color: #232025;
  padding: 2rem 3rem;
  font-weight: 600;
  transform: rotate(0deg);
  left: 5%;
  transition: opacity cubic-bezier(0.19, 1, 0.22, 1) 2s;
  z-index: 1;
}
main #page3 .page3-lower .container3 .container3-hover h1, main #page3 .page3-lower .container .container3-hover h1 {
  font-size: 2rem;
  padding-top: 2rem;
}
main #page3 .page3-lower .container3 .container3-hover h4, main #page3 .page3-lower .container .container3-hover h4 {
  padding-top: 100%;
}
main #page3 .page3-lower .container4, main #page3 .page3-lower .container {
  display: flex;
  width: 100vw;
  align-items: center;
  justify-content: space-between;
  padding: 2rem;
  position: relative;
}
main #page3 .page3-lower .container4 h1, main #page3 .page3-lower .container h1 {
  font-family: havelock;
  font-size: 4.9vw;
  cursor: pointer;
  transition: all cubic-bezier(0.19, 1, 0.22, 1) 2s;
  position: absolute;
  left: 15%;
  z-index: 2;
}
main #page3 .page3-lower .container4 h1:hover, main #page3 .page3-lower .container h1:hover {
  -webkit-text-stroke: 1px white;
  color: transparent;
}
main #page3 .page3-lower .container4 i, main #page3 .page3-lower .container i {
  font-size: 4.9vw;
  transition: opacity cubic-bezier(0.19, 1, 0.22, 1) 3s;
  opacity: 0;
}
main #page3 .page3-lower .container4 .container4-first, main #page3 .page3-lower .container .container4-first {
  display: flex;
  align-items: center;
}
main #page3 .page3-lower .container4 .container4-hover, main #page3 .page3-lower .container .container4-hover {
  opacity: 0;
  background-color: #ff2277;
  height: 45vh;
  border-radius: 2rem;
  position: absolute;
  color: #232025;
  padding: 2rem 3rem;
  font-weight: 600;
  transform: rotate(0deg);
  left: 5%;
  transition: opacity cubic-bezier(0.19, 1, 0.22, 1) 2s;
  z-index: 1;
}
main #page3 .page3-lower .container4 .container4-hover h1, main #page3 .page3-lower .container .container4-hover h1 {
  font-size: 2rem;
  padding-top: 2rem;
}
main #page3 .page3-lower .container4 .container4-hover h4, main #page3 .page3-lower .container .container4-hover h4 {
  padding-top: 100%;
}
main #page3 .page3-lower .container5, main #page3 .page3-lower .container {
  display: flex;
  width: 100vw;
  align-items: center;
  justify-content: space-between;
  padding: 2rem;
  position: relative;
}
main #page3 .page3-lower .container5 h1, main #page3 .page3-lower .container h1 {
  font-family: havelock;
  font-size: 4.9vw;
  cursor: pointer;
  transition: all cubic-bezier(0.19, 1, 0.22, 1) 2s;
  position: absolute;
  left: 15%;
  z-index: 2;
}
main #page3 .page3-lower .container5 h1:hover, main #page3 .page3-lower .container h1:hover {
  -webkit-text-stroke: 1px #333;
  color: transparent;
}
main #page3 .page3-lower .container5 i, main #page3 .page3-lower .container i {
  font-size: 4.9vw;
  transition: opacity cubic-bezier(0.19, 1, 0.22, 1) 3s;
  opacity: 0;
}
main #page3 .page3-lower .container5 .container5-first, main #page3 .page3-lower .container .container5-first {
  display: flex;
  align-items: center;
}
main #page3 .page3-lower .container5 .container5-hover, main #page3 .page3-lower .container .container5-hover {
  opacity: 0;
  background-color: beige;
  height: 45vh;
  border-radius: 2rem;
  position: absolute;
  color: #232025;
  padding: 2rem 3rem;
  font-weight: 600;
  transform: rotate(0deg);
  left: 5%;
  transition: opacity cubic-bezier(0.19, 1, 0.22, 1) 2s;
  z-index: 1;
}
main #page3 .page3-lower .container5 .container5-hover h1, main #page3 .page3-lower .container .container5-hover h1 {
  font-size: 2rem;
  padding-top: 2rem;
}
main #page3 .page3-lower .container5 .container5-hover h4, main #page3 .page3-lower .container .container5-hover h4 {
  padding-top: 100%;
}
main #page4 {
  height: 80vh;
  width: 100vw;
}
main #page4 h1 {
  font-size: 7.8vw;
  padding: 4rem 6.5rem;
  line-height: 8vw;
  width: 90%;
}
main #page5 {
  height: 130vh;
  width: 100vw;
  position: relative;
  overflow: hidden;
}
main #page5 .page5-top {
  height: 50vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
}
main #page5 .page5-top h1 {
  width: 70%;
  font-size: 4vw;
  padding: 3rem 4.5rem;
  line-height: 4vw;
  border-top: 1.5px solid #dadada;
  border-bottom: 1.5px solid #dadada;
  border-right: 1.5px solid #dadada;
}
main #page5 .page5-top h2 {
  width: 30%;
  padding: 3.13rem 4.5rem;
  font-size: 1.4rem;
  line-height: 2.578vw;
  border-top: 1.5px solid #dadada;
  border-bottom: 1.5px solid #dadada;
}
main #page5 .page5-bottom {
  height: 80%;
  display: flex;
  background-color: #ff2277;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  gap: 4.5rem;
  padding-top: 15vh;
  background-image: url(https://uploads-ssl.webflow.com/61defec4a021d8fe954c11bd/61defec4a021d83ede4c11f8_stars.gif);
}
main #page5 .page5-bottom h1 {
  text-align: center;
  font-size: 4vw;
  line-height: 3rem;
}
main #page5 .page5-bottom h1 span {
  font-family: dancing;
  font-size: 4.7rem;
}
main #page5 .page5-bottom p {
  width: 22%;
}
main #page6 {
  height: 120vh;
  overflow: hidden;
}
main #page6 h1 {
  font-size: 14vw;
  text-transform: uppercase;
  line-height: 25vh;
}
main #page6 h1 .one2 {
  color: transparent;
  -webkit-text-stroke: 1px #adadad;
}
main #page6 .slide1h1 {
  overflow-x: auto;
  overflow-y: hidden;
  cursor: default;
}
main #page6 .slide1h1 h1 {
  transform: translateX(-96%);
}
main #page6 .slide1h1::-webkit-scrollbar {
  display: none;
}
main #page6 .slide2h1 {
  overflow-x: auto;
  overflow-y: hidden;
  cursor: default;
}
main #page6 .slide2h1::-webkit-scrollbar {
  display: none;
}
main #page7 {
  height: 110vh;
}
main #page7 h1 {
  text-align: center;
  font-size: 5vh;
  padding-top: 10vw;
}
main #page7 h1 span {
  font-family: dancing;
  font-size: 3.5rem;
}
main #page7 .question {
  height: 50vh;
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: relative;
}
main #page7 .question h3 {
  font-size: 2.8rem;
}
main #page7 .question .question-right {
  position: relative;
  width: 30%;
  height: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
}
main #page7 .question .question-right img {
  position: absolute;
  /* FIX: MUST be fixed to track mouse in viewport */
  opacity: 0;
  transition: all cubic-bezier(0.19, 1, 0.22, 1) 2s;
  /* For smooth show/hide */
  transform: translate(-50%, -50%) rotate(-15deg);
  height: 300px;
  aspect-ratio: 1;
}
main #page7 .question .question-right h3 {
  position: absolute;
}
main #page7 .question .question-left {
  position: relative;
  width: 30%;
  height: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
}
main #page7 .question .question-left img {
  position: absolute;
  opacity: 0;
  transition: all cubic-bezier(0.19, 1, 0.22, 1) 3s;
  transform: translate(-50%, -50%) rotate(-15deg);
  height: 300px;
  aspect-ratio: 1;
}
main #page7 .question .question-left h3 {
  position: absolute;
}
main #page8 {
  height: 95vh;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
main #page8 h1 {
  font-size: 4.5vw;
  text-align: center;
}
main #page8 .cards {
  display: flex;
  align-items: center;
  justify-content: center;
}
main #page8 .cards .card {
  height: 35vh;
  top: 35vh;
  position: absolute;
  box-shadow: 0px 0px 15px #232025;
}
main #page8 .cards .card :hover {
  transform: rotate(13deg) scale(1.1);
}
main #page8 .cards .card img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: all cubic-bezier(0.19, 1, 0.22, 1) 2s;
}
main #page8 .cards #card3 {
  height: 50vh;
  z-index: 11;
}
main #page8 .cards #card1 {
  left: 19vw;
  top: 41.5vh;
  height: 37vh;
  z-index: 9;
}
main #page8 .cards #card4 {
  top: 38vh;
  height: 44vh;
  left: 57vw;
  z-index: 10;
}
main #page8 .cards #card2 {
  height: 44vh;
  left: 30vw;
  top: 38vh;
  z-index: 10;
}
main #page8 .cards #card5 {
  left: 70.5vw;
  z-index: 9;
  height: 37vh;
  top: 41.5vh;
}

@media (max-width: 500px) {
  html, body {
    padding-top: env(safe-area-inset-top);
  }
  nav {
    padding: 3rem 2rem;
  }
  .full-nav h1 {
    font-size: 4rem;
    letter-spacing: 1px;
  }
  .full-nav .links {
    gap: 2rem;
    bottom: 15%;
  }
  .full-nav .links .right {
    justify-content: center;
  }
  main #page1 .bottom {
    flex-direction: column;
    top: 20%;
    left: 10%;
    gap: 2rem;
  }
  main #page1 .bottom h4 {
    font-size: 1.8rem;
  }
  main #page1 .bottom h4 .spacing {
    padding: 0 1rem;
  }
  main #page1 .bottom p {
    width: 45%;
    font-size: 0.85rem;
  }
  main #page1 img {
    -o-object-fit: cover;
       object-fit: cover;
    height: 90vh;
  }
  main #page2 {
    max-height: 70vh;
  }
  main #page2 h1 {
    font-size: 2rem;
  }
  main #page3 {
    height: 90vh;
  }
  main #page3 .page3-lower .container1 {
    gap: 5rem;
  }
  main #page3 .page3-lower .container1 h1 {
    font-size: 1.5rem;
  }
  main #page3 .page3-lower .container1 .container1-hover {
    height: 35vh;
    padding: 1rem 2rem;
  }
  main #page3 .page3-lower .container1 .container1-first {
    align-items: center;
  }
  main #page3 .page3-lower .container1 .container1-first h1 {
    padding-left: 1rem;
  }
  main #page3 .page3-lower .container2 {
    gap: 5rem;
  }
  main #page3 .page3-lower .container2 h1 {
    font-size: 1.5rem;
  }
  main #page3 .page3-lower .container2 .container2-hover {
    height: 35vh;
    padding: 1rem 2rem;
  }
  main #page3 .page3-lower .container2 .container2-first {
    align-items: center;
  }
  main #page3 .page3-lower .container2 .container2-first h1 {
    padding-left: 1rem;
  }
  main #page3 .page3-lower .container3 {
    gap: 5rem;
  }
  main #page3 .page3-lower .container3 h1 {
    font-size: 1.5rem;
  }
  main #page3 .page3-lower .container3 .container3-hover {
    height: 35vh;
    padding: 1rem 2rem;
  }
  main #page3 .page3-lower .container3 .container3-first {
    align-items: center;
  }
  main #page3 .page3-lower .container3 .container3-first h1 {
    padding-left: 1rem;
  }
  main #page3 .page3-lower .container4 {
    gap: 5rem;
  }
  main #page3 .page3-lower .container4 h1 {
    font-size: 1.5rem;
  }
  main #page3 .page3-lower .container4 .container4-hover {
    height: 35vh;
    padding: 1rem 2rem;
  }
  main #page3 .page3-lower .container4 .container4-first {
    align-items: center;
  }
  main #page3 .page3-lower .container4 .container4-first h1 {
    padding-left: 1rem;
  }
  main #page3 .page3-lower .container5 {
    gap: 5rem;
  }
  main #page3 .page3-lower .container5 h1 {
    font-size: 1.5rem;
  }
  main #page3 .page3-lower .container5 .container5-hover {
    height: 35vh;
    padding: 1rem 2rem;
  }
  main #page3 .page3-lower .container5 .container5-first {
    align-items: center;
  }
  main #page3 .page3-lower .container5 .container5-first h1 {
    padding-left: 1rem;
  }
  main #page4 h1 {
    font-size: 3rem;
    line-height: 8vh;
    padding: 3rem 2.5rem;
  }
  main #page5 .page5-top {
    flex-direction: column;
  }
  main #page5 .page5-top h1 {
    width: 100%;
    font-size: 1.3rem;
    line-height: 6vw;
    padding: 2rem 3rem;
    border: 1.5px solid #dadada;
  }
  main #page5 .page5-top h2 {
    width: 100vw;
    font-size: 1.5rem;
    line-height: 7vw;
    padding: 2rem 3rem;
    border: 1.5px solid #dadada;
  }
  main #page5 .page5-bottom h1 {
    font-size: 10vw;
    line-height: 9vw;
  }
  main #page5 .page5-bottom h1 span {
    font-size: 2.5rem;
  }
  main #page5 .page5-bottom p {
    width: 65%;
    line-height: 4.5vw;
  }
  main #page6 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  main #page6 h1 {
    line-height: 12vh;
    font-size: 4rem;
  }
  main #page7 {
    padding: 1rem;
  }
  main #page7 h1 span {
    font-size: 2rem;
  }
  main #page7 .question {
    overflow: hidden;
  }
  main #page7 .question .question-right, main #page7 .question .question-left {
    height: 50%;
    width: 50%;
  }
  main #page7 .question .question-right img, main #page7 .question .question-left img {
    height: 200px;
  }
  main #page7 .question .question-left {
    width: 40%;
  }
  main #page8 {
    overflow-x: visible;
    gap: 10px;
  }
  main #page8 h1 {
    font-size: 12vw;
  }
  main #page8 .cards {
    overflow: auto;
  }
  main #page8 .cards #card1 {
    height: 30vh;
    left: 0%;
  }
  main #page8 .cards #card2 {
    height: 30vh;
    left: 20%;
    top: 47%;
  }
  main #page8 .cards #card3 {
    height: 30vh;
    left: 33%;
    top: 52%;
  }
  main #page8 .cards #card4 {
    height: 30vh;
    left: 48%;
    top: 47%;
  }
  main #page8 .cards #card5 {
    height: 30vh;
    left: 70%;
    top: 43.3%;
  }
}/*# sourceMappingURL=style.css.map */