body{
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100vh;
    background-color: black;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}.c{
    color: white;
  font-size: 2vh;
      display: flex;
     background:black;
     display: inline;
     transition: 1s;
     animation: cc 5s;
 }
 @keyframes cc{
     from{transform: translateX(500px) rotateZ(60deg) translateY(-500PX);
 
     }
 }
.o{
    color:white;
     font-size: 2vh;
     background:black;
     display: inline;
       display: flex;
     transition: 1s;
     animation: oo 5s;
 }
 @keyframes oo{
     from{transform: translateX(500px) rotateZ(60deg);
 
     }
 }.m{
    color:white;
  font-size: 2vh;
     background:black;
     display: inline;
       display: flex;
     transition: 1s;
     animation: mm 5s;
 }
 @keyframes mm{
     from{transform: translateX(500px) rotateZ(60deg);
 
     }
 }
.e{
    color: white;
   font-size: 2vh;
     background:black;
     display: inline;
       display: flex;
     transition: 1s;
     animation: ee 5s;
 }
 @keyframes ee{
     from{transform: translateX(500px) rotateZ(60deg) translateY(-500px);
 
     }
 }
.l{
    color: white;
    font-size: 2vh;
     background:black;
     display: inline;
       display: flex;
     transition: 1s;
     animation: ll 5s;
 }
 @keyframes ll{
     from{transform: translateX(500px) rotateZ(60deg) translateY(500px);
 
     }
 }
.b{
    color:white;
   font-size: 2vh;
     background:black;
     display: inline;
       display: flex;
     transition: 1s;
     animation: bi 5s;
 }
 @keyframes bi{
     from{transform: translateX(500px) rotateZ(60deg);
 
     }
 }
.box{
   color:white;
    font-size: 2vh;
    background:black;
      display: flex;
    display: inline;
    transition: 1s;
    animation: box 5s;
}
@keyframes box{
    from{transform: translateX(-500px) rotateZ(60deg) translateY(500px);

    }
}