*{
  box-sizing: border-box;
  color: #e8e3e3;
  font-family: Helvetica;
  margin: 0;
  padding: 0;
}
html{
  background-color: black;
}
.document-body{
  background: #aeb1b4;
  height: 95vh;
  max-height: 95vh;
  min-width: 320px;
  width:100%;
}
.container{
  margin: 0 auto;
  max-width: 864px;
  width: 100%;
}
.text404{
  align-items: center;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  overflow:hidden;
  position: relative;
  width:100%;
}
.text{
  display:flex;
  flex:3;
  height: 6.2em;
  justify-content: center;
  margin-bottom: 4em;
  padding-top: 4em;
  min-width:100%;
}
.text p{
  border-right: 0.15em solid transparent; 
  font-family: monospace;
  font-size: 30px;
  letter-spacing: .15em;
  margin: 0 auto;
  overflow:hidden;
  text-align: center;
  white-space: nowrap; 
  max-width: 0;
}
.four{
  flex:1;
  font-size: 21.4em;
  opacity: 0;
  text-align: center;
  text-shadow: 0 0 5px black;
}
.zero{
  font-size: 21.4em;
  opacity: 0;
  position:absolute;
  text-align: center;
  text-shadow: 0 0 5px black;
  top:0;
  left: calc(60% - 0.5em);
}
.robot{
  flex:1;
  min-width: 130px;
}
.robot svg{
  box-sizing: content-box;
  overflow:visible;
  padding: 0 20px;
  width: 100%;
}

.home{
  margin-top: 2em;
  opacity:0;
  text-align: center;
}
.home a{
  color: #FFC52F;
  text-decoration: none;
}

/* ================== Head: =================== */
@keyframes headmove{
  0%{transform: translateX(0px)}
  25%{transform: translateX(7px)}
  50%{transform: translateX(0px)}
  75%{transform: translateX(-7px)}
  100%{transform: translateX(0)}
}
.head{
  animation: headmove 2.2s 2 linear;
}

@keyframes leftearmove{
  0%{transform: translateX(0px)}
  25%{transform: translateX(-5px)}
  50%{transform: translateX(0px)}
  75%{transform: translateX(2px)}
  100%{transform: translateX(0px)}
}

.leftear{
  animation: leftearmove 2.2s 2 linear;
}

@keyframes rightearmove{
  0%{transform: translateX(0px)}
  25%{transform: translateX(-2px)}
  50%{transform: translateX(0px)}
  75%{transform: translateX(5px)}
  100%{transform: translateX(0px)}
}

.rightear{
  animation: rightearmove 2.2s 2 linear;
}


/* ================== Neck: =================== */
@keyframes neckmove{
  0%{transform: translateX(0px)}
  25%{transform: translateX(-7px)}
  50%{transform: translateX(0px)}
  75%{transform: translateX(7px)}
  100%{transform: translateX(0px)}
}
.neck{
  animation: neckmove 2.2s 2 linear;
}


/* ================== Eyes: =================== */


.lefteye{
  animation: headmove 2.2s 2 linear;
}
.righteye{
  animation: headmove 2.2s 2 linear;
}

@keyframes eyesmove{
  0%{transform: translateX(0px)}
  25%{transform: translateX(12px)}
  50%{transform: translateX(0px)}
  75%{transform: translateX(-17px)}
  100%{transform: translateX(0px)}
}
.lefteyedot,
.righteyedot{
  animation: eyesmove 2.2s 2 ease-out;
}


/* ============= Breaking robot: ============== */
@keyframes right-leg-rotate{
  0%{
    transform: rotate(0deg);
    transform-origin: 333px 426px;
  }
  100%{
    transform: rotate(-40deg);
    transform-origin: 333px 426px;
  }
}
.right-leg{
  animation: right-leg-rotate 1s 1 forwards linear;
  animation-delay: 7s;
}
@keyframes body-rotate{
  0%{
    transform: rotate(0deg);
    transform-origin: 130px 200px;
  }
  100%{
    transform: rotate(20deg);
    transform-origin: 130px 200px;
  }
}
@keyframes body-rotate2{
  0%{
    transform: rotate(20deg) translateX(0px) translateY(0px);
    transform-origin: 130px 200px;
  }
  100%{
    transform: rotate(0deg) translateX(17px) translateY(152px);
    transform-origin: 130px 200px;
  }
}
.body{
  animation: 
    body-rotate 1s 1 forwards linear,
    body-rotate2 1.2s 1 forwards linear;
  animation-delay: 7.7s, 8.7s;
}

@keyframes head-rotate{
  0%{
    transform: rotate(0deg);
    transform-origin: 0px 0px;
  }
  100%{
    transform: rotate(30deg);
    transform-origin: 0px 0px;
  }
}
@keyframes head-rotate2{
  0%{
   transform: rotate(30deg); translateX(0px) translateY(0px);
   transform-origin: 0px 0px;
  }
  100%{
    transform: rotate(90deg) translateX(321px) translateY(-15px);
    transform-origin: 210px 10px;
  }
}
.head{
  animation: 
    head-rotate 1s 1 forwards ease-in,
    head-rotate2 1s 1 forwards ease-in;
    
  animation-delay: 8s, 9s;
}
@keyframes neck-transform{
  0%{
   transform: translateY(0px);
  }
  100%{
    transform: translateY(142px);
  }
}
.neck{
  animation: neck-transform 0.7s 1 forwards linear;
  animation-delay: 8s;
}

@keyframes right-arm-rotate{
  0%{
    transform: rotate(0deg) translateX(0px) translateY(0px);
    transform-origin: 379px 209px;
  }
  100%{
    transform: rotate(60deg) translateX(82px) translateY(164px);
    transform-origin: 379px 209px;
  }
}
.right-arm{
  animation: right-arm-rotate 1s 1 forwards linear;
  animation-delay: 8s;
}

@keyframes left-arm-rotate{
  0%{
    transform: rotate(0deg) translateX(0px) translateY(0px);
    transform-origin: 117px 217px;
  }
  100%{
    transform: rotate(-60deg) translateX(-112px) translateY(122px);
    transform-origin: 117px 217px;
  }
}
.left-arm{
  animation: left-arm-rotate 1.3s 1 forwards linear;
  animation-delay: 8s;
}

/* ================== Arms: =================== */
@keyframes leftarmtoprotate{
  from{
    transform: translateY(0px) rotate(0);
    transform-origin: 117px 209px;
  }
  to{
    transform: translateY(-35px) rotate(21deg);
    transform-origin: 117px 209px;
  }
} 

.leftarmtop{
  animation: leftarmtoprotate 1.2s 1 forwards linear;
  animation-delay: 4s;
}

@keyframes rightarmtoprotate{
  from{
    transform: translateY(0px) rotate(0);
    transform-origin: 379px 209px;
  }
  to{
    transform: translateY(-35px) rotate(-21deg);
    transform-origin: 379px 209px;
  }
} 
.rightarmtop{
  animation: rightarmtoprotate 1.2s 1 forwards linear;
  animation-delay: 4s;
}

@keyframes leftelbowmove{
  from{
    transform: translateX(0px) translateY(0px);
  }
  to{
    transform: translateX(-38px) translateY(-37px);
  }
} 
.leftelbow{
  animation: leftelbowmove 1.2s 1 forwards linear;
  animation-delay: 4s;
}

@keyframes rightelbowmove{
  from{
    transform: translateX(0px) translateY(0px);
  }
  to{
    transform: translateX(38px) translateY(-39px); 
  }
} 
.rightelbow{
  animation: rightelbowmove 1.2s 1 forwards linear;
  animation-delay: 4s;
}

@keyframes leftarmbottomrotate{
  from{
    transform: translateY(0px) rotate(0);
    transform-origin: 104px 299px;
  }
  to{
    transform: translateY(-35px) rotate(145deg);
    transform-origin: 104px 299px;
  }
} 
.leftarmbottom{
  animation: leftarmbottomrotate 1.2s 1 forwards linear;
  animation-delay: 4s;
}

@keyframes rightarmbottomrotate{
  from{
    transform: translateY(0px) rotate(0);
    transform-origin: 407px 299px;
  }
  to{
    transform: translateY(-35px) rotate(-145deg);
    transform-origin: 407px 299px;
  }
} 
.rightarmbottom{
  animation: rightarmbottomrotate 1.2s 1 forwards linear;
  animation-delay: 4s;
}

@keyframes leftpalmrotate{
  from{
    transform: rotate(0) translateX(0px) translateY(0px) scaleX(1);
    transform-origin: 104px 299px;
  }
  to{
    transform: rotate(163deg) translateX(20px) translateY(35px) scaleX(1.4);
    transform-origin: 104px 299px;
  }
} 
.leftpalm{
  animation: leftpalmrotate 1.2s 1 forwards linear;
  animation-delay: 4s;
}

@keyframes rightpalmrotate{
  from{
    transform: rotate(0) translateX(0px) translateY(0px) scaleX(1);
    transform-origin: 407px 299px;
  }
  to{
    transform: rotate(-163deg) translateX(-20px) translateY(35px) scaleX(1.4);
    transform-origin: 407px 299px;
  }
} 
.rightpalm{
  animation: rightpalmrotate 1.2s 1 forwards linear;
  animation-delay: 4s;
}

@keyframes leftshouldermove{
  from{
    transform: rotate(0deg) translateX(0px) translateY(0px);
    transform-origin: 110px 205px;
  }
  to{
    transform: rotate(34deg) translateX(-12px) translateY(-35px);
    transform-origin: 110px 205px;
  }
} 
.leftshoulder{
  animation: leftshouldermove 1.2s 1 forwards linear;
  animation-delay: 4s;
}

@keyframes rightshouldermove{
  from{
    transform: rotate(0deg) translateX(0px) translateY(0px);
    transform-origin: 379px 205px;
  }
  to{
    transform: rotate(-34deg) translateX(13px) translateY(-29px);
    transform-origin: 381px 208px;
  }
} 
.rightshoulder{
  animation: rightshouldermove 1.2s 1 forwards linear;
  animation-delay: 4s;
}


/* ================== Fours: =================== */

@keyframes fleftrotate{
  from{
    opacity: 0;
    transform: scale(0) rotate(0);
  }
  to{
    opacity: 1;
    transform: scale(1) rotate(720deg);
  }
}
.fleft{
  animation: fleftrotate 1s 1 forwards ease-out;
  animation-delay: 6s;
}
@keyframes frightrotate{
  from{
    opacity: 0;
    transform: scale(0) rotate(0);
  }
  to{
    opacity: 1;
    transform: scale(1) rotate(-720deg);
  }
}
@keyframes frightkick{
  0%{
    transform: translateX(0px);
  }
  30%{
    transform: translateX(-200px);
  }
  100%{
    transform: translateX(0px);
  }
}
.fright{
  animation: 
    frightrotate 1s 1 forwards ease-out,
    frightkick 1s 1 forwards ease-in;
  animation-delay: 6s, 7s;
}

/* ================== Body: =================== */

@keyframes bodycolor{
  from{background-color: #aeb1b4;}
  to  {background-color: black;}
}

.document-body{
  animation: bodycolor 2s 1 forwards linear;
  animation-delay: 5s;
}

/* ================== Text: =================== */

@keyframes caret {
  0%  {border-color: transparent;}
  50% {border-color: #FFC52F;}
  100%{border-color: transparent;}
}
  
@keyframes texttype {
  0%{ 
    max-width: 0;
  }
  100%{ 
    max-width: 100%;
  }
}
.text p{
  animation: 
    texttype 4s forwards steps(30, end),
    caret 1s step-end infinite;
  animation-delay: 5.6s;
}

@keyframes zerofall{
  0%{
    opacity: 0;
    top: -100%;
  }
  10%{
    opacity: 0.5;
  }
  100%{
    opacity: 1;
    bottom: 0
  }
}
.zero{
   animation: zerofall 0.3s 1 forwards ease-in;
   animation-delay: 9s;
}

@keyframes robotsmashed{
  from{
    transform: scaleY(1);
  }
  to{
    transform: scaleY(0.1) translateY(450%);
  }
}

.robot svg{
  animation: robotsmashed 0.3s 1 forwards ease-in;
  animation-delay: 9.1s;
}

/* ============== Home link: =============== */

@keyframes homeappear{
  from{opacity:0}
  to{opacity: 1}
}
.home{
  animation: homeappear 0.3s 1 forwards ease-in;
  animation-delay: 9.1s;
}

@media (min-width: 320px) and (max-width: 400px){
  .zero{
    font-size:10em;
  }
  .four{
    font-size:10em;
  }
}
@media (min-width: 401px) and (max-width: 600px){
  .zero{
    font-size:14em;
  }
  .four{
    font-size:14em;
  }
}