*{
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.dot {
    border-radius: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    top:50%
}

.polygon{
  width: 25vw;
  position: absolute;
  height: 25vh;
  background-color: green;
  clip-path: polygon();
}

#dot1{
  left: 80vw;  height: 40vw;  width: 40vw;
  /* animation: dot1 3s;  
  animation-fill-mode: forwards; */
}

#dot2{
  height: 120vh; 
  width: 120vh;
  left: 0%; 
  /* animation: dot2 3s;  
  animation-fill-mode: forwards; */
}

/* @keyframes dot1{
  0% {left: 80vw; height: 40vw; width: 40vw;}
  25% {left: 100vw; height: 0vw; width: 0vw}
  50% {left: calc(100% - 25vh); height: 50vh; width: 50vh}
  75% {height: 10vh; width: 10vh}
  100% {left: -10vw; background-color: #F8F1DA}
} */

/* @keyframes dot2{
  0%  {left: 0%; height: 120vw; width: 120vw;}
  25% {left: calc(100% - 50vh); height: 100vh; width: 100vh}
  50% {left: calc(100% - 50vh); height: 100vh; width: 100vh}
  75% {left : 50vw; height: 100vh; width: 100vh; background-color: #FEA4FD}
  100% {height: 100vw; width: 100vw;left : 50vw;background-color: #F8F1DA;opacity: 1;}
} */

/* body{
  animation: changecolor 1s;
  animation-delay: 2.3s;
  animation-fill-mode: forwards;
} */

/* @keyframes fadein{
  from {opacity: 0%}
  to  {opacity: 100%}
} */

/* @keyframes changecolor{
  from {background-color: #CE410D}
  to  {background-color: #daca97;}
} */

#name{
  top:50%;
  left:50%;
  opacity: 0%;
  transform:translate(-50%,-50%);
  position: absolute;
  font-family: 'Jost';
  /* animation: fadein .5s;
  animation-delay: 2.3s;   
  animation-fill-mode: forwards;*/
}

#name h1{
  font-size: 12rem;
  color:#e2d1d1;
}

#name a{
  font-size: 1.5em;
  color:#e2d1d1;
}

#name a:hover{
  color:#FDB002;
  background-color: #1E1E1E;
}


@media only screen and (max-width: calc(12rem * 6)) {
  #name h1{
    font-size: calc(100vw / 6);
  }
  
  #name a{
    font-size: 1.5em;
    color:#1E1E1E;
  }
}