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

body{
    width: 100%;
    height: 100vh;
    background-color: #2A231C;
}

#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:569;
    stroke-dashoffset:569;
    animation: line-anim 2s ease forwards;
}
#logo path:nth-child(2){
    stroke-dasharray:517;
    stroke-dashoffset:517;
    animation: line-anim 2s ease forwards 0.3s;
}
#logo path:nth-child(3){
    stroke-dasharray:619;
    stroke-dashoffset:619;
    animation: line-anim 2s ease forwards 0.6s;
}
#logo path:nth-child(4){
    stroke-dasharray:402;
    stroke-dashoffset:402;
    animation: line-anim 2s ease forwards 0.9s;
}
#logo path:nth-child(5){
    stroke-dasharray:607;
    stroke-dashoffset:607;
    animation: line-anim 2s ease forwards 1.2s;
}
#logo path:nth-child(6){
    stroke-dasharray:781;
    stroke-dashoffset:781;
    animation: line-anim 2s ease forwards 1.5s;
}
#logo path:nth-child(7){
    stroke-dasharray:537;
    stroke-dashoffset:537;
    animation: line-anim 2s ease forwards 1.8s;
}
#logo path:nth-child(8){
    stroke-dasharray:537;
    stroke-dashoffset:537;
    animation: line-anim 2s ease forwards 2.1s;
}
/* real estat */
#logo path:nth-child(9){
    stroke-dasharray:36;
    stroke-dashoffset:36;
    animation: line-anim 2s ease forwards 2.5s;
}
#logo path:nth-child(10){
    stroke-dasharray:57;
    stroke-dashoffset:57;
    animation: line-anim 2s ease forwards 2.5s;
}
#logo path:nth-child(11){
    stroke-dasharray:58;
    stroke-dashoffset:58;
    animation: line-anim 2s ease forwards 2.5s;
}
#logo path:nth-child(12){
    stroke-dasharray:37;
    stroke-dashoffset:37;
    animation: line-anim 2s ease forwards 2.5s;
}
#logo path:nth-child(13){
    stroke-dasharray:57;
    stroke-dashoffset:57;
    animation: line-anim 2s ease forwards 2.5s;
}
#logo path:nth-child(14){
    stroke-dasharray:49;
    stroke-dashoffset:49;
    animation: line-anim 2s ease forwards 2.5s;
}
#logo path:nth-child(15){
    stroke-dasharray:46;
    stroke-dashoffset:46;
    animation: line-anim 2s ease forwards 2.5s;
}
#logo path:nth-child(16){
    stroke-dasharray:58;
    stroke-dashoffset:58;
    animation: line-anim 2s ease forwards 2.5s;
}
#logo path:nth-child(17){
    stroke-dasharray:46;
    stroke-dashoffset:46;
    animation: line-anim 2s ease forwards 2.5s;
}
#logo path:nth-child(18){
    stroke-dasharray:57;
    stroke-dashoffset:57;
    animation: line-anim 2s ease forwards 2.5s;
}
#logo path:nth-child(19){
    stroke-dasharray:81;
    stroke-dashoffset:81;
    animation: line-anim 2s ease forwards 2.5s;
}
#logo path:nth-child(20){
    stroke-dasharray:57;
    stroke-dashoffset:57;
    animation: line-anim 2s ease forwards 2.5s;
}
#logo path:nth-child(21){
    stroke-dasharray:69;
    stroke-dashoffset:69;
    animation: line-anim 2s ease forwards 2.5s;
}
#logo path:nth-child(22){
    stroke-dasharray:37;
    stroke-dashoffset:37;
    animation: line-anim 2s ease forwards 2.5s;
}
#logo path:nth-child(23){
    stroke-dasharray:58;
    stroke-dashoffset:58;
    animation: line-anim 2s ease forwards 2.5s;
}
@keyframes line-anim{
    to{
        stroke-dashoffset: 0;
    }
}

@keyframes fill{
    from{
    fill:transparent;
    }
    to{
        fill: white;
    }
}