header{
    --padding-block: 1rem;
    --padding-inline: 2rem;
    position: fixed;
        height: fit-content;
        width: calc(100svw - 2 * var(--padding-inline));
        padding: var(--padding-block) var(--padding-inline);

    display: flex;
        justify-content: space-between;
        align-items: baseline;

    color: white;
}
header h1{
    margin: 0;
}
header h1::before{
    content: "Les P'tites Vacances";
}
header label{
    z-index: 1000;
    display: none;
}
header nav a{
    margin-inline: 1rem;
}

header{
    @media screen and (width <= 425px) {
        align-items: center;

        h1::before{
            content: "LPV";
        }
        label{
            display: block;
        }
        nav{
            display: none;
            position: absolute;
                top: 0;
                left: 0;
                height: fit-content;
                width: calc(100svw - 2 * var(--padding-inline));
                padding: var(--padding-block) var(--padding-inline);
            text-align: center;
            backdrop-filter: blur(1rem);
            a{
                margin-block: 0.5rem;
            }
        }
        input:checked + nav{
            display: flex;
            flex-direction: column;
        }
    }
}