/* Aqui comienza los estilos del index */
body{
  min-height: 100vh;
  background-image: url("assets/assets/img/escuela.webp");
  background-repeat: no-repeat;
  background-size: cover;
  display: block;
  justify-content: center;
  align-items: center;
}

body::before{
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(77, 77, 77, 0.55);
  z-index: -1;
}

a{
  text-decoration: none;
}

section.section-container{

  display: flex;
  text-align: center;
  border-radius: 9px;
}

div.card-section{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 2em;
  align-items: center;
  background-color: #f0f0f0;
  margin: 2em;
  border-radius: 10%;
}

div.card-section label{
  font: 600 1.5em "Roboto";
}

div.card-section label.kinder{
  color: #e48f1e;
}

div.card-section label.primaria{
  color: #884a44;
}

div.card-section label.maestras{
  color: #832f69;
}

div.card-section:hover{
border-radius:50%;
-webkit-border-radius:50%;
box-shadow: 0px 0px 15px 15px blue;
-webkit-box-shadow: 0px 0px 15px 15px blue;
transform: rotate(360deg);
-webkit-transform: rotate(360deg); 
}
/* Aqui comienza los estilo del kinder */
div.card-section label.primerokinder{
  color: #e48f1e;
}

div.card-section label.segundokinder{
  color: #884a44;
}

div.card-section label.tercerokinder{
  color: #00800F;
}
/*Aqui comienza el estilo de primaria */

div.card-section label.primariamenu{
  color: blue;
}