main{
    overflow: hidden;
}

canvas{
    min-height: 4000px;
}

main iframe{
    display: block;
    width: 63%;

    margin: auto;
}

main div#description{
  max-width: 50%;
  margin: auto;
  display: flex;
  justify-content: center;
  font-size: 1.4rem;
  text-align:justify;
}


main h2{
    margin-top: 0;
    padding-top: 20px;
}


main img{
    height: auto;
    width: 40%;
    margin: auto;
    display: block;
}

main a#site img{
    height: auto;
    width: 40%;
}

#projet_contain{
    width: 40%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    padding-left: 4.5%;
    padding-top: 2.6%;
    padding-bottom: 1.3%;
    background-color: #2a2b2b;
    margin-top: 130px;
    margin-bottom: 130px;
}

#projet_contain img{
    position: absolute;
    top:0;
    bottom: 0;
    left:0;
    right:0;
    width: 100%;
    height: auto;
    pointer-events: none;
}

.cube1 {
  perspective: 1000px;
  /* The perspective property defines how far the object is from the viewer */
  /* A smaller value creates a more intense 3D effect */
}

/* Cube container styles */
.cube {
  width: 200px;
  height:30px;
  position: relative;
  transform-style: preserve-3d;
  /* This tells the browser that child elements should be positioned in 3D space */
}

/* Common styles for all faces */
.face {
  position: absolute;
  width: 60px;
  height: 60px;
  border: 2px solid #b177fd;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  font-weight: bold;
  color: white;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
  background: linear-gradient(120deg,#b1abf4, 20%,#ebcbe7, 80% ,#fea680);
}

.front { 
  transform: translateZ(30px);
  /* Moves the front face 100px towards the viewer */
}

.back { 
  transform: rotateY(180deg) translateZ(30px);
  /* Rotates 180° around Y-axis and moves 100px forward */
}

.right {
  transform: rotateY(90deg) translateZ(30px);
  /* Rotates 90° right around Y-axis and moves 100px forward */
}

.left {
  transform: rotateY(-90deg) translateZ(30px);
  /* Rotates 90° left around Y-axis and moves 100px forward */
}

.top {
  transform: rotateX(90deg) translateZ(30px);
  /* Rotates 90° upward around X-axis and moves 100px forward */
}

.bottom {
  transform: rotateX(-90deg) translateZ(30px);
  /* Rotates 90° downward around X-axis and moves 100px forward */
}

@keyframes rotate {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
  }
  25% {
    transform: rotateX(10deg) rotateY(90deg);
  }
  50% {
    transform: rotateX(0deg) rotateY(180deg);
  }
  75% {
    transform: rotateX(10deg) rotateY(270deg);
  }
  100% {
    transform: rotateX(0deg) rotateY(360deg);
  }
}

/* Apply the animation to the cube */
.cube {
  width: 100px;
  position: relative;
  transform-style: preserve-3d;
  animation: rotate 10s infinite linear;
  
  /* 20s defines the duration of one complete rotation */
  /* infinite means the animation will repeat forever */
  /* linear means the animation speed is constant */
}

.cube:hover{
    animation: rotate 2s infinite linear;
    
}

#cubes{
    display: flex;
    flex-wrap: wrap;
    justify-items: center;
    gap: 50px 0;
    padding-left: 60px;
    padding-right: 60px;
    justify-content: center;
}

#cubes img{
    width:80%;
    height:auto;
}

#invisible{
    display: none;
}

.hide{
    display: none;
}

#bloqué{
    text-align: center;
}