/*estilos generales */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Header */
/* MODO OSCURO PÁGINA */

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color:rgb(51, 48, 48);
    --text-color:#fff;
  }
}

@media (prefers-color-scheme:  light) {
  :root {
    --bg-color:#fff;
    --text-color:rgb(51, 48, 48);
  }
}

body{
  font-family: 'Lato', sans-serif;
  background-color: var(--bg-color);
  color: var(--text-color);
}

/*CSS de Header*/
/* Estilos para dispositivos de pantalla pequeña */
@media only screen and (max-width: 600px) {

  /* Cambiar el fondo a una imagen más pequeña */
  header {
    background-image:
      linear-gradient(-225deg,
        rgba(6, 58, 57, 0.404) 0%,
        rgba(16, 11, 85, 0.404) 56%,
        rgba(61, 5, 12, 0.438)100%),
      url(../img/Teclado-small.png);
  }

  /* Reducir el tamaño de la imagen del logo */
  .contenedor-logo img {
    height: 60px;
  }

  /* Cambiar el tamaño y el espacio del título */
  .contenedor-logo h1 {
    font-size: 30px;
    margin: 0;
  }

  /* Reducir el tamaño del texto "bienvenidos" */
  .bienvenidos p {
    font-size: 24px;
  }

  /* Reducir el tamaño del texto "pagina web en desarrollo" */
  .mensaje p {
    font-size: 24px;
  }
  
  .nombre-academia h1 {
      justify-content: center;
    align-items: center;
  }
}

/* Estilos para dispositivos de pantalla mediana y grande */
@media only screen and (min-width: 601px) {

  /* Cambiar el fondo a una imagen más grande */
  header {
    background-image:
      linear-gradient(-225deg,
        rgba(6, 58, 57, 0.404) 0%,
        rgba(16, 11, 85, 0.404) 56%,
        rgba(61, 5, 12, 0.438)100%),
      url(../img/Teclado.png);
  }

  /* Cambiar el tamaño de la imagen del logo y del título */
  .contenedor-logo img {
    height: 120px;
  }

  .contenedor-logo h1 {
    font-size: 70px;
    margin: 0;
  }

  /* Alinear el texto "bienvenidos" y "pagina web en desarrollo" al centro */
  .bienvenidos,
  .mensaje {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
  }

  /* Cambiar el tamaño del texto "bienvenidos" y "pagina web en desarrollo" */
  .bienvenidos p,
  .mensaje p {
    font-size: 38px;
  }
}

/*
.wave{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}
*/

.MenuAC{
    justify-content: center;
    align-items: center;
 }

/* BARRA DE MENU DE NAVEGACIÓN */
 .MenuP{
    list-style: none;
    padding: 0;
    width: 100%;
    max-width: 100%;
    margin: auto;
    text-align: center;
    background-color: #20202b;}


  .MenuP li a{
     text-decoration: none;
     color:white; 
     padding: 20px;
     display: block;
     text-align: center;
     font-size: 20px;    
    }

  .MenuP li {
    display: inline-block;
    text-align: center;
  }

  .MenuP li a:hover{
    background-color: #4d50f1;
  }

  /* CSS DE SLIDER ALUMNOS */
    .nav{
    background-color: rgb(235, 34, 34);
    width: 100%; height: 100px; 
  }
  
  .slider-alumnos{
    justify-content: center;
    align-items: center;
  }

    .slider{
    width: 100%;
    height: 100%;
    overflow: hidden;
    }
    .slider ul{
      display:inline-flex;
      animation: cambio 25s infinite alternate linear;
      width: 400%; 
    }
    .slider li{
      width: 100%;
      height: 3%;
    }
    .slider img{
      width: 100%;
      height: 75%;
    }

    @keyframes cambio{
      0%{margin-left: 0;}
      20%{margin-left: 0;}
      
      25%{margin-left: -100%;}
      45%{margin-left: -100%;}
      
      50%{margin-left: -200%;}
      70%{margin-left: -200%;}
      
      75%{margin-left: -300%;}
      100%{margin-left: -300%;}
    }
    @media only screen and (min-width:320px) and (max-width:768px)
    {
     .slider, .slider ul, .slider img{
     height: auto;}
    }




    /* ANUNCIOS ACADEMIA */

.titulo-anuncio-examen{
  text-align: center;
  font-size: 40px;
  font-weight: 700;
  color: #7c79a0;
  padding-bottom: 5px;
  background-color: #ecebee;
}

.titulo-anuncio-examen1{
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  color: #7c79a0;
  padding-bottom: 5px;
  background-color: #ecebee;
}

.anuncios-academia-examen{
  padding-top: 20px;
  justify-content: space-between;
  background-color: #a3a4eb;
}

.contenedor-imagenes-examen{
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
padding-top: 50px;
}
    
.contenedor-imagenes-examen img{
display: block;
object-fit: cover;
width: 600px;
height: 100%;
box-shadow: 0 0 4px rgba(0, 0, 0, .5);
margin-bottom: 40px;
}





footer{
  display: flex;
  flex-direction: column;

  justify-content: space-between;
  align-items: center;
  padding: 5px;

  
  width: 100%;
  height: 400px;
  background-image:
  linear-gradient(-225deg,
      rgba(6, 58, 57, 0.404) 0%,
      rgba(16, 11, 85, 0.404) 56%,
      rgba(61, 5, 12, 0.438)100%),
      url(../img/Teclado\ .png);
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  position:relative;
}

.contenedorC2{
  width: 100%;
  overflow: hidden;
  margin-top: 50px;
}

footer .titulo-seccion2{
  margin-bottom: 50px;
  color: #fff;
  font-size: 40px;
  justify-content:end;
  text-align: center;
}

footer .subtitulo2{
  margin-bottom: 50px;
  color: #fff;
  font-size: 20px;
  text-align: center;
}

.redes-sociales{
  padding-top: 40px;
  width: 80%;
  display: flex;
  margin: auto;
  justify-content: space-evenly;
}

.redes-sociales i{
  font-size: 60px;
  color: #fff;
}

.redes-sociales a{
  font-size: 60px;
  color: #fff;
}

.input{
  border: 5px solid rgb(184, 179, 179);
  background: rgb(221, 218, 218);
  font-size: 20px;
  color: #fff;
  width: 80%;
  display: flex;
  justify-content:center;
}

.fa, .fab, .fad, .fal, .far, .fas {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  color: black;
}

.submit{
    width: 25px;   
    padding: 15px 0;
    color: black;
    cursor: pointer;   
}

.fa, .fab, .fad, .fal, .far, .fas:hover{
    color: white;
}