*{
    box-sizing: border-box;
}


body{
  color: rgb(4, 1, 1);
  text-align: center;
  font-weight: bold;  
}
#principal {
    width: 80%;
    margin: auto;
}
.fila{
    display: flex;
    flex-wrap: wrap;
    border: 1px solid wheat;
}
.columna{
   
    padding: 10px 20px ;
    width: 100% ;
    
}

.columna>div {
  background-color: rgb(244, 183, 255);
  border: 2px rgb(35, 243, 8) solid;
  border-radius: 10px;

}

.columna .columna>div{
  background-color: rgb(76, 58, 79);
  color: white;
  border: 2px blue solid;
}

img{
    width: 50%;
}


.horizontal-final{
  justify-content: flex-end;

}
.horizontal-centro{
  justify-content: center;

}
.horizontal-separado{
  justify-content: space-between;
}
.vertical-centrado{
  align-items: center;
}
footer{
  min-height: 300px;
}
/* mobile */
@media screen and (min-width:576px) {
  .movil-doce {
    width: 100%;
  }
  
  .movil-once {
    width: 91.6667%;
  }
  
  .movil-diez {
    width: 83.3333%;
  }
  
  .movil-nueve {
    width: 75%;
  }
  
  .movil-ocho {
    width: 66.6667%;
  }
  
  .movil-siete {
    width: 58.3333%;
  }
  
  .movil-seis {
    width: 50%;
  }
  
  .movil-cinco {
    width: 41.6667%;
  }
  
  .movil-cuatro {
    width: 33.3333%;
  }
  
  .movil-tres {
    width: 25%;
  }
  
  .movil-dos {
    width: 16.6667%;
  }
  
  .movil-uno {
    width: 8.3333%;
  }
  
}
/* tablet vertical*/
@media screen and (min-width:768px) {
  .tablet-v-doce {
    width: 100%;
  }
  
  .tablet-v-once {
    width: 91.6667%;
  }
  
  .tablet-v-diez {
    width: 83.3333%;
  }
  
  .tablet-v-nueve {
    width: 75%;
  }
  
  .tablet-v-ocho {
    width: 66.6667%;
  }
  
  .tablet-v-siete {
    width: 58.3333%;
  }
  
  .tablet-v-seis {
    width: 50%;
  }
  
  .tablet-v-cinco {
    width: 41.6667%;
  }
  
  .tablet-v-cuatro {
    width: 33.3333%;
  }
  
  .tablet-v-tres {
    width: 25%;
  }
  
  .tablet-v-dos {
    width: 16.6667%;
  }
  
  .tablet-v-uno {
    width: 8.3333%;
  }
  
}

/* tablet horizontal*/
@media screen and (min-width:992px) {
  .tablet-h-doce {
    width: 100%;
  }
  
  .tablet-h-once {
    width: 91.6667%;
  }
  
  .tablet-h-diez {
    width: 83.3333%;
  }
  
  .tablet-h-nueve {
    width: 75%;
  }
  
  .tablet-h-ocho {
    width: 66.6667%;
  }
  
  .tablet-h-siete {
    width: 58.3333%;
  }
  
  .tablet-h-seis {
    width: 50%;
  }
  
  .tablet-h-cinco {
    width: 41.6667%;
  }
  
  .tablet-h-cuatro {
    width: 33.3333%;
  }
  
  .tablet-h-tres {
    width: 25%;
  }
  
  .tablet-h-dos {
    width: 16.6667%;
  }
  
  .tablet-h-uno {
    width: 8.3333%;
  }
  
}

/* laptop */
@media screen and (min-width:1200px) {
  .laptop-doce {
    width: 100%;
  }
  
  .laptop-once {
    width: 91.6667%;
  }
  
  .laptop-diez {
    width: 83.3333%;
  }
  
  .laptop-nueve {
    width: 75%;
  }
  
  .laptop-ocho {
    width: 66.6667%;
  }
  
  .laptop-siete {
    width: 58.3333%;
  }
  
  .laptop-seis {
    width: 50%;
  }
  
  .laptop-cinco {
    width: 41.6667%;
  }
  
  .laptop-cuatro {
    width: 33.3333%;
  }
  
  .laptop-tres {
    width: 25%;
  }
  
  .laptop-dos {
    width: 16.6667%;
  }
  
  .laptop-uno {
    width: 8.3333%;
  }
  
}

/* dekstop */
@media screen and (min-width:1400px) {
  .dekstop-doce {
    width: 100%;
  }
  
  .dekstop-once {
    width: 91.6667%;
  }
  
  .dekstop-diez {
    width: 83.3333%;
  }
  
  .dekstop-nueve {
    width: 75%;
  }
  
  .dekstop-ocho {
    width: 66.6667%;
  }
  
  .dekstop-siete {
    width: 58.3333%;
  }
  
  .dekstop-seis {
    width: 50%;
  }
  
  .dekstop-cinco {
    width: 41.6667%;
  }
  
  .dekstop-cuatro {
    width: 33.3333%;
  }
  
  .dekstop-tres {
    width: 25%;
  }
  
  .dekstop-dos {
    width: 16.6667%;
  }
  
  .dekstop-uno {
    width: 8.3333%;
  }
  
}