body {
    font-family: "Metal Gear", serif;
    margin: 0;
    background-image: url(/images/background_secret.png);
    background-repeat: no-repeat;
    background-size: cover; /* ou contain selon ce que tu veux */
    background-attachment: fixed; /* c’est la valeur par défaut */
    background-position: top center;
}

.main {
    top: 11rem;
    display: flex;
    position: relative;
    justify-content: center;
}

/* ----------------Lettre--------------------- */

.lettre {
    left: 0px;
    position: absolute;
    border: none;
    background: none;
}

.lettre {
    cursor: url("/images/loupe.png"),pointer;
}

#overlay {
    position: absolute;
    z-index: 0;
    top: -150px;
    opacity: 0;
    transition: opacity 0.5s ease;
}

#overlay.visible {
    opacity: 1;
    z-index: 25;
}

/* --------------Marie et Maria--------------------- */

.marietomaria {
    position: absolute;
    background: none;
    border: none;
    outline: none;
    box-shadow: none;
    z-index: 10;
}

.marietomaria:hover {
    cursor: url("/images/pillow.png"), pointer;
}

#marie {
    width: 720px;
    opacity: 0.9;
}

#marie.invisible {
    opacity: 0;
}

#maria {
    top: -150px;
    position: absolute;
    opacity: 0;
    transition: opacity 0.5s ease;
}

#maria.visible {
    opacity: 1;
}