*{
user-select: none;
    -webkit-user-select: none;
}
#body{
  height: 100dvh;
  width: 100dvw;
  margin: 0%;
  background-color: rgb(201, 201, 201);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
#screen{
  width: clamp(500px,80%,600px);
  height: clamp(400px,80%,600px);

  perspective: 1700px;
  display: flex;
  justify-content: center;
  align-items: center;

  margin-top: 50px;
}
#cuadrado{
transform-style: preserve-3d;
width: clamp(400px,80%,500px);
height: clamp(400px,80%,500px);
position: relative;
display: flex;
justify-content: center;
align-items: center;
transform: rotateX(var(--girarX)) rotateY(var(--girarY));
transition: opacity 0.5s linear;
position: absolute;
}
/* Cuadrado */

.cara{
  position: absolute;
  width: 300px;
  height: 300px;
  box-sizing: border-box;


}
.caraArribaC{ transform: rotateX(90deg) translateZ(150px); background-color: rgba(0, 0, 255, 0.3);}
.caraAbajoC{ transform: rotateX(-90deg) translateZ(150px);
background-color: rgba(0, 128, 0, 0.3);}
.caraIzqC{ transform: rotateY(-90deg) translateZ(150px);
background-color: rgba(255, 255, 0, 0.3)}
.caraDereC{ transform: rotateY(90deg) translateZ(150px); 
background-color: rgba(255, 0, 0, 0.3);}
.caraAtrasC{ transform: rotateY(180deg) translateZ(150px);
background-color: rgba(255, 192, 203, 0.3);}
.caraFrenteC{ transform: rotateX(0deg) translateZ(150px);
background-color: rgba(165, 42, 42, 0.3);}

/* Cuadrado */


/* Triangulo */

#triangulo{
transform-style: preserve-3d;
width: clamp(400px,80%,500px);
height: clamp(400px,80%,500px);
position: relative;
display: flex;
justify-content: center;
align-items: center;
transform: rotateX(var(--girarX)) rotateY(var(--girarY)) ;
transition: opacity 0.5s linear;
position: absolute;
opacity: 0;



}


.caraAbajoT{ 
height: 100px;
transform: rotateX(-90deg) translateZ(150px);
background-color: rgba(0, 128, 0, 0.3);}

.caraIzqT{
   width: 100px;
   height: 335px;
   transform: rotateY(270deg)  translateZ(76px) rotateX(27deg)  ;
background-color: rgba(255, 255, 0, 0.3)}

.caraDereT{
  width: 100px;
   height: 335px;
   transform: rotateY(-270deg)  translateZ(76px) rotateX(27deg); 
background-color: rgba(255, 0, 0, 0.3);}

.caraAtrasT{ 
      transform: rotateY(180deg) translateZ(48px);
  clip-path: polygon(0% 100% , 50% 0% ,100% 100%);
background-color: rgba(244, 7, 47, 0.13);} 

.caraFrenteT{  
  transform: rotate(0deg) translateZ(48px);
  clip-path: polygon(0% 100% , 50% 0% ,100% 100%);
background-color: rgba(165, 42, 42, 0.3);}



/* Triangulo */





:root{
  --girarX:0deg;
  --girarY:0deg;
}

#ejeX , #ejeY{
position: absolute;
top: 50%;
right: 50px;
 user-select: none;
  -moz-user-select: none;
  margin: 0%;
  padding: 10px 0px;
  z-index: 100;
  cursor: pointer;
  

}
#ejeX{
 top: 50%;
right: 5vw; 
transform:  translateX(50%) rotateZ(-90deg);
}
#ejeY{
  top:  4vh;
  right: 50%;
  transform:  translateX(50%) ;
}
#cuboBtn{

position: absolute;
top: 30%;
left: 10px;
padding: 6px;
z-index: 100;
background-color: rgba(128, 128, 128, 0.422);
border-radius: 10px;
cursor: pointer;
}
#trianguloBtn{
position: absolute;
top: 42%;
left: 10px;
padding: 5px;
z-index: 100;
background-color: rgba(128, 128, 128, 0.422);
border-radius: 10px;
cursor: pointer;
}
#cuboBtn > div{
width: 20px;
height: 20px;
background-color: aqua;
border: 2px solid #000;
}
#trianguloBtn > div{
  width: 25px;
  height: 25px;
  background-color: rgb(0, 0, 0);
  display: flex;
  justify-content: center;
  align-items: center;

  
  clip-path: polygon(0% 100% , 50% 0% , 100% 100%);
  position: relative;
  
}
#trianguloBtn > div > div{
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: aqua;
  top: 50%;
 left: 50%;
 transform: translate( -50% ,-45%);
  
  clip-path: polygon(0% 100% , 50% 0% , 100% 100%);
  
}