*{
    margin: 0;
    padding: 0;
    font-family: 'Nunito', sans-serif;
}

body{
    background-color: #0C027E;
}

.grid{
    margin-top: 10vh;
    display: grid;
    grid-template-columns: 0.5fr 2fr 0.5fr;
    grid-gap: 1rem;
}
.menu{
    grid-column: 2;
    margin: 0 15vw 0 15vw;
    text-align: center;
    font-size: 2rem;
    background-color: #b3d9ff;
    border-radius: 10px;
    animation: fadeIn 7s;
}
li{
    list-style-type: none;
}
a{
    text-decoration: none;
    color: #0C027E;
}

/* the word in svg */
#logo {
    grid-column: 2;
    max-width: 100%;
    animation: fill 0.5s forwards 5.3s;
}
/* the first letter and so on */
#logo path:nth-child(1){
    /* divides the letter in small dots in the size of its value.
     we set the value to the full length of the letter */
    stroke-dasharray: 644px;
    /* changes the position of the strokes.
     we "reset" the letter by setting the value to the full length of pixels */
    stroke-dashoffset: 644px;
    animation: line_anim 2s ease forwards;
}
#logo path:nth-child(2){
    stroke-dasharray: 606px;
    stroke-dashoffset: 606px;
    animation: line_anim 2s ease forwards 0.3s;
}
#logo path:nth-child(3){
    stroke-dasharray: 841px;
    stroke-dashoffset: 841px;
    animation: line_anim 2s ease forwards 0.6s;
}
#logo path:nth-child(4){
    stroke-dasharray: 127px;
    stroke-dashoffset: 127px;
    animation: line_anim 2s ease forwards 0.9s;
}
#logo path:nth-child(5){
    stroke-dasharray: 718px;
    stroke-dashoffset: 718px;
    animation: line_anim 2s ease forwards 1.2s;
}
#logo path:nth-child(6){
    stroke-dasharray: 503px;
    stroke-dashoffset: 503px;
    animation: line_anim 2s ease forwards 1.5s;
}
#logo path:nth-child(7){
    stroke-dasharray: 290px;
    stroke-dashoffset: 290px;
    animation: line_anim 2s ease forwards 1.8s;
}
#logo path:nth-child(8){
    stroke-dasharray: 780px;
    stroke-dashoffset: 780px;
    animation: line_anim 2s ease forwards 2.1s;
}
#logo path:nth-child(9){
    stroke-dasharray: 580px;
    stroke-dashoffset: 580px;
    animation: line_anim 2s ease forwards 2.4s;
}
#logo path:nth-child(10){
    stroke-dasharray: 414px;
    stroke-dashoffset: 414px;
    animation: line_anim 2s ease forwards 2.7s;
}
#logo path:nth-child(11){
    stroke-dasharray: 290px;
    stroke-dashoffset: 290px;
    animation: line_anim 2s ease forwards 3.0s;
}
#logo path:nth-child(12){
    stroke-dasharray: 530px;
    stroke-dashoffset: 530px;
    animation: line_anim 2s ease forwards 3.3s;
}
#logo path:nth-child(13){
    stroke-dasharray: 502px;
    stroke-dashoffset: 502px;
    animation: line_anim 2s ease forwards 3.6s;
}
#logo path:nth-child(14){
    stroke-dasharray: 470px;
    stroke-dashoffset: 470px;
    animation: line_anim 2s ease forwards 3.9s;
}

@keyframes line_anim {
    to{
        stroke-dashoffset: 0;
    }
}
@keyframes fill {
    from{
        fill: transparent;
    }
    to{
        fill: #ffffff;
    }
}
@keyframes fadeIn {
    from{
        opacity: 0;
    }
    75%{
        opacity: 0;
    }
    to{
        opacity: 100%;
    }
}