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

body {
    width: 100%;
    height: 100vh;
    background-color: rgb(32, 35, 48);
}

#logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: fill 0.5s ease forwards 3s;
}

#logo path:nth-child(1) {
    stroke-dasharray: 610.231;
    stroke-dashoffset: 610.231;
    animation: line-anim 2s ease forwards;
}
#logo path:nth-child(2) {
    stroke-dasharray: 463.968;
    stroke-dashoffset: 463.968;
    animation: line-anim 2s ease forwards 0.3s;    
}
#logo path:nth-child(3) {
    stroke-dasharray: 515.263;
    stroke-dashoffset: 515.263;
    animation: line-anim 2s ease forwards 0.6s;    
}
#logo path:nth-child(4) {
    stroke-dasharray: 463.967;
    stroke-dashoffset: 463.967;
    animation: line-anim 2s ease forwards 0.9s;    
}
#logo path:nth-child(5) {
    stroke-dasharray: 610.232;
    stroke-dashoffset: 610.232;
    animation: line-anim 2s ease forwards 1.2s;
}
#logo path:nth-child(6) {
    stroke-dasharray: 364.699;
    stroke-dashoffset: 364.699;
    animation: line-anim 2s ease forwards 1.5s;    
}

@keyframes line-anim {
    to {
        stroke-dasharray: 0;
    }
}
@keyframes fill{
    from{
        fill: transparent;
    }
    to{
        fill: orange;
    }
}