body{
    background-color: rgb(3, 3, 49);
    color: white;
    flex-direction: column;
    font-family: sans-serif;
    margin: 0px;
    padding: 0px;
}

a{
    text-decoration: none;
}

ul{
    list-style: none;
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 0px;
    margin: 0px;
}

#links{
    border-top: 2px solid white;
    padding: 5px 2px;
}


@media(max-width: 768px){
    .header{
        flex-wrap: wrap;
    }
    nav{
        order: 1;
    }
    .ul-header{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }
    
}
span::after{
    content: "OK";
    color: greenyellow;
}

/* ======================= header ====================== */
header{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.header{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    margin: 20px auto;
    width: 1280px;
}

/* ======================= main ====================== */
main{
    max-width: 1280px;
    margin: auto;
}
.ul-links{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

section{
    border: 1px solid lightblue;
    margin: 5px;
    border-radius: 10px;
    padding: 10px;
}

/* ======================= footer ====================== */

footer{
    display: flex;
    align-items: center;
    justify-content: center;
}