/* ANIMASI */

@keyframes text-1{ 
  2%{color: white;} 
  3%{transform:translate(2px,10px) skewX(320deg);} 
  5%{transform:translate(0px,0px) skewX(0deg);} 
  2%,54%{transform:translateX(0px) skew(0deg);} 
  55%{transform:translate(2px,4px) skewX(320deg);} 
  56%{transform:translate(0px,0px) skew(0deg);} 
  57%{transform:translate(4px,5px) skew(0deg);} 
  58%{transform:translate(0px,0px) skew(0deg);} 
  62%{transform:translate(0px,8px) skewX(320deg);} 
  63%{transform:translate(4px,2px) skew(0deg);} 
  90%{transform:translate(1px,3px) skew(0deg);}
  95%{transform:translate(7px,2px) skewX(320deg);}
  100%{transform:translate(0px,0px) skewX(0deg);}
}

@keyframes animasi-ketik {
  from{
    width: 0;
    align-self: center;
  }
  to{
    width: 100%;
    align-self: center;
  }
}

@keyframes animasi-ketik-2 {
  from{
    width: 0;
    align-self: left;
  }
  to{
    width: 100%;
    align-self: left;
  }
}

@keyframes typing {
  from {
    width: 0;
    align-self: center;
  }
  to {
    width: 90%;
  }
}

@keyframes typing-2 {
  from {
    width: 0;
    align-self: left;
    text-align: left;
  }
  to {
    width: 90%;
  }
}

@keyframes blink {
  0%, 100%{
    border-color: #fff;
  }
  50%{
    border-color: #42445A00;
  }
}

@keyframes container-1 {
  from{
    transform: translateX(-10%);
    opacity: 0;
  }
}

@keyframes zoomDanFade {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes slideDownFade {
  0% {
    opacity: 0;
    margin-top: -20px;
  }

  100% {
    opacity: 1;
    margin-top: 0;
  }
}

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

@keyframes fade-in{
  from{
    opacity: 0;
  }
  to{
    opacity: 1;
  }
}

@keyframes  bgcolor1{
  0%, 100%{
    background-color: #000000;
  }
  50%{
    background-color: #00064C;
  }
}


@keyframes one {
    0% { left:    0px; opacity: 1; z-index:  0; }
   20% { left:    0px; opacity: 1; z-index:  0; }
   25% { left: -500px; opacity: 0; z-index:  0; }
   26% { left: -500px; opacity: 0; z-index: -1; }
   27% { left:  500px; opacity: 0; z-index: -1; }
   95% { left:  500px; opacity: 0; z-index:  0; }
  100% { left:    0px; opacity: 1; z-index:  0; }
}

@keyframes two {
    0% { left:  500px; opacity: 0; }
   20% { left:  500px; opacity: 0; }
   25% { left:    0px; opacity: 1; }
   45% { left:    0px; opacity: 1; z-index:  0; }
   50% { left: -500px; opacity: 0; z-index:  0; }
   51% { left:  500px; opacity: 0; z-index: -1; }
  100% { left:  500px; opacity: 0; z-index: -1; } 
}

@keyframes three {
    0% { left:  500px; opacity: 0; } 
   45% { left:  500px; opacity: 0; z-index: -1; } 
   50% { left:    0px; opacity: 1; z-index:  0; }
   70% { left:    0px; opacity: 1; z-index:  0; }
   75% { left: -500px; opacity: 0; z-index:  0; }
   76% { left:  500px; opacity: 0; z-index: -1; } 
  100% { left:  500px; opacity: 0; z-index: -1; } 
}

@keyframes four {
    0% { left:  500px; opacity: 0; z-index: -1; } 
   70% { left:  500px; opacity: 0; z-index:  0; } 
   75% { left:    0px; opacity: 1; z-index:  0; } 
   95% { left:    0px; opacity: 1; z-index:  0; } 
  100% { left: -500px; opacity: 0; z-index:  0; } 
}


@keyframes color2{
  0%, 100%{
    border-color: yellow;
  }
  50%{
    border-color: white;
  }
}


@keyframes preload{
  0%, 80%{
    background-color: black;
    background-size: cover;
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    color: white;
    z-index: 9999;
    margin: auto;
  }
  100%{
    display: none;
  }
}

@keyframes pre-h1{
  from{
    text-align: center;
    margin-top: 30px;
  }
}


@keyframes pre-1{
  0%, 50%, 100%{
    text-align: center;
    top: 100px;
    margin-top: 50px;
    font-size: 3em;
  }
  50%, 100%{
    opacity: 0;
  }
}

@keyframes pre-2{
  50%, 0%, 100%{
    text-align: center;
    top: 100px;
    margin-top: -10;
    font-size: 3em;
  }
  100%{
    opacity: 0;
  }
}

@keyframes pre-3{
  100%, 50%, 0%{
    text-align: center;
    top: 100px;
    margin-top: -10;
    font-size: 3em;
  }
  50%, 0%{
    opacity: 0;
  }
}