body
{
    overflow-x: hidden;
    will-change: contents;
    font-size: 1em;
    height: 501vh;
}

@media screen and (max-width: 1200px)  {

    body {
        font-size: 0.9em;
    }

    #exemple_Config_Multi{
        font-size: 0.85em;

    }
    
}

@media screen and (max-width: 1100px)  {

    body {
        font-size: 0.85em;
    }    
}

@media screen and (max-width: 1000px)  {

    body {
        font-size: 0.8em;
    }    

    #exemple_Config_Multi{
        font-size: 0.85em;

    }
    
}

@media screen and (max-width: 900px)  { 
    body{
        font-size: 0.75em;
    }    
}

@media screen and (max-width: 830px)  { 
    body{
        font-size: 0.72em;
    }    
}

@media screen and (max-width: 800px)  { 
    body{
        font-size: 0.69em;
    }    
}

/* @media screen and (max-width: 780px)  { 
    body{
        font-size: 0.7em;
    }

    
}
 */
@media screen and (max-width: 750px)  { /* changement de page */
    
}


*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.parent {
    height: 12vh;
    top: 15vh;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    overflow: hidden;
    border: none;
    z-index: 12;
    color: rgb(255, 255, 255);
}

.enfant {
    height: inherit;
    flex: 1;
    font-size: 3.5em;
    font-weight: normal;
    font-family: serif;
    position: relative;
    border: none;
    color: white;
    background: transparent;
    transition: transform ease-out .25s;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* .parentHeader {
    position: sticky;
    top: 0;
    display: flex;
    justify-content: space-around;
    width: 100%;
    height: 5vh;
    z-index: 10;
    backdrop-filter: blur(2px);
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.6);

}


.enfantHeader {
    flex: 1;
    display: flex;
    flex-direction: column;

}


.enfantTexte {
    width: 100%;
    flex: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background ease-out .3s;
    color: #ffffff;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.enfantTexteEffect
{
    background-color: rgba(255, 255, 255, 0.6);
}



.enfantBordure {
    transition: transform linear .2s;
    flex: 1;
    background-color: rgba(255, 255, 255, 0.6);
    width: 100%;
    transform: scale(0);
    transform-origin: -50%;

}
 */




#docBackground
{
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    top: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(249deg, rgba(166,81,247,1) 0%, rgba(127,53,242,1) 25%, rgba(119,50,230,1) 25%, rgba(71,19,213,1) 50%, rgba(88,34,238,1) 50%, rgba(57,33,123,1) 75%, rgb(75, 51, 143) 75%, rgba(32,32,32,1) 100%);
    color:#ffffff;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.blockBackground
{
    position: absolute;
    width: 10vh;
    height: 10vh;
    background-color: rgba(240, 248, 255, 1);
    border-radius: 50%;

}

#blockBackground
{
/*     transform: translateY(5vh);
 */    transition: transform .7s ease-out;
}

#blockBackground2
{
/*     transform: translateY(-5vh);
 */    transition: transform .7s ease-out;
}

/* CUBE */

#contentCube1
{
    perspective: 4000px;
    transform-style: preserve-3d;
    color: #ffffff;
}

.arreteWidthLongueFace1
{
    width: 80vw;
}



.frontFace1 {
    transform: translate(-50%, -50%) translateZ(40vw);

}

.backFace1 {
    transform: translate(-50%, -50%) rotateY(180deg) translateZ(40vw);
}
    
.topFace1 {
    transform: translate(-50%, -50%) rotateX(90deg) translateZ(35vh);
}

.leftFace1 {
    transform: translate(-50%, -50%) rotateY(-90deg) translateZ(40vw);
}

.rightFace1 {
    transform: translate(-50%, -50%) rotateY(90deg) translateZ(40vw);
}

.bottomFace1 {
    transform: translate(-50%, -50%) rotateX(-90deg) translateZ(35vh);
}