#preloader {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: black; 
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100000000;
  color: rgb(21, 164, 203);
  font-size: 5rem;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  animation: fadeOut 3s 3s forwards;
}

#preloader p{
  margin-left: 28vh;
}

#preloader div{
  margin-top: 10vh;
  margin-left: -0.15em;
}

#preloader svg{
  margin-left: -0.05em;
}

.smile {
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: draw 1s forwards 1s;
}

@keyframes appear { to { opacity: 1; transform: scale(1); } }
@keyframes draw { to { stroke-dashoffset: 0; } }

.eye {
  opacity: 0;
  transform: scale(0);
  transform-origin: center;
  animation: appear 0.5s forwards;
}
.eye:nth-child(1) { animation-delay: 0s; }
.eye:nth-child(2) { animation-delay: 0.5s; }

@keyframes fadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; visibility: hidden;  }
}

@media (max-width: 768px){
  #preloader p{
    margin-left: 16vh;
    font-size: 4rem;
}
}