body{
    margin: 0px;
}

#menu{
    height: 100vh;
    display: flex;
    align-items: center;
}

.menu-links{
    color: var(--mywhite);
    font-size: clamp(3rem, 8vw, 8rem);
    font-family: var(--TitleFont);

    display: block;
    text-decoration: none;
    padding: clamp(0.25rem, 0.5vw, 1rem) 0rem;
    transition: opacity 400ms ease;
}

.menu-choix{
    margin-left: clamp(4rem, 20vw, 48rem);
    position: relative;
    z-index: 2;
}

.menu-choix:hover > .menu-links{
    opacity: 0.3;
}

.menu-choix:hover > .menu-links:hover{
    opacity: 1;
}

#background-pattern{
    height: 100vh;
    width: 100vw;

    background-image: linear-gradient(
        45deg, transparent 49%, #525252 49% 51%, transparent 51%
    ), linear-gradient(45deg, transparent 49%, #525252 49% 51%, transparent 51%) , linear-gradient(-45deg, transparent 49%, #525252 49% 51%, transparent 51%);

    background-position: 0% 0%;
    background-size: 12vmin 12vmin;

    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 1;

    transition: opacity 800ms ease,
    background-size 800ms ease,
    background-position 800ms ease;
}

.menu-choix:hover ~ #background-pattern{
    background-size: 11vmin 11vmin;
    opacity: 0,5;
}

#menu[data-active-index="0"] > #background-pattern{
    background-position: 0% -33.3%;
}

#menu[data-active-index="1"] > #background-pattern{
    background-position: 0% -66.6%;
}

#menu[data-active-index="2"] > #background-pattern{
    background-position: 0% -100%;
}

#carre{
    height: 18vw;
    width: 18vw;

    background-color: var(--myblue);

    position: absolute;
    left: 60%;
    top: 33%;
    z-index: 3;
    transform: rotate(45deg);

    background-position: center 40%;
    background-size: 110vmax;
    opacity: 0.20;

    transition: opacity 800ms ease,
    background-size 800ms ease,
    background-position 800ms ease,
    background-image 200ms ease,
    top 800ms ease,
    left 800ms ease,
    width 800ms ease,
    height 800ms ease;

    border: solid rgba(2255, 255, 255) 5px;
}

.menu-choix:hover ~ #carre{
    height: 20vw;
    width: 20vw;
    opacity: 1;
}

/* #background-image{
    height: 100%;
    width: 100%;

    background-image: url('../Image/LastFragment.png');

    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 0;

    background-position: center 40%;
    background-size: 110vmax;
    opacity: 0.15;

    transition: opacity 800ms ease,
    background-size 800ms ease,
    background-position 800ms ease;
}

#menu[data-active-index="0"] > #background-image{
    background-position: center 45%;
}

#menu[data-active-index="1"] > #background-image{
    background-position: center 52%;
}

#menu[data-active-index="2"] > #background-image{
    background-position: center 60%;
}


.menu-choix:hover ~ #background-image{
    background-size: 100vmax;
    opacity: 0.10;
}
*/

#menu[data-active-index="0"] > #carre{
    top: 35%;
    left: 59%;
}

#menu[data-active-index="1"] > #carre{
    top: 37%;
    left: 58%;
}

#menu[data-active-index="2"] > #carre{
    top: 39%;
    left: 57.5%;
}



#text-descriptif{
    position: absolute;
    width: 20vw;
    height: 20vh;
    background-color: var(--myblack);
    opacity: 0;
    left: 65%;
    top: 60%;
    z-index: 4;
    font-size: 2em;

    padding: 1vh 1vw;

    transition: opacity 800ms ease,
    top 800ms ease,
    left 800ms ease,
    width 800ms ease,
    height 800ms ease;
}

#text-descriptif > p{
    color: var(--mywhite);
    font-family: 'Times New Roman', Times, serif;
    font-weight: bold;
}

#menu[data-active-index="0"] > #text-descriptif{
    top: 61%;
    left: 64%;
}

#menu[data-active-index="1"] > #text-descriptif{
    top: 64%;
    left: 62%;
}

#menu[data-active-index="2"] > #text-descriptif{
    top: 67%;
    left: 60%;
}

.menu-choix:hover ~ #text-descriptif{
    height: 23vh;
    width: 23vw;
    opacity: 0.80;
}

#fill-img{
    object-fit: cover;
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    
}

@media screen and (max-width: 500px) {
    #carre{
        position: absolute;
        text-align: center;
        top: 70%;
        width: 25vw;
        height: 25vw;
        }


    #menu[data-active-index="0"] > #carre{
        top: 65%;
        left: 59%;
    }
    
    #menu[data-active-index="1"] > #carre{
        top: 67%;
        left: 58%;
    }
    
    #menu[data-active-index="2"] > #carre{
        top: 69%;
        left: 57.5%;
    }

    #text-descriptif{
        display: none;
    }

}