*{
    padding:0;
    margin: 0;
    box-sizing:border-box ;
}

body{
    width: 100%;
    height:100vh;
    background-color:  #0F2546;
}
#logo{

    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
 
}

#logo path:nth-child(1){
    stroke-dasharray: 508;
    stroke-dashoffset: 508;
  animation: line-anim 2s ease forwards;
}
#logo path:nth-child(2){
    stroke-dasharray: 508;
    stroke-dashoffset: 508;
    animation: line-anim 2s ease forwards;
 
}
#logo path:nth-child(3){
    stroke-dasharray: 435;
    stroke-dashoffset: 435;
    animation: line-anim 2s ease forwards 0.3s;
}
#logo path:nth-child(4){
    stroke-dasharray: 393;
    stroke-dashoffset: 393;
    animation: line-anim 2s ease forwards 0.3s;

}
#logo path:nth-child(5){
    stroke-dasharray: 201;
    stroke-dashoffset: 201;
    animation: line-anim 2s ease forwards 0.6s;


}
#logo path:nth-child(6){
    stroke-dasharray: 508;
    stroke-dashoffset: 508;
    animation: line-anim 2s ease forwards 0.2s;

}
#logo path:nth-child(7){
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    animation: line-anim 2s ease forwards 0.2s;

}
#logo path:nth-child(8){
    stroke-dasharray: 413;
    stroke-dashoffset: 413;
    animation: line-anim 2s ease forwards 1.2s;

}
#logo path:nth-child(9){
    stroke-dasharray: 488;
    stroke-dashoffset: 488;
    animation: line-anim 2s ease forwards 1.2s

}
#logo path:nth-child(10){
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    animation: line-anim 2s ease forwards 0.7s;

}
#logo path:nth-child(11){

     stroke-dasharray: 202;
    stroke-dashoffset: 202;
    animation: line-anim 2s ease forwards 0.4s;
}
#logo path:nth-child(12){

    stroke-dasharray: 538;
   stroke-dashoffset: 538;
   animation: line-anim 2s ease forwards 1.9s;
}
@keyframes line-anim{
    to{
        stroke-dashoffset: 0; 
    }
}