body{
  width: 100vw;
  height: 100vh;
  padding: 0%;
  margin: 0%;
  overflow: hidden;
background-color: antiquewhite;
display: flex;
align-items: center;
justify-content: space-evenly;
flex-direction: column;

}
#padre{
width: 90vw;
height: 80vh;
background-color: aquamarine;
margin: auto;

display: grid;
user-select: none;

border: 3px solid ;


  grid-template-columns:repeat(var(--horizontal),1fr) ;
  grid-template-rows: repeat(var(--vertical),1fr);
 

   
padding: 10px;
overflow: hidden;  

}  
#padre h1{
  position: absolute;
  font-size: 6vw;
  top: 30%;
  left: 15%;
  z-index: 0;
  
}
.clase{

background-color: rgb(255, 255, 255);
z-index: 1;




}

#padreC{
  width: 90vw;
  height: 10vh;
  display: flex;
  justify-content:space-evenly;
  align-items: center;
  background-color: rgb(0, 255, 255);
  border: 2px solid ;
  margin-bottom: 10px;
  border-radius: 20px;


}
label{
  width: clamp(200px,10vw,300px);
  height: max-content;

  font-size: 20px;
  justify-content: space-evenly;
  align-items: center;

}
#pixeles{
  width: 30%;
  padding: 2px 3px;
  
}

:root{

 --horizontal:100;
 --vertical:100;

}