body {
    background: #1b1b1b;
    font-family: monospace;
    overflow-y: scroll;
    overflow-x: hidden;
    color: lightgreen;
}

h1 {
    text-align: center;
    font-family: 'IM Fell English SC', serif ;
    letter-spacing: 0.1em;
    font-size: 3em;
}

h2 {
    text-align : center;
  font-family: 'Press Start 2P', monospace;
  font-size: 1em;
}

/*carousel*/
.scene {
    width: 100vw;
    height: 50vh;
    perspective: 1000px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel {
    position: relative;
    width: 100%;
    height: 300px;
}

.char {
    position: absolute;
    width: 100px ;
    top: 50%;
    left: 50%;
    transform-origin: center;
    transition: transform 0.5s ease, opacity 0.5s ease;
    image-rendering: pixelated;
}

.left {
    transform: translate(-220px, -50%) scale(0.75) rotateY(30deg);
    opacity: 0.6;
    z-index: 1;
}

.center {
    transform: translate(-50%,-25%) scale(1.2) rotateY(0deg);
    opacity: 1;
    z-index: 3;
}

.right {
    transform: translate(120px, -50%) scale(0.75) rotateY(-30deg);
    opacity: 0.8;
    z-index: 1;
}

.back {
    transform: translate(-50%, -50%) scale(0.4) rotateY(180deg);
    opacity: 0;
    z-index: 0;
}

#hand{
    display :block;
    position: relative ;
    width: 400px ;
    height :150px ;
    margin : 0 auto; 
    z-index :-1;
    transform : translateY(-150px );
}

/* fiche perso */

#textType, #pansement, #gyneco, #perso {
    display: grid;
    align-items: center;
    grid-template-columns: 102px 200px 77px;
    position: absolute;
    bottom: 0;

    background-color: #7a7a7a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Crect width='4' height='4' x='0' y='0' fill='%236f6f6f'/%3E%3Crect width='4' height='4' x='4' y='0' fill='%23777777'/%3E%3Crect width='4' height='4' x='8' y='0' fill='%23888888'/%3E%3Crect width='4' height='4' x='12' y='0' fill='%237a7a7a'/%3E%3Crect width='4' height='4' x='0' y='4' fill='%23888888'/%3E%3Crect width='4' height='4' x='4' y='4' fill='%236f6f6f'/%3E%3Crect width='4' height='4' x='8' y='4' fill='%237a7a7a'/%3E%3Crect width='4' height='4' x='12' y='4' fill='%23777777'/%3E%3Crect width='4' height='4' x='0' y='8' fill='%23777777'/%3E%3Crect width='4' height='4' x='4' y='8' fill='%23888888'/%3E%3Crect width='4' height='4' x='8' y='8' fill='%236f6f6f'/%3E%3Crect width='4' height='4' x='12' y='8' fill='%237a7a7a'/%3E%3Crect width='4' height='4' x='0' y='12' fill='%237a7a7a'/%3E%3Crect width='4' height='4' x='4' y='12' fill='%23777777'/%3E%3Crect width='4' height='4' x='8' y='12' fill='%23888888'/%3E%3Crect width='4' height='4' x='12' y='12' fill='%236f6f6f'/%3E%3C/svg%3E");

    background-size: 20px 20px;
    image-rendering: pixelated;
box-shadow: rgb(80, 80, 80) 0px 0px 0px 3px, rgb(128, 128, 128) 0px 0px 0px 6px, rgb(180, 180, 180) 0px 0px 0px 9px, rgb(128, 128, 128) 0px 0px 0px 12px, rgb(80, 80, 80) 0px 0px 0px 15px;
    }

.charSelected {
    width: 100px ;
    
}
.descrP {
    margin : 0;
padding : 0 5px 0 8px;
}
.go-sign {
    width: 75px;
} 

.hidden{
    max-height: 0;
    overflow: hidden;
    opacity: 0;
}



/*perso*/

#goValise, #goThe, #goDIUGyn, #goVerifSmur {
    width: 75px;
}
.surcouche{
    position: fixed ;
    inset: 0;
    background: rgba(0,0,0,0.65);
    display:flex;
    align-items :center;
    justify-content: center;
    z-index: 100;
}
.alerte-box{
    width: 300px;
    background: #fff;
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0,0.25);
    font-family: system-ui, Arial, sans-serif;
    text-align: center ;
}

.alerte-box p {
    color: #000000;
}

.alerte-box h3 {
    color: #000000 ;
}

/* Media Queries */
@media (min-width: 1024px) {

    .char {
        width: 180px;
    }

    .charSelected {
        width: 180px;
    }

    #textType,
    #pansement,
    #gyneco,
    #perso {

        grid-template-columns: 190px 1fr 80px;
        width: 700px;  
        
        left: 50%;
        transform: translateX(-50%);
        bottom: 30px;
    }

    .descrP {
        font-size: 1.1em;
        line-height: 1.4;
    }
    
    .left {
        transform: translate(-320px, -50%) scale(0.75) rotateY(30deg);
    }

    .right {
        transform: translate(120px, -50%) scale(0.75) rotateY(-30deg);
    }

    #goValise, #goThe, #goDIUGyn, #goVerifSmur {
    width: 100px;
}


}