body {
            background-color: #fefaec;
            margin: auto;
            font-family: 'Ubuntu', sans-serif;
        }
    button{
        color: #633535;
        text-align: center;
        font-size: medium;
        border-radius: 10%;
        position: absolute;
        bottom: 50%;
    }
    
   .nds {
    position: fixed;
    bottom: 0;
    right: 0;
    border-radius: 10%;
    z-index: 100;
    backdrop-filter: blur(1px);
    background-color: rgba(255, 255, 255, 0.5); 
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    box-shadow: 0 48px 60px -24px rgba(223, 221, 221, 0.4);
}

    .button-container {
    position: fixed;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    
}
.animation-controls {
    position: fixed; 
    top: 0px; 
    right: 0px
}




.button {
    color: #000000;
    font-family: 'Ubuntu', sans-serif;
    text-align: center;
    font-size: medium;
    border-radius: 10%;
    padding: 25px 25px;
    text-decoration: rgb(0, 255, 76);
    background-color: #008cff75; 
    border-radius: 10%;
}


.wrap {
    margin-top: 200px;
    perspective: 1000px;
    perspective-origin: 50% 50%;
    align-items: start;
}

@media only screen and (max-width: 600px) {
    .wrap {
        margin-top: 100px; /* Ajuste selon tes besoins pour les écrans étroits */
    }
}

.cube {
    margin: auto;
    position: relative;
    height: 200px;
    width: 200px;
    transform-style: preserve-3d;
}

.cube div {
    position: absolute;
    padding: 10px;
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    opacity: 0.45;
    background-color: #00000069;
    border: solid 1px #81c1f6;
    color: #df1818;
    font: 12px verdana;
    text-align: center;
    transition: transform 0.25s ease-in;
}

.cube div:hover {
    background-color: rgb(0, 115, 255);
}

.front {
    transform: translateZ(100px);
}
.back {
    transform: translateZ(-100px) rotateY(180deg);
}
.right {
    transform: rotateY(-270deg) translateX(100px);
    transform-origin: top right;
}
.left {
    transform: rotatey(270deg) translateX(-100px);
    transform-origin: center left;
}
.top {
    transform: rotateX(-270deg) translateY(-100px);
    transform-origin: top center;
}
.bottom {
    transform: rotateX(270deg) translateY(100px);
    transform-origin: bottom center;
}
.cube {
    animation: rotate2 20s infinite linear;
}

@keyframes rotate2 {
    from {
        transform: rotateX(0deg) rotateY(0deg);
    }
    to {
        transform: rotateX(360deg) rotateY(360deg);
    }
}

.wrap:hover .front {
    transform: translateZ(200px);
}
.wrap:hover .back {
    transform: translateZ(-200px) rotateY(180deg);
}
.wrap:hover .right {
    transform: rotateY(-270deg) translateZ(100px) translateX(100px);
}
.wrap:hover .left {
    transform: rotateY(270deg) translateZ(100px) translateX(-100px);
}
.wrap:hover .top {
    transform: rotateX(-270deg) translateZ(100px) translateY(-100px);
}
.wrap:hover .bottom {
    transform: rotateX(270deg) translateZ(100px) translateY(100px);
}


    *,
    *:after,
    *:before {
        box-sizing: border-box;
    }
    
    :root {
      --x: 0;
      --y: 0;
      --xp: 0;
      --yp: 0;
        --hue: calc(0 + (var(--xp) * 500));
        --bg: hsl(0 0% 10%);
        --size: 100px;
        --glow: radial-gradient(
                50% 50% at center,
                hsl(var(--hue) 80% 85%),
                hsl(var(--hue) 80% 70%),
                transparent
            )
            calc((var(--x) * 1px) - (var(--size) * 0.5))
            calc((var(--y) * 1px) - (var(--size) * 0.5)) / var(--size) var(--size) no-repeat fixed;
    }
    
    .controls {
      position: fixed;
      top: 2rem;
      right: 2rem;
    }

    
    button {
        border-radius: 1rem;
        text-transform: uppercase;
        font-weight: bold;
        letter-spacing: 0.1ch;
        background: var(--bg);
        border: 4px solid transparent;
        box-shadow: 0 1px hsl(0 0% 100% / 0.15) inset;
        cursor: pointer;
        background:
            linear-gradient(var(--bg), var(--bg)) padding-box,
            var(--glow),
            linear-gradient(black, black) border-box;
        transition: background-size 0.24s;
      touch-action: none;
      position: relative;
        padding: 1rem 2rem;
    }
    
    button::before {
      content: "";
      position: absolute;
      inset: 0;
      box-shadow: 0 1px hsl(0 0% 100% / 0.15) inset;
      background: rgba(255, 255, 255, 0);
      z-index: 2;
    /*   border: 4px solid transparent; */
      border-radius: 1rem;
    }
    
    button span {
        background: var(--glow), black;
        background-clip: text;
        color: transparent;
      height: 100%;
      width: 100%;
      z-index: 2;
      position: relative;
      inset: 0;
    }
    
    :root:has(button:active) {
        --size: 300px;
    }
    
    button::after {
      content: "";
      position: absolute;
      inset: -4px;
      filter: blur(20px);
      border: 4px solid transparent;
      background: var(--glow);
      border-radius: 1rem;
    }
    
    button {
        color: #ffffff;
    }
    .redcircle {
        position: absolute;
        top: 65%;
        left: 80%;
        width: 240px;
        height: 240px;
        background-color: rgb(91, 94, 188);
        display: block;
        z-index: -100000;
        border-radius: 10000px;
      }
      .redcircle1 {
        position: absolute;
        top: 54%;
        left: 8%;
        width: 240px;
        height: 240px;
        background-color: rgb(103, 189, 62);
        display: block;
        z-index: -100000;
        border-radius: 10000px;
      }
      
      .redcircle2 {
        position: absolute;
        top: 74%;
        left: 45%;
        width: 240px;
        height: 240px;
        background-color: #ffd831;
        display: block;
        z-index: -100000;
        border-radius: 10000px;
      }