:root {
--main-bg-color:  black;
}
/* COLORES  */


@font-face {
  font-family:'Px437_Siemens_PC-D';
  src: url(Px437_Siemens_PC-D.ttf);
}

body {
color:var(--main-bg-color);
width: 100%;
height: 69vh;
word-break: break-all;
background-color: lightgray;
overflow: hidden;
max-height: 100%;
font-size: 1.5vmax;
}

svg {
  background-color: var(--main-bg-color);

}

@-webkit-keyframes cielo {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes cielo {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes cielo {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

button{
  position:absolute;
  margin-left:94%;
  font-family:'Px437_Siemens_PC-D';
  margin-top:94%;
font-size: 1vw;
}
.contenedor {
top:6%;
left:10%;
align-self: center;
margin-left: 10%;
margin-right: 10%;
  padding: 1vmax;
  margin:auto;
  background-color: #d7d7d7;
  position: absolute;
display: grid;
  width:80vw;
  height:80vh;
  border: 5px outset  #c5c5c5;
  grid-gap: 6vw;
  border-style: outset;
  align-items: center;
  box-sizing: content-box;
}
#gradi {

}
#MyRectangle{

}

#gradiente {


position: fixed;
  margin:5vmax;
  width:55vw;
  height:72vh;
  border-style: outset;
  border: 5px outset #c5c5c5;

}
.obvio {

}

.paleta {

  padding:1vmax;
  margin-left: 66vw;
position: relative;
box-sizing: content-box;
  border: 4px outset #c5c5c5;
  width:fit-content;
  max-width: 13vw;
  height: fit-content;
  max-height: 66vh;
background-color: #cecece;


display: grid;
grid-template-columns: 1fr 1fr; /* Dos columnas de igual tamaño */
grid-column-gap:2px; /* Espacio entre columnas */
}

.column {
display: flex;
flex-direction: column;
}


.child-color{

  margin:.5vmax;
  margin-left: .5vmax;
display: block;
  border: 3px 3px red  outset;
  vertical-align: middle;
font-size: 1.3vmax;
font-family:'Px437_Siemens_PC-D';
box-sizing: content-box;
border:3px inset #c5c5c5;




  width:2.3vmax;
  height:2.3vmax;

}

.child-color-info{
  font-size: 1vh;
  color:black;

  font-family:'Px437_Siemens_PC-D';
}