* {
  margin: 0;
  padding: 0;
  font-family: "Spartan", sans-serif;
}
html {
  scrollbar-width: none;
  width: 100vw;
  scroll-behavior: smooth;
}
body {
  height: 0;
}
a {
  color: whitesmoke;
  text-decoration: none;
}
header {
  height: 50vh;
  display: flex;
  flex-direction: column;
  position: sticky;
  z-index: 2;
}
main {
  height: 0vh;
}
.slice {
  color: gray;
  background-color: #1c1c24;
  display: grid;
  width: 100vw;
  height: 50vh;
  opacity: 1;
}
.slice1 {
  display: flex;
  font-size: 5.5rem;
  justify-content: center;
  align-items: flex-end;
  position: fixed;
  top: 0px;
}
.slice1 p {
  position: relative;
  margin-bottom: 2vh;
}
@media only screen and (max-width: 529px) {
  .slice1 p {
    margin-bottom: 5vh;
  }
}
.slice2 {
  font-size: 40px;
  justify-content: center;
  position: fixed;
  bottom: 0px;
}
.slice2 p {
  position: relative;
  margin-top: 3vh;
  margin-left: 20px;
}
@media only screen and (min-width: 530px) and (max-width: 949px) {
  .slice2 p {
    margin-left: 0;
  }
}
@media only screen and (max-width: 529px) {
  .slice2 p {
    margin-left: 0;
  }
}
.slice2 .material-icons {
  align-self: center;
  justify-content: center;
  display: flex;
}
.grain {
  content: "";
  display: block;
  background: url("../img/filter/cardboard.png");
  height: inherit;
  width: inherit;
  position: sticky;
  top: 0;
  bottom: 0vh;
}
.title,
.title2 {
  color: white;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 30vh;
  font-size: 5vw;
}
@media only screen and (min-width: 530px) and (max-width: 949px) {
  .title,
  .title2 {
    font-size: 5vw;
  }
}
@media only screen and (max-width: 529px) {
  .title,
  .title2 {
    font-size: 7vw;
  }
}
.red {
  color: #cd3c32;
  font-size: 50px;
}
.rainbow {
  margin-top: -50vh;
  height: 170vh;
  background: linear-gradient(350deg, #833ab4 30%, #fd1d1d 50%, #fcb045 100%);
  background-size: 100%;
  background-repeat: no-repeat;
  z-index: -1;
  position: relative;
  display: flex;
  justify-content: center;
}
.gradient {
  position: sticky;
  top: 0;
  bottom: -1vh;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 50%, #21d4fd 80%);
  overflow: hidden;
}
.nav {
  height: 45vw;
  width: 45vw;
  position: sticky;
  top: 12vh;
  padding-bottom: 24%;
  left: 23%;
  display: flex;
  align-content: flex-start;
  z-index: 2;
}
@media only screen and (min-width: 530px) and (max-width: 949px) {
  .nav {
    height: 70vw;
    width: 70vw;
    position: sticky;
    top: 20vh;
    left: 17%;
    display: flex;
    align-content: flex-start;
    z-index: 2;
  }
}
@media only screen and (max-width: 529px) {
  .nav {
    height: 70vw;
    width: 70vw;
    position: sticky;
    top: 25vh;
    left: 17%;
    display: flex;
    align-content: flex-start;
    z-index: 2;
  }
}
.nav * > span {
  position: absolute;
  font-size: 23px;
  visibility: hidden;
}
.nav .text {
  margin-top: 21%;
  margin-left: 11%;
  padding: 5vw;
  font-size: 2.5vw;
  text-align: center;
  color: whitesmoke;
}
@media only screen and (max-width: 529px), only screen and (min-width: 530px) and (max-width: 949px) {
  .nav .text {
    margin-left: 5%;
  }
}
@media only screen and (max-width: 529px), only screen and (min-width: 530px) and (max-width: 949px) {
  .nav .text h2 {
    top: -13vh;
    position: absolute;
    font-size: 8vw;
  }
}
.nav .text p {
  margin-top: 30px;
}
@media only screen and (max-width: 529px), only screen and (min-width: 530px) and (max-width: 949px) {
  .nav .text p {
    width: 90vw;
    margin-top: 11px;
    position: relative;
    bottom: -35vh;
    font-size: 6vw;
    right: 20vw;
  }
}
@media only screen and (min-width: 530px) and (max-width: 949px) {
  .nav .text p {
    font-size: 6vw;
    bottom: -45vh;
  }
}
.circle {
  height: inherit;
  width: inherit;
  position: absolute;
  border-color: #ddf7fc;
  box-shadow: 0px 0px 5px #ffffff, 0px 0px 10px rgba(255, 255, 255), 0px 0px 20px #02a5ca3f, 0px 0px 25px #02a5ca62, 0px 0px 30px #02a5ca6b, 0px 0px 5px #ffffff inset, 0px 0px 10px rgba(255, 255, 255) inset, 0px 0px 20px #02a5caad inset, 0px 0px 25px #02a5cab1 inset, 0px 0px 30px #02a5ca9a inset;
  z-index: 2;
}
.circle1 {
  border-radius: 43% 45% 40% 42%;
  animation: wave 10s infinite reverse;
  border: 2px solid #fff;
}
.circle2 {
  border-radius: 43% 45% 40% 42%;
  animation: wave 10s infinite linear;
  border: 2px solid #fff;
}
.circle3 {
  border-radius: 40% 48% 45% 50%;
  animation: wave 12s infinite reverse;
  border: 2px solid #fff;
}
.circle4 {
  border-radius: 43% 45% 40% 42%;
  animation: wave 11s infinite linear;
  border: 2px solid #fff;
}
.circle5 {
  border-radius: 44% 50% 39% 47%;
  animation: wave 13s infinite reverse;
  border: 2px solid #fff;
}
@keyframes wave {
  0% {
    transform: rotate(0deg) scale(1, 1);
  }
  50% {
    transform: rotate(180deg) scale(0.95, 0.95);
  }
  100% {
    transform: rotate(360deg) scale(1, 1);
  }
}
@-webkit-keyframes wave {
  0% {
    -webkit-transform: rotate(0deg) scale(1, 1);
  }
  50% {
    -webkit-transform: rotate(180deg) scale(0.95, 0.95);
  }
  100% {
    -webkit-transform: rotate(360deg) scale(1, 1);
  }
}
.nav .dote {
  height: 40px;
  width: 40px;
  display: flex;
  content: "";
  background-color: white;
  background: radial-gradient(circle, #ffffff 0%, rgba(250, 250, 250, 0.9743854) 82%, rgba(255, 255, 255, 0.59986001) 100%);
  border-radius: 50%;
  border-color: #ddf7fc;
  box-shadow: 0px 0px 10px #ffffff, 0px 0px 20px #ffffff, 0px 0px 20px #ffffff, 0px 0px 20px #ffffff, 0px 0px 20px #228dff3f, 0px 0px 25px #228dff62, 0px 0px 30px #228dff6b;
  z-index: 2;
  justify-content: center;
}
.nav .dote-gold {
  background-color: #fee762;
  background: radial-gradient(circle, #fee762 0%, rgba(254, 231, 98, 0.9743854) 82%, rgba(254, 231, 98, 0.59986001) 100%);
  border-color: #ffd700;
  box-shadow: 0px 0px 10px #fee762, 0px 0px 20px #fee762, 0px 0px 20px #fee762, 0px 0px 20px #fee762, 0px 0px 20px #ffd7003f, 0px 0px 25px #ffd70062, 0px 0px 30px #ffd7006b;
  visibility: hidden;
}
.miniIsland {
  visibility: hidden;
  height: 50px;
  width: 50px;
  display: flex;
  left: -51%;
  top: -31%;
}
.img1 {
  position: absolute;
  left: 47%;
}
@media only screen and (max-width: 529px) {
  .img1 {
    left: 42%;
  }
}
.img1 span {
  top: -150%;
}
.img1:hover * {
  visibility: visible;
}
.img2 {
  position: absolute;
  left: 7%;
  top: 19%;
}
@media only screen and (max-width: 529px), only screen and (min-width: 530px) and (max-width: 949px) {
  .img2 {
    left: 0%;
    top: 22%;
  }
}
.img2 span {
  right: 150%;
}
@media only screen and (max-width: 529px), only screen and (min-width: 530px) and (max-width: 949px) {
  .img2 span {
    left: 150%;
    top: 150%;
  }
}
.img2:hover * {
  visibility: visible;
  opacity: 1;
}
.img3 {
  position: absolute;
  right: 7%;
  top: 19%;
}
@media only screen and (max-width: 529px), only screen and (min-width: 530px) and (max-width: 949px) {
  .img3 {
    right: 0%;
    top: 22%;
  }
}
.img3 span {
  left: 120%;
}
@media only screen and (max-width: 529px), only screen and (min-width: 530px) and (max-width: 949px) {
  .img3 span {
    left: -375%;
    top: 150%;
  }
}
.img3:hover * {
  visibility: visible;
  opacity: 1;
}
.img4 {
  position: absolute;
  right: 7%;
  top: 75%;
}
@media only screen and (max-width: 529px), only screen and (min-width: 530px) and (max-width: 949px) {
  .img4 {
    right: 10%;
    top: 80%;
  }
}
.img4 span {
  left: 150%;
}
@media only screen and (max-width: 529px), only screen and (min-width: 530px) and (max-width: 949px) {
  .img4 span {
    left: -300%;
    bottom: 250%;
  }
}
.img4:hover * {
  visibility: visible;
  opacity: 1;
}
.img5 {
  position: absolute;
  left: 7%;
  top: 75%;
}
.img5 span {
  right: 150%;
}
@media only screen and (max-width: 529px), only screen and (min-width: 530px) and (max-width: 949px) {
  .img5 span {
    left: 150%;
    bottom: 250%;
  }
}
@media only screen and (max-width: 529px), only screen and (min-width: 530px) and (max-width: 949px) {
  .img5 {
    left: 10%;
    top: 80%;
  }
}
.img5:hover * {
  visibility: visible;
  opacity: 1;
}
#burger {
  position: fixed;
  right: 2vw;
  cursor: pointer;
}
@media only screen and (max-width: 529px) {
  #burger {
    right: 5vw;
  }
}
#portfolio .burger .bar {
  border: 2px solid #aca0a0;
  background-color: #aca0a0;
}
#portfolio .burger :hover .bar {
  box-shadow: 0px 0px 5px #ffffff, 0px 0px 10px rgba(255, 255, 255), 0px 0px 20px #aca0a03f, 0px 0px 25px #aca0a062, 0px 0px 30px #aca0a06b, 0px 0px 5px #ffffff inset, 0px 0px 10px rgba(255, 255, 255) inset, 0px 0px 20px #aca0a0ad inset, 0px 0px 25px #aca0a0b1 inset, 0px 0px 30px #aca0a09a inset;
}
#portfolio .burgerNav {
  border: 2px solid #aca0a0;
  background-color: #aca0a062;
  box-shadow: 0px 0px 5px #ffffff, 0px 0px 10px rgba(255, 255, 255), 0px 0px 20px #aca0a03f, 0px 0px 25px #aca0a062, 0px 0px 30px #aca0a06b, 0px 0px 5px #ffffff inset, 0px 0px 10px rgba(255, 255, 255) inset, 0px 0px 20px #aca0a0ad inset, 0px 0px 25px #aca0a0b1 inset, 0px 0px 30px #aca0a09a inset;
}
.burger {
  position: absolute;
  right: 2vw;
  top: 3vw;
  z-index: 1;
  position: fixed;
}
.burger :hover .bar {
  box-shadow: 0px 0px 5px #ffffff, 0px 0px 10px rgba(255, 255, 255), 0px 0px 20px #02a5ca3f, 0px 0px 25px #02a5ca62, 0px 0px 30px #02a5ca6b, 0px 0px 5px #ffffff inset, 0px 0px 10px rgba(255, 255, 255) inset, 0px 0px 20px #02a5caad inset, 0px 0px 25px #02a5cab1 inset, 0px 0px 30px #02a5ca9a inset;
}
@media only screen and (max-width: 529px) {
  .burger {
    top: 5vw;
  }
}
.burger .bar {
  width: 35px;
  margin: 6px 0;
  border: 2px solid whitesmoke;
  transition: 0.4s;
  right: 2vh;
  background-color: whitesmoke;
}
.burger .burgerNav {
  height: 50vh;
  width: 300px;
  border: 2px solid #fff;
  box-shadow: 0px 0px 5px #ffffff, 0px 0px 10px rgba(255, 255, 255), 0px 0px 20px #02a5ca3f, 0px 0px 25px #02a5ca62, 0px 0px 30px #02a5ca6b, 0px 0px 5px #ffffff inset, 0px 0px 10px rgba(255, 255, 255) inset, 0px 0px 20px #02a5caad inset, 0px 0px 25px #02a5cab1 inset, 0px 0px 30px #02a5ca9a inset;
  position: fixed;
  top: 6vw;
  right: 2vw;
  display: none;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-evenly;
  background-color: #02a5ca62;
  padding-left: 1vw;
}
@media only screen and (min-width: 530px) and (max-width: 949px) {
  .burger .burgerNav {
    width: 95vw;
    height: 20vh;
    flex-wrap: wrap;
    padding: 20px;
    margin-top: 2vh;
    justify-content: center;
  }
}
@media only screen and (max-width: 529px) {
  .burger .burgerNav {
    width: 95vw;
    height: 20vh;
    right: 3vw;
    flex-wrap: wrap;
    top: 12vw;
    margin-top: 2vh;
    padding: 3vw;
    justify-content: center;
  }
}
.burger a {
  text-decoration: none;
  color: white;
  margin: 2vh;
  font-size: 20px;
  transition: 0.1s;
}
.burger a:hover {
  text-shadow: 0 0 5px #ffffff;
}
@media only screen and (max-width: 529px) {
  .burger a {
    margin: 1vh;
    padding-top: 1vh;
    font-size: 2vh;
  }
}
.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {
  opacity: 0;
}
.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -6px);
}
.scale-in-tr {
  -webkit-animation: scale-in-tr 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: scale-in-tr 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
/* ----------------------------------------------
 * Generated by Animista on 2021-6-27 14:35:23
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */
/**
 * ----------------------------------------
 * animation scale-in-tr
 * ----------------------------------------
 */
@-webkit-keyframes scale-in-tr {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
    opacity: 1;
  }
}
@keyframes scale-in-tr {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
    opacity: 1;
    display: flex;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
    opacity: 1;
    display: flex;
  }
}
.scale-out-tr {
  -webkit-animation: scale-out-tr 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
  animation: scale-out-tr 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}
/* ----------------------------------------------
 * Generated by Animista on 2021-6-27 14:39:18
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */
/**
 * ----------------------------------------
 * animation scale-out-tr
 * ----------------------------------------
 */
@-webkit-keyframes scale-out-tr {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
    opacity: 1;
    display: none;
  }
}
@keyframes scale-out-tr {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
    opacity: 1;
    display: none;
  }
}
.credit {
  position: absolute;
  bottom: 0;
}
.earth {
  position: relative;
  height: 200vh;
  width: 100vw;
  display: flex;
  overflow: hidden;
  z-index: -2;
  background: linear-gradient(180deg, #21d4fd 0%, #0089d0 50%, #d8e7f8 93%);
}
.earth .title {
  margin-top: 40vh;
}
.clouds {
  position: relative;
  z-index: -6;
  margin-top: 10vh;
}
.cloud {
  position: absolute;
}
.cloud1 {
  width: 50vw;
  left: 5%;
}
.cloud2 {
  width: 41vw;
  left: 37%;
  margin-top: 24vh;
}
.cloud3 {
  width: 27vw;
  left: 3%;
  margin-top: 53vh;
}
.cloud4 {
  width: 30vw;
  left: 59%;
  margin-top: 60vh;
}
.cloud5 {
  width: 47vw;
  left: 8%;
  margin-top: 70vh;
}
.cloud6 {
  width: 40vh;
  left: 65%;
  margin-top: 10vh;
}
.parallaxEarth {
  height: 250vh;
  width: 100vw;
  top: 0vh;
  z-index: -7;
  position: relative;
  margin-top: 70vh;
}
.parallaxEarth .flower {
  position: absolute;
  width: 10vw;
  z-index: 3;
  margin-top: -2vh;
}
@media only screen and (max-width: 529px) {
  .parallaxEarth .flower {
    width: 25vw;
    z-index: 3;
    margin-top: 1vh;
  }
}
@media only screen and (min-width: 530px) and (max-width: 949px) {
  .parallaxEarth .flower {
    width: 20vw;
    z-index: 3;
    margin-top: 1vh;
  }
}
.parallaxEarth #flower2 {
  width: 7vw;
  margin-top: 1vh;
}
@media only screen and (max-width: 529px) {
  .parallaxEarth #flower2 {
    width: 20vw;
    z-index: 3;
    margin-top: 1vh;
  }
}
@media only screen and (min-width: 530px) and (max-width: 949px) {
  .parallaxEarth #flower2 {
    width: 15vw;
    z-index: 3;
    margin-top: 2vh;
  }
}
.parallaxEarth .island7 {
  z-index: -2;
}
.parallaxEarth .island6 {
  z-index: -4;
}
.parallaxEarth .island10 {
  z-index: -5;
}
.island {
  position: absolute;
  max-height: 100%;
  width: inherit;
  height: inherit;
  margin-top: 6vh;
}
@media only screen and (max-width: 529px) {
  .island {
    margin-top: 8vh;
  }
}
@media only screen and (min-width: 530px) and (max-width: 949px) {
  .island {
    margin-top: 4vh;
    margin-top: 8vh;
  }
}
.island12 {
  width: 44vw;
  filter: blur(2px);
  left: -50vh;
}
.island13 {
  width: 56vw;
  filter: blur(2px);
  right: -60vh;
  margin-top: 20vh;
}
.island1 {
  width: 35vw;
  right: -3%;
  margin-top: 86vh;
  z-index: -1;
}
.island2 {
  width: 35vw;
  margin-top: 100vh;
  z-index: -1;
}
.island3 {
  width: 20vw;
  height: 20vw;
  right: 30%;
  margin-top: 98vh;
  z-index: -1;
}
.island4 {
  width: 17vw;
  right: 23%;
  margin-top: 95vh;
  z-index: -2;
}
.island5 {
  width: 13vw;
  right: 16%;
  margin-top: 90vh;
  z-index: -3;
}
.island6 {
  width: 8vw;
  height: 8vw;
  right: 25%;
  margin-top: 92vh;
  z-index: -4;
}
.island7 {
  width: 17vw;
  height: 17vw;
  left: 18%;
  margin-top: 6vh;
  z-index: -2;
}
.island8 {
  width: 17vw;
  height: 17vw;
  left: 11%;
  margin-top: 94vh;
  z-index: -3;
}
.island9 {
  width: 14vw;
  left: 26%;
  margin-top: 93vh;
  z-index: -4;
}
.island10 {
  width: 13vw;
  height: 13vw;
  left: 33%;
  margin-top: 89vh;
  z-index: -5;
}
.island11 {
  width: 8vw;
  left: 41%;
  margin-top: 93vh;
  z-index: -6;
}
.tooltip {
  position: absolute;
  display: inline-block;
  z-index: 1;
  display: flex;
  justify-content: center;
}
/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  background-color: rgba(85, 85, 85, 0.434);
  color: #fff;
  text-align: left;
  padding: 5px 5px;
  width: 600px;
  /* Position the tooltip text */
  position: absolute;
  z-index: 5;
  bottom: 130%;
  opacity: 0;
  transition: opacity 1s;
  padding: 30px;
}
@media only screen and (max-width: 529px), only screen and (min-width: 530px) and (max-width: 949px) {
  .tooltip .tooltiptext {
    width: 48vw;
    height: 32vh;
  }
}
.tooltip .tooltiptext * {
  margin-top: 2%;
  margin-left: 1%;
}
.tooltip .tooltiptext a {
  color: white;
  margin-top: 2vh;
  font-size: 10px;
}
.tooltip .tooltiptext .column {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.tooltip .tooltiptext .row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.tooltip .tooltiptext .row img {
  width: 50px;
}
.tooltip .tooltiptext .row div {
  width: 100%;
}
.tooltip .tooltiptext .row h2 {
  font-size: 1.2em;
}
/* Tooltip arrow */
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
.tooltipPos1 {
  margin-top: 91vh;
}
@media only screen and (max-width: 529px), only screen and (min-width: 530px) and (max-width: 949px) {
  .tooltipPos1 .tooltiptext {
    left: -45vw;
    width: 90vw;
    height: unset;
    font-size: 3vw;
  }
}
@media only screen and (min-width: 530px) and (max-width: 949px) {
}
.tooltipPos2 {
  margin-top: 86vh;
}
@media only screen and (max-width: 529px), only screen and (min-width: 530px) and (max-width: 949px) {
  .tooltipPos2 .tooltiptext {
    left: -62vw;
    width: 90vw;
    height: unset;
    font-size: 3vw;
  }
}
@media only screen and (min-width: 530px) and (max-width: 949px) {
}
.tooltipPos3 {
  margin-top: 87vh;
}
@media only screen and (max-width: 529px), only screen and (min-width: 530px) and (max-width: 949px) {
  .tooltipPos3 .tooltiptext {
    left: -13vw;
    width: 90vw;
    height: unset;
    font-size: 3vw;
  }
}
@media only screen and (min-width: 530px) and (max-width: 949px) {
}
.tooltipPos4 {
  margin-top: 83vh;
}
.tooltipPos4 .tooltiptext {
  padding-left: 15px;
}
.tooltipPos4 .tooltiptext ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.tooltipPos4 .tooltiptext li {
  margin: 5px;
}
@media only screen and (max-width: 529px), only screen and (min-width: 530px) and (max-width: 949px) {
  .tooltipPos4 .tooltiptext {
    left: -28vw;
    width: 90vw;
    height: unset;
    font-size: 3vw;
  }
}
@media only screen and (min-width: 530px) and (max-width: 949px) {
}
#earth {
  font-weight: 300;
}
.bounce-4 {
  -webkit-animation: bounce-4 0.8s cubic-bezier(0.39, 0.575, 0.565, 1) 6 alternate-reverse both;
  animation: bounce-4 0.8s cubic-bezier(0.39, 0.575, 0.565, 1) 6 alternate-reverse both;
}
@keyframes bounce-4 {
  0% {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
  }
}
.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
  -webkit-animation-duration: 7s;
  animation-duration: 7s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
}
@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale3d(0.8, 0.8, 0.8);
    transform: scale3d(0.8, 0.8, 0.8);
  }
  50% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  100% {
    -webkit-transform: scale3d(0.8, 0.8, 0.8);
    transform: scale3d(0.8, 0.8, 0.8);
  }
}
@keyframes pulse {
  0% {
    -webkit-transform: scale3d(0.8, 0.8, 0.8);
    transform: scale3d(0.8, 0.8, 0.8);
    visibility: visible;
  }
  50% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    visibility: visible;
  }
  100% {
    -webkit-transform: scale3d(0.8, 0.8, 0.8);
    transform: scale3d(0.8, 0.8, 0.8);
    visibility: hidden;
  }
}
.fireMain {
  height: 250vh;
  width: 100vw;
  background: #d8e7f8;
  background: linear-gradient(180deg, #d8e7f8 0%, #c9a6b0 15%, #a50e07 38%, #a50e07 100%);
}
.parallaxFire {
  height: 200vh;
  width: 100vw;
  background-repeat: no-repeat;
  background-size: cover;
  position: sticky;
  top: 100%;
  z-index: -7;
}
.ambers {
  position: relative;
  z-index: 2;
  top: -24vh;
  bottom: -1vh;
  width: 100vw;
  height: 200vh;
  padding-top: 31vh;
  display: flex;
  justify-content: center;
  overflow: hidden;
}
.ambers .amberBG {
  position: absolute;
  width: 150vw;
  top: -30vh;
  z-index: -1;
}
@media only screen and (min-width: 530px) and (max-width: 949px) {
  .ambers .amberBG {
    width: 217vw;
    top: 14vh;
  }
}
@media only screen and (max-width: 529px) {
  .ambers .amberBG {
    width: 230vw;
    top: 31vh;
  }
}
@media only screen and (max-width: 529px) and (min-height: 801px) {
  .ambers .amberBG {
    top: 38vh;
    width: 230vw;
  }
}
#fire {
  font-weight: 300;
}
.fire {
  position: relative;
  height: 140vh;
  width: 100vw;
  display: flex;
  overflow: hidden;
  z-index: -1;
  top: -3vh;
  cursor: pointer;
}
.flame {
  z-index: -6;
  position: sticky;
  top: 0;
  bottom: -1vh;
  width: 100vw;
  height: 100vh;
}
.flex > * {
  position: absolute;
  display: flex;
}
.fire1 {
  left: 19vw;
  top: 27vh;
}
@media only screen and (min-width: 530px) and (max-width: 949px), only screen and (max-width: 529px), only screen and (max-width: 529px) and (min-height: 801px) {
  .fire1 {
    top: 35vh;
  }
}
.fire2 {
  left: 56vw;
  top: 25vh;
}
@media only screen and (max-width: 529px), only screen and (min-width: 530px) and (max-width: 949px), only screen and (max-width: 529px) and (min-height: 801px) {
  .fire2 {
    top: 35vh;
  }
}
.fire3 {
  left: 22vw;
  top: 52vh;
}
.fire4 {
  left: 42vw;
  top: 49vh;
}
.flame1 {
  animation: pulse 10s 1s infinite  both;
  width: 15vw;
  top: 1vh;
  z-index: 0;
  left: 16vw;
}
@media only screen and (max-width: 529px), only screen and (min-width: 530px) and (max-width: 949px), only screen and (max-width: 529px) and (min-height: 801px) {
  .flame1 {
    width: 19vw;
  }
}
.flame2 {
  animation: pulse 5s 3s infinite reverse both;
  width: 18vw;
  left: -1vw;
  top: -4vw;
}
@media only screen and (max-width: 529px) and (min-height: 801px), only screen and (max-width: 529px), only screen and (min-width: 530px) and (max-width: 949px) {
  .flame2 {
    width: 22vw;
  }
}
.flame3 {
  animation: pulse 7s 3s infinite reverse both;
  width: 15vw;
  left: 8vw;
  top: 5vh;
}
@media only screen and (max-width: 529px), only screen and (min-width: 530px) and (max-width: 949px), only screen and (max-width: 529px) and (min-height: 801px) {
  .flame3 {
    width: 21vw;
  }
}
.flame4 {
  animation: pulse 4s 1s infinite  both;
  width: 14vw;
}
@media only screen and (max-width: 529px), only screen and (min-width: 530px) and (max-width: 949px), only screen and (max-width: 529px) and (min-height: 801px) {
  .flame4 {
    width: 19vw;
  }
}
.flame5 {
  animation: pulse 4s 1s infinite reverse both;
  width: 13vw;
  top: -3vh;
  left: 7vw;
  z-index: 1;
}
@media only screen and (max-width: 529px), only screen and (min-width: 530px) and (max-width: 949px), only screen and (max-width: 529px) and (min-height: 801px) {
  .flame5 {
    width: 20vw;
  }
}
.flame6 {
  animation: pulse 8s 2s infinite  both;
  width: 14vw;
  left: -6vw;
  top: 4vh;
  z-index: 0;
}
@media only screen and (max-width: 529px), only screen and (min-width: 530px) and (max-width: 949px), only screen and (max-width: 529px) and (min-height: 801px) {
  .flame6 {
    width: 19vw;
  }
}
.flame7 {
  animation: pulse 4s 1s infinite reverse both;
  width: 17vw;
  left: -6vw;
  top: 5vw;
}
@media only screen and (max-width: 529px), only screen and (min-width: 530px) and (max-width: 949px), only screen and (max-width: 529px) and (min-height: 801px) {
  .flame7 {
    width: 20vw;
  }
}
.flame8 {
  animation: pulse 7s 1s infinite  both;
  width: 16vw;
  left: 11vw;
  top: -3vw;
}
@media only screen and (max-width: 529px), only screen and (min-width: 530px) and (max-width: 949px), only screen and (max-width: 529px) and (min-height: 801px) {
  .flame8 {
    width: 21vw;
  }
}
.flame9 {
  animation: pulse 6s 1s infinite reverse  both;
  width: 16vw;
  top: 7vh;
  left: 4vw;
}
@media only screen and (max-width: 529px), only screen and (min-width: 530px) and (max-width: 949px), only screen and (max-width: 529px) and (min-height: 801px) {
  .flame9 {
    width: 19vw;
  }
}
.flame10 {
  animation: pulse 9s  infinite  both;
  width: 14vw;
  top: 3vh;
  left: 14vw;
}
@media only screen and (max-width: 529px), only screen and (min-width: 530px) and (max-width: 949px), only screen and (max-width: 529px) and (min-height: 801px) {
  .flame10 {
    width: 20vw;
  }
}
.flame11 {
  animation: pulse 3s  infinite reverse both;
  width: 14vw;
  left: 6vw;
  top: -2vw;
}
@media only screen and (max-width: 529px), only screen and (min-width: 530px) and (max-width: 949px), only screen and (max-width: 529px) and (min-height: 801px) {
  .flame11 {
    width: 19vw;
  }
}
.flame12 {
  animation: pulse 4s 2s infinite  both;
  width: 14vw;
  top: 5vh;
  left: 0vw;
}
@media only screen and (max-width: 529px), only screen and (min-width: 530px) and (max-width: 949px), only screen and (max-width: 529px) and (min-height: 801px) {
  .flame12 {
    width: 18vw;
  }
}
* {
  box-sizing: border-box;
}
.scene {
  margin: 40px 0;
  position: absolute;
  width: 40vh;
  height: 40vh;
  margin: 250px auto;
  perspective: 1000px;
  left: 35vw;
  display: none;
  flex-direction: column;
  align-items: center;
}
@media only screen and (max-width: 529px) {
  .scene {
    left: 15vw;
    bottom: 60vh;
  }
}
@media only screen and (min-width: 530px) and (max-width: 949px) {
  .scene {
    bottom: 75vh;
    left: 23vw;
  }
}
@media only screen and (max-width: 529px) and (min-height: 801px) {
  .scene {
    left: 18vw;
    width: 30vh;
    height: 30vh;
    bottom: 71vh;
  }
}
.buttonX {
  position: absolute;
  right: -20vw;
  top: -75px;
  z-index: 3;
  cursor: pointer;
}
.buttonX :hover {
  transition: 0.2s;
  text-shadow: 0 0 10px #cd3c32;
}
@media only screen and (max-width: 529px) and (min-height: 801px) {
  .buttonX {
    font-size: 23px;
    height: 40px;
    width: 40px;
    right: -10vw;
  }
}
@media only screen and (max-width: 529px) {
  .buttonX {
    font-size: 23px;
    height: 40px;
    width: 40px;
    right: -7vw;
    top: -150px;
  }
}
@media only screen and (min-width: 530px) and (max-width: 949px) {
  .buttonX {
    font-size: 23px;
    height: 40px;
    width: 40px;
    right: -15vw;
  }
}
.buttonX span {
  color: #cd3c32;
  font-size: 50px;
}
.carousel {
  width: 100%;
  height: 100%;
  position: absolute;
  transform: translateZ(-288px);
  transform-style: preserve-3d;
  transition: transform 1s;
}
.carousel__cell {
  position: absolute;
  background-position: center;
  background-size: cover;
  width: 40vh;
  height: 40vh;
  left: 10px;
  top: 10px;
  line-height: 36px;
  font-weight: bold;
  color: bisque;
  text-align: center;
}
@media only screen and (max-width: 529px) and (min-height: 801px) {
  .carousel__cell {
    width: 30vh;
    height: 30vh;
  }
}
.carousel__cell h1 {
  top: -50px;
  position: relative;
}
@media only screen and (max-width: 529px) {
  .carousel__cell h1 {
    top: -25vh;
  }
}
.carousel__cell p {
  position: relative;
  align-items: center;
  display: flex;
  height: 30vh;
}
@media only screen and (max-width: 529px) {
  .carousel__cell p {
    font-size: 0.8em;
  }
}
.cell6 {
  display: block;
}
.carousel__cell:nth-child(6n + 1) {
  background-image: url("../img/fire/fire1.png");
}
.carousel__cell:nth-child(6n + 2) {
  background-image: url("../img/fire/fire2.png");
}
.carousel__cell:nth-child(6n + 3) {
  background-image: url("../img/fire/fire3.png");
}
.carousel__cell:nth-child(6n + 4) {
  background-image: url("../img/fire/fire1.png");
}
.carousel__cell:nth-child(6n + 5) {
  background-image: url("../img/fire/fire2.png");
}
.carousel__cell:nth-child(6n + 6) {
  background-image: url("../img/fire/fire3.png");
}
.carousel__cell:nth-child(1) {
  transform: rotateY(0deg) translateZ(30vw);
}
@media only screen and (max-width: 529px) {
  .carousel__cell:nth-child(1) {
    transform: translateZ(60vw);
  }
}
@media only screen and (min-width: 530px) and (max-width: 949px) {
  .carousel__cell:nth-child(1) {
    transform: translateZ(50vw);
  }
}
@media only screen and (max-width: 529px) and (min-height: 801px) {
  .carousel__cell:nth-child(1) {
    transform: translateZ(60vw);
  }
}
.carousel__cell:nth-child(2) {
  transform: rotateY(60deg) translateZ(30vw);
}
@media only screen and (max-width: 529px) {
  .carousel__cell:nth-child(2) {
    transform: rotateY(60deg) translateZ(60vw);
  }
}
@media only screen and (max-width: 529px) and (min-height: 801px) {
  .carousel__cell:nth-child(2) {
    transform: rotateY(60deg) translateZ(60vw);
  }
}
@media only screen and (min-width: 530px) and (max-width: 949px) {
  .carousel__cell:nth-child(2) {
    transform: rotateY(60deg) translateZ(50vw);
  }
}
.carousel__cell:nth-child(3) {
  transform: rotateY(120deg) translateZ(30vw);
}
@media only screen and (max-width: 529px) {
  .carousel__cell:nth-child(3) {
    transform: rotateY(120deg) translateZ(60vw);
  }
}
@media only screen and (max-width: 529px) and (min-height: 801px) {
  .carousel__cell:nth-child(3) {
    transform: rotateY(120deg) translateZ(60vw);
  }
}
@media only screen and (min-width: 530px) and (max-width: 949px) {
  .carousel__cell:nth-child(3) {
    transform: rotateY(120deg) translateZ(50vw);
  }
}
.carousel__cell:nth-child(4) {
  transform: rotateY(180deg) translateZ(30vw);
}
@media only screen and (max-width: 529px) {
  .carousel__cell:nth-child(4) {
    transform: rotateY(180deg) translateZ(60vw);
  }
}
@media only screen and (max-width: 529px) and (min-height: 801px) {
  .carousel__cell:nth-child(4) {
    transform: rotateY(180deg) translateZ(60vw);
  }
}
@media only screen and (min-width: 530px) and (max-width: 949px) {
  .carousel__cell:nth-child(4) {
    transform: rotateY(180deg) translateZ(50vw);
  }
}
.carousel__cell:nth-child(5) {
  transform: rotateY(240deg) translateZ(30vw);
}
@media only screen and (max-width: 529px) {
  .carousel__cell:nth-child(5) {
    transform: rotateY(240deg) translateZ(60vw);
  }
}
@media only screen and (max-width: 529px) and (min-height: 801px) {
  .carousel__cell:nth-child(5) {
    transform: rotateY(240deg) translateZ(60vw);
  }
}
@media only screen and (min-width: 530px) and (max-width: 949px) {
  .carousel__cell:nth-child(5) {
    transform: rotateY(240deg) translateZ(50vw);
  }
}
.carousel__cell:nth-child(6) {
  transform: rotateY(300deg) translateZ(30vw);
}
@media only screen and (max-width: 529px) {
  .carousel__cell:nth-child(6) {
    transform: rotateY(300deg) translateZ(60vw);
  }
}
@media only screen and (max-width: 529px) and (min-height: 801px) {
  .carousel__cell:nth-child(6) {
    transform: rotateY(300deg) translateZ(60vw);
  }
}
@media only screen and (min-width: 530px) and (max-width: 949px) {
  .carousel__cell:nth-child(6) {
    transform: rotateY(300deg) translateZ(50vw);
  }
}
.cell1 {
  display: none;
}
.cell2 {
  display: none;
}
.cell3 {
  display: none;
}
.cell4 {
  display: none;
}
.cell5 {
  display: none;
}
.cell6 {
  display: none;
}
.button {
  display: flex;
  position: absolute;
  top: 45vh;
  width: 40vw;
  height: 20px;
  justify-content: space-between;
  cursor: pointer;
}
.button :hover {
  transition: 0.2s;
  text-shadow: 0 0 10px #cd3c32;
}
#water {
  font-weight: 300;
}
.water {
  width: 100vw;
  height: 250vh;
  background: #a50e07;
  background: linear-gradient(180deg, #a50e07 13%, #00a6bb 49%, #6cbbcb 77%, #a1d1dc 85%, #f4b7a8 100%);
  z-index: -1;
  position: relative;
}
.water .title {
  margin-top: 50vh;
}
.water .title2 {
  top: 210vh;
  z-index: -1;
}
.parallaxWater {
  position: relative;
  top: 60vh;
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 100vh;
}
.waterline1 {
  width: 100vw;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
@media only screen and (max-width: 529px) {
  .waterline1 div {
    margin: 1vw;
  }
}
.waterline1 * {
  transition: transform 250ms;
}
.waterline1 * img {
  width: 11vw;
  margin: 1vw -2vw;
}
@media only screen and (min-width: 530px) and (max-width: 949px) {
  .waterline1 * img {
    width: 20vw;
    margin: 4vw -1.5vw;
    z-index: 5;
  }
}
@media only screen and (max-width: 529px) {
  .waterline1 * img {
    width: 24vw;
    margin: 6vw -2vw;
    z-index: 5;
  }
}
.waterline1 * .icon {
  top: 38px;
  left: 10px;
  width: 5vw;
  height: 5vw;
}
@media only screen and (min-width: 530px) and (max-width: 949px) {
  .waterline1 * .icon {
    top: 37px;
    left: 29px;
    width: 10vw;
    height: 10vw;
  }
}
@media only screen and (max-width: 529px) {
  .waterline1 * .icon {
    top: 32px;
    left: 18px;
    width: 10vw;
    height: 10vw;
  }
}
.waterline1 *:hover img {
  transform: translateY(-30px);
  z-index: 5;
}
.waterline1 *:hover .icon {
  filter: grayscale(0%);
  transform: translateY(-30px);
}
.waterline1 .icon {
  filter: grayscale(100%);
  z-index: 6;
}
.waterline1 .tooltiptext {
  width: 350px;
  line-height: 36px;
  font-size: 1vw;
  color: powderblue;
  padding: 30px;
  top: unset;
  bottom: 150%;
}
@media only screen and (min-width: 530px) and (max-width: 949px) {
  .waterline1 .tooltiptext {
    display: none;
  }
}
@media only screen and (max-width: 529px) {
  .waterline1 .tooltiptext {
    display: none;
  }
}
.waterline2 {
  width: 100vw;
  display: flex;
  justify-content: center;
  opacity: 0.3;
  position: relative;
}
.waterline3 {
  margin-top: 50vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  opacity: 0.1;
  position: relative;
}
.smallWater {
  position: sticky;
  top: 10vh;
  background-color: rgba(85, 85, 85, 0.82);
  margin: 3vw;
  padding: 5vw;
  z-index: 2;
  color: powderblue;
  display: none;
}
#air {
  font-weight: 300;
}
.air {
  width: 100vw;
  height: 700vh;
  z-index: -7;
  position: relative;
  display: flex;
  justify-content: center;
}
@media only screen and (max-width: 529px) {
  .air {
    height: 1000vh;
  }
}
@media only screen and (max-width: 529px) and (min-height: 801px) {
  .air {
    height: 750vh;
  }
}
@media only screen and (min-width: 530px) and (max-width: 949px) {
  .air {
    height: 650vh;
  }
}
.air .parallaxWord {
  display: flex;
  flex-direction: column;
  position: relative;
  bottom: -95vh;
  z-index: 0;
}
.air .parallaxWord span {
  font-size: 5vw;
  margin: 10vh 0px 35vh 0px;
  align-self: center;
  visibility: hidden;
  color: #87649e;
  font-weight: 300;
}
@media only screen and (max-width: 529px) {
  .air .parallaxWord span {
    margin: 15vh 0px 30vh 0px;
    font-size: 9vw;
  }
}
@media only screen and (max-width: 529px) and (min-height: 801px) {
  .air .parallaxWord span {
    margin: 10vh 0px 35vh 0px;
    font-size: 9vw;
  }
}
@media only screen and (min-width: 530px) and (max-width: 949px) {
  .air .parallaxWord span {
    font-size: 9vw;
  }
}
.words {
  height: 70vh;
  width: 50vw;
  display: flex;
  justify-content: center;
  overflow: hidden;
}
@media only screen and (max-width: 529px), only screen and (max-width: 529px) and (min-height: 801px), only screen and (min-width: 530px) and (max-width: 949px) {
  .words {
    width: 80vw;
    height: 80vh;
  }
}
.parallaxAir {
  height: 100vh;
  width: 100vw;
  z-index: 1;
  display: flex;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.parallaxAir img {
  height: 90vh;
  position: absolute;
  bottom: -3vh;
}
.parallaxAir .mountain1 {
  height: 65vh;
  bottom: 15vh;
  opacity: 0.8;
  filter: blur(8px);
}
.parallaxAir .mountain2 {
  z-index: 2;
}
.parallaxAir .mountain3 {
  height: 70vh;
  bottom: 5vh;
  filter: blur(5px);
}
.parallaxAir .mountain4 {
  height: 80vh;
  bottom: 0vh;
  z-index: 1;
}
.airBg {
  position: sticky;
  display: flex;
  justify-content: center;
  height: 100vh;
  width: 100vw;
  background: #f4b7a8;
  background: linear-gradient(180deg, #f4b7a8 2%, #dcc7d0 27%, #fad895 62%, #f4b38a 82%, #824f6e 100%);
  z-index: -6;
  top: 0;
}
.contact {
  width: 100vw;
}
.fade-in {
  -webkit-animation: fade-in 2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
  animation: fade-in 2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}
/* ----------------------------------------------
 * Generated by Animista on 2021-6-26 19:32:22
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */
/**
 * ----------------------------------------
 * animation fade-in
 * ----------------------------------------
 */
@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fade-out {
  -webkit-animation: fade-out 0.5s ease-out both;
  animation: fade-out 0.5s ease-out both;
}
/* ----------------------------------------------
 * Generated by Animista on 2021-6-26 19:30:25
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */
/**
 * ----------------------------------------
 * animation fade-out
 * ----------------------------------------
 */
@-webkit-keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.contact {
  width: 100vw;
  height: 180vh;
  background: linear-gradient(180deg, #824f6e 0%, #fff1eb 40%, #ace0f9 100%);
  display: flex;
  justify-content: center;
}
.contact .title {
  margin-top: 30vh;
}
.contact .title h1 {
  font-weight: 300;
}
form {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  position: absolute;
  bottom: 20vh;
  color: #517582;
}
@media only screen and (max-width: 529px) {
  form {
    bottom: 10vh;
  }
}
form * {
  font-size: 20px;
  border: none;
  outline: none;
}
@media only screen and (max-width: 529px) {
  form * {
    width: 90vw;
  }
}
@media only screen and (min-width: 530px) and (max-width: 949px) {
  form * {
    width: 90vw;
  }
}
form div {
  width: 100%;
  flex-direction: column;
  display: flex;
}
form input {
  height: 50px;
  background: #fffdfd78;
  width: 100%;
}
form textarea {
  background: #fffdfd78;
}
form label {
  margin-top: 3vh;
}
.formCont {
  display: flex;
  justify-content: center;
}
.custom-btn {
  width: 22vw;
  height: 50px;
  padding: 10px 25px;
  border: 2px solid #517582;
  font-family: "Lato", sans-serif;
  font-weight: 500;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
}
@media only screen and (max-width: 529px) {
  .custom-btn {
    width: 50vw;
    height: 50px;
  }
}
.btn {
  overflow: hidden;
  transition: all 0.3s ease;
  margin: 10px;
  color: #517582;
  margin-top: 4vh;
}
.btn:hover {
  background: rgba(81, 117, 130, 0.562);
  color: rgba(255, 255, 255, 0.726);
}
.btn:before {
  position: absolute;
  content: "";
  display: inline-block;
  top: -180px;
  left: 0;
  width: 30px;
  height: 100%;
  background-color: #fff;
  animation: shiny-btn1 5s ease-in-out infinite;
}
.btn:active {
  box-shadow: 4px 4px 6px 0 rgba(255, 255, 255, 0.3), -4px -4px 6px 0 rgba(116, 125, 136, 0.2), inset -4px -4px 6px 0 rgba(255, 255, 255, 0.2), inset 4px 4px 6px 0 rgba(238, 195, 6, 0.2);
}
@-webkit-keyframes shiny-btn1 {
  0% {
    -webkit-transform: scale(0) rotate(45deg);
    opacity: 0;
  }
  80% {
    -webkit-transform: scale(0) rotate(45deg);
    opacity: 0.5;
  }
  81% {
    -webkit-transform: scale(4) rotate(45deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(50) rotate(45deg);
    opacity: 0;
  }
}