@import url();
:root {
  --color-fondo1:#c4a178;
  --color-fondo: #fff4b6;
  --color-fondo2: #fcfaef;
  --color-1: #336633;
  --color-2: #cc6699;
  --color-2a:#ca86a8;
  --color-3: #333399; 
  --color-4: #ff9900;
  --color-4a: #fcc36f;
  --color-5: #6eb3dc; 
  --color-5a:#95cfd3;  
  --color-6: #8fd2f867;
  --color-transparente: #666666a7;
  --tipo-titulos: 'Nunito';
  --tipo-textos: sans-serif
}
  *{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

ul{
    list-style: none;
    margin: 0;
    padding: 0;
}

a{
  text-decoration: none;
  color:black;
  font-family: 'Nunito', sans-serif;
  font-weight: bold;
}

li{
  text-decoration: none;
  list-style: none;
}

header{
  position: sticky;
  top: 0;
  z-index: 8000;
}


.contenedora{
    padding: 2em;
  }

/*HEADER*/
header .contenedora{
  width: auto;
  background-color: var(--color-6);
  box-shadow: 1px 1px 5px var(--color-transparente);
  height: 15em;
  gap: .5em;
}

  header:hover{
    background-color: var(--color-transparente);

  }
  

.hym{
  background-image: url(imagenes/fondo3.png);
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 50em;
}


#logo img{
  width: 80%;
}

#logo {
  display: flex;
  justify-content: center;
}

nav{
  padding: 1em;
  text-align: center;
}

nav li{
  padding: 1.5em;
}

nav a{
  color: var(--color-fondo);
}

.estudiante{
  background-color: var(--color-2);
  padding: 1em;
  border-radius: .5em;
}

.estudiante:hover{
  background-color: var(--color-transparente);
  box-shadow: 1px 1px 5px var(--color-transparente);
}

.profe {
  padding: 1em;
  border-radius: .5em;
  background-color: var(--color-3);
}

.profe:hover{
  background-color: var(--color-transparente);
  box-shadow: 1px 1px 5px var(--color-transparente);
}

video{
  margin-top: 23em;
  width: 80%;
  box-shadow: 1px 1px 5px var(--color-transparente);
}

.vid{
  display: grid;
  place-items: center;
}


.video img{
  width: 30%;
}

.video{
  margin-top: 25em;
}


  
  .acumar a{
      display: flex;
      justify-content: end;
      flex-direction: row;
    }
    .acumar img{
        width: 20%;
    }
    
    
/*FOOTER*/

footer{
  width: 100%;
  background-color: var(--color-5a);
  box-shadow: 1px 1px 5px var(--color-transparente);
  padding-top: 2em;
  padding-bottom: 2em;
}

.acumar a{
  display: flex;
  justify-content: center;
}
.acumar img{
  width: 20%;
}

.todo_pie{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.redes{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.redes ul img{
  width: 4em;
  padding: .2em;
  display: inline-block;
}





@media (min-width: 30em){

  #logo{
    padding-left: 0%;
    margin-right: 5em;
  }

  #logo img{
    width: 100%;
  }


    
    .hym{
        background-image: url(imagenes/fondo2.png);
        background-size: cover;
    }

    nav{
      display: flex;
      flex-direction: row;
      background-color: transparent;
      width: auto;
      padding: .5em;
      height: auto;
    }
}

@media (min-width: 60em){

  /*HEADER*/
  header .contenedora{
    height: 5em;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  video{
    width: 30%;
    margin-top: 1em;
  }

    /*FOOTER*/

    footer{
      width: 100%;
    }
    
    .acumar a{
      display: flex;
      justify-content: center;
    }
    .acumar img{
      width: 20%;
    }
  
    .todo_pie{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
    }
  
    .redes{
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
    }
  
    .redes ul img{
      width: 4em;
      padding: 1em;
      display: inline-block;
    }
  
  }