body{
background-color: aliceblue;
}
.main {
  background-image: linear-gradient(
    aliceblue,
    rgb(165, 169, 173),
    rgb(88, 89, 89)
  );
}

.video{
height: 200px;
width: 500px;
}

.youtube{
color: #C19A6B;    
    
}

.youtube:hover{
color: rgba(4, 43, 82, 0.819);
}

.youtubeF{
color: #FF8C00;    
    
}

.youtubeF:hover{
color: rgba(4, 43, 82, 0.819);
}

h1{
    font-family: "Times New Roman", Times, Arial;
}

nav ul {
  border-radius: 25px;
  list-style: none; /* Elimina los puntos de la lista */
  padding: 0;
  background-image: linear-gradient(
    #8e7454,
    #6b5537,
    #523623
  ); /* Color de fondo del menú */
  overflow: hidden; /* Evita que los elementos se desborden */
  text-align: center;
  margin: 10px 5px; /* ajusta el valor según necesites */
}

nav ul li {
  float: left;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
}

nav ul li a {
  display: block;
  padding: 10px;
  color: #fff;
  text-decoration: none;
  font-family: "Times New Roman", Times, Arial;
}
  
  nav li a:hover {
    background-color: #C19A6B; /* Color de fondo al pasar el ratón por encima */
  }
 .button:hover{
    background-color: rgba(5, 56, 106, 0.819) ;
 }

.logo{
    width: 200px;
    height: 150px;
    margin-right: 1%;
    margin-left: 2%;
    border-radius: 5%;
   
}
.container {
    width: 100%;
    max-width: 1200px;
    padding: 20px;
    margin-top: 1px;
}
.navbar { 
    overflow: hidden; /* Para asegurar que los bordes redondeados funcionen correctamente */ 
    position: relative;
    text-align: center;
}
.info{
    text-align: center;
    font-family: "Times New Roman", Times, Arial;
}

#back{
    background-color: rgb(22, 100, 143);
    color: aliceblue;
    padding: 5px;
    margin-bottom: 1px;
}

.intro{
    text-align: center;
    text-align: justify;
    background-image: linear-gradient(#897052, #5e4b31, #523623);
    color: aliceblue;
    padding: 50px;
    margin: 100px;
    border-radius: 20px;
    font-family: "Times New Roman", Times, Arial;
}
.introlosa{
    text-align: center;
    text-align: justify;
    background-image: linear-gradient(
    rgba(11, 85, 158, 0.819),
    rgba(7, 34, 60, 0.819));
    color: aliceblue;
    padding: 50px;
    margin:100px;
    border-radius: 20px;
    font-family: "Times New Roman", Times, Arial;
}
.botoncerrar{
    font-family: "Times New Roman", Times, Arial;
    text-align: center;
    padding: 30px 30px;
    background-image: linear-gradient(
    #c92626e6,
    rgba(130, 25, 25, 0.901),
    rgba(109, 23, 23, 0.901)
    );
    color: aliceblue;
    border: none;
   border-radius: 100%;
   cursor: pointer;
  font-family: 14px;
}
.botoncerrar:hover{
    background-color: rgba(4, 43, 82, 0.819);
}

.presentation{
text-align: center;
background-image: linear-gradient(
    #C19A6B,
    #523623);
color: aliceblue;
position: relative;
  width: 100%;
padding: 0px 0px;
font-family: "Times New Roman", Times, Arial;
}
.presentationlosa{
    text-align: center;
    background-image: linear-gradient(
    rgba(11, 85, 158, 0.819),
    rgba(7, 34, 60, 0.819));
    color: aliceblue;
    position: relative;
    width: 100%;
    padding: 0px 0px;
    font-family: "Times New Roman", Times, Arial;
       
    }
.image-container {
    margin-left: 2px;
    width: 250px; /* Ajusta el tamaño según tus necesidades */
    height: auto; /* Mantiene la proporción de la imagen */
    overflow: hidden; /* Oculta cualquier desbordamiento de la imagen */
    position: relative; /* Necesario para el posicionamiento de los elementos hijos */
    border-radius: 15px; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra */
    transition: transform 0.3s ease-in-out; /* Transición para el efecto de hover */
  }
  
  .image-container img {
    width: 100%;
    height: 50%;
    object-fit: cover; /* Asegura que la imagen cubra el contenedor */
    border-radius: 15px; /* Bordes redondeados */
  }
  .image-container:hover {
    transform: scale(1.05); /* Efecto de zoom al hacer hover */
  }

.footer {
 position: relative;
 width: 100%;
 background-image: linear-gradient( rgb(88, 89, 89),#1f1f1f,#000000 );
  min-height: 100px;
  padding: 15px 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.footer .container {
    display: flex;
  justify-content: center;
  position: relative;
  align-items: center;
  margin: 10px 0;
  flex-wrap: wrap;
}
.footer .container div {
    color: white;
    text-align: center;
    margin-top: 15px;
    margin-bottom: 10px;
    font-size: 18px;
    font-family: "Times New Roman", Times, Arial;
}
.footer h3 {
    margin-bottom: 15px;
}
.footer p, .footer a {
    color: #bbb;
    text-decoration: none;
    margin: 10px 40px;
    display: block;
}
.footer a:hover {
    color: white;
}
.footer .social-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin: 10px 5px;
    flex-wrap: wrap;
}
.footer .social-icons a {
    margin: 0 15px;
    color: #bbb;
    font-size: 1.5em;
    transition: color 0.3s;
}
.footer .social-icons a:hover {
    color: white;
}

.footer-bottom{
    color: aliceblue;
    padding: 4px 100px;
    margin-top: 20px;
    text-align: left;
    border-radius: 8%;
    background-color: rgba(4, 43, 82, 0.819);
    margin:0;
    font-family: "Times New Roman", Times, Arial;
}

.resolution{
    width: 100%;
    text-align: center;
    background-image: linear-gradient(
    aliceblue,
    rgb(165, 169, 173),
    rgb(88, 89, 89));
}

#playlist{
width: 100%;
text-align: center;
}

@media (max-width: 900px){
.logo{
     width: 50%;
     height: 30%;
    margin: 0 auto;
    margin-left: 0.6em;
    border-radius: 50px; 
}
  
.main {
  background-image: linear-gradient(
    aliceblue,
    rgb(165, 169, 173),
    rgb(88, 89, 89)
  );
}

.video{
height: 55%;
width: 70%;
border-radius: 8%;    
}
    
.youtube:hover{
color: rgba(4, 43, 82, 0.819);
}
    
h1{
    font-family: "Times New Roman", Times, Arial;
}
    .clic{
        text-align: center;
        margin-left: 1.5em;
        font-family: "Times New Roman", Times, Arial;
    }
    
    .info {
text-align: center;
margin-left: 0.1em;
font-family: "Times New Roman", Times, Arial;

    }

.navbar {
    flex-direction: column;
    position: relative;
    margin-right: 3em;
    margin-left: 2em;
    border-radius: 40px;
    
    border-radius: 10px;
    text-align: center;
    font-family: "Times New Roman", Times, Arial;
    
}
    
    
nav ul{
    padding: 15px 30px;
    margin-left: 25px;
    border-bottom: 1px solid #f5cf88;
}
  
nav ul li a{
border-bottom: 1px solid #f5cf88;
  }
 
nav list:last-child {
  border-bottom: none;
  }
    
    .botoncerrar{
    margin-right: 1.6em;
    margin-left: 3em;    
    padding:  20px 25px;
    border-radius: 100%;    
    font-family: "Times New Roman", Times, Arial;
    font-size: 15px;
    background-image: linear-gradient(
    #c92626e6,
    rgba(130, 25, 25, 0.901),
    rgba(109, 23, 23, 0.901)
    );

 } 
#button{
    text-align: center;
    margin-left: 10px;
    padding:  10px 0px 20px 0px;
    font-family: "Times New Roman", Times, Arial;
}
#button2{
    text-align: center;
    margin-left: 10px;
    padding:  10px 0px 20px 0px;
    font-family: "Times New Roman", Times, Arial;
}
#button3{
    text-align: center;
    margin-left: 10px;
    padding:  10px 0px 20px 0px;
    font-family: "Times New Roman", Times, Arial;
}
#button4{
    text-align: center;
    margin-left: 10px;
    padding:  10px 0px 20px 0px;
    font-family: "Times New Roman", Times, Arial;
}
#button5{
    text-align: center;
    margin-left: 10px;
    padding:  10px 0px 20px 0px;
    font-family: "Times New Roman", Times, Arial;
}
    .center{
        text-align:center;
    }
    
    .botoncerrar:hover{
    background-color: #C19A6B;
}

.intro{
    position: relative;
    margin: 0px;
    width: 100%;
    font-family: "Times New Roman", Times, Arial;
}
    #playlist{
    position:relative;    
    margin: 0px;

}
    
    .presentation{
    border-radius: 5%;    
    }
    
    .introlosa{
    position: relative;
    margin: 0px;
    width: 100%;
    font-family: "Times New Roman", Times, Arial;
    }
        
.image-container {
    width: 100%;
    margin-left: 0px;
}
 .image-container img {
     width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 15px;
    margin-bottom: 10px;
     margin:0;
 }

nav li a:hover {
    background-color: #C19A6B; /* Color de fondo al pasar el ratón por encima */
  }

 }
@media (max-width: 1200px) {
    .desktop {
        display: none;
    }
    .movil {
        display: none;
    }
}
@media (max-width: 1800px) {
    .desktop {
        display: none;
    }
    .movil {
        display: none;
    }
}