@import url('https://fonts.googleapis.com/css2?family=Afacad:ital,wght@0,400..700;1,400..700&family=Karla:ital,wght@0,200..800;1,200..800&display=swap');
/* Pour les petits écrans (mobiles) */
@media{
    #header {
        font-family: 'Afacad', sans-serif;
        font-weight: 500;
        font-size: 20px;
        position: fixed;
        z-index: 1000;
        background-color: rgba(255, 255, 255, 0.83);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    #header .toggle {
        display: block;
    }

    #hamburger {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 50px;
        height: 35px;
        cursor: pointer;
    }

    #hamburger span {
        display: block;
        height: 4px;
        width: 100%;
        background-color: #090909;
        border-radius: 2px;
    }

    #nav.active{
        display: flex !important;
        flex-direction: column;
        margin: 5px;
        border-top: grey;
        border-bottom: grey;
    }

    .prenom{
        display: flex;
        align-content: center;
        font-size: 25px;
        color: #1D3458;
    }
    #nav a{
        text-decoration: none;
        color: black;
    }

    #nav a:hover{
        color: #4f6a93;
    }
}

/* Pour les écrans moyens (tablettes) */
@media (min-width: 601px) and (max-width: 1024px) {
    #header {
        font-family: 'Afacad', sans-serif;
        font-weight: 500;
        font-size: 20px;
    }

    #header .toggle {
        display: none;
    }
    .prenom{
        display: flex;
        align-content: center;
        font-size: 40px;
        color: #1D3458;
    }
    #nav a{
        text-decoration: none;
        color: black;
    }
}

/* Pour les grands écrans (desktop) */
@media (min-width: 1025px) {
    #header {
        font-family: 'Afacad', sans-serif;
        font-weight: 500;
        font-size: 22px;
    }

    #header .toggle {
        display: none;
    }
    .prenom{
        display: flex;
        align-content: center;
        font-size: 40px;
        color: #1D3458;
    }
    #nav a{
        text-decoration: none;
        color: black;
    }
}