body{
    font-family: Outfit, sans-serif;
    width: 100vw;
    min-height: 100vh;
    margin: 0;
   
    background: rgb(233, 254, 255);
    overflow-x: hidden;
   

    
}
::-webkit-scrollbar {
    width: 7px;
  }
  ::-webkit-scrollbar-thumb {
    background: #636363c0;
  }
.header{   
   
    text-align: center;
   
    margin: auto;
    max-width: 100%;
    overflow-x: hidden;
    background: linear-gradient( rgba(180,165,255,1) 0%, rgba(164,252,247,0.7931547619047619) 47%, rgba(226,255,254,0.5578606442577031) 82%, rgba(255,255,255,0) 100%);
}
h1{
    padding-top: 110px;
    text-shadow: -1px 3px 6px rgba(116, 116, 116, 0.185);
    font-size: 3.4rem;
    max-width: 90%;
    min-width: 10%;
    margin: auto;
}
h3{
    max-width: 50%;
    min-width: 20%;
    font-size: 1.8rem;
    margin: auto;
    padding-top: 50px;
    padding-bottom: 70px;
    color: rgba(0, 0, 0, 0.829);
}
.titleH1{
    font-size: 3.6rem;
    font-weight: 770;
    color: rgb(241, 1, 33);
}

#videosContainer{
    min-height: 100vh;
    max-width: 90%;
    
    
    
    display: flex;
    flex-wrap: wrap; /* Allows videos to wrap to the next line */
    gap: 80px; /* Space between items */
    justify-content: space-evenly; /* Center the items in the container */
   margin: auto;
   margin-top: 100px;
   

}
.thumbnail{
    flex-grow: 1;
   
   width: inherit;
   height: 222px;
   object-fit: cover;
   border: none;
   border-radius: 19px;
   cursor: pointer; 
 
  
}

.controls{

    width: 160px;
   
    height: 38px;
    margin: auto;
    padding-top: 20px;
    padding-bottom: 20px;
    
    
    
}
button{
    font-family: Outfit, sans-serif;
    width: inherit;
    height: inherit;
    border: none;
    border-radius: 25px;
    background-color: #1b8d2a;
    cursor: pointer; 
    font-size: 19.5px;
    font-weight:700;
    color: #ffffff;
    text-align: center;
    box-shadow: 0px 5px 15px -3px rgba(54, 54, 54, 0.411);
    transition: transform 0.2s ease-in-out; 
    
}
button:hover{
    transform: scale(1.03);
}





  

#video{
    width: 400px;
    
    height: 280px;
    margin-bottom: 50px;
  
    background: rgb(255, 255, 255);
    border-radius:22px ;
    box-shadow: 0px 5px 16px -3px rgba(54, 54, 54, 0.329);
    transition: transform 0.2s ease-in-out; 
}
#video:hover{
    transform: scale(1.1);
}
a{
    text-decoration: none;
    color: black;
}
.videoTitle{
    text-align: center;
    padding-left: 15px;
   
    padding-right:15px;
    font-weight: 750;
    margin-top: 11px;
    white-space: nowrap; /* Evita que el texto se divida en varias líneas */
    overflow: hidden; /* Oculta el texto que sobrepasa el ancho del contenedor */
    text-overflow: ellipsis;
    font-size: 18px;
    color: black;
    
}
footer{
margin: auto;
margin-top: 6%;

}
footer > p{
   
    position: absolute;
    right: 20px;
   
    padding-bottom: 20px
}
#maxo{
    color: #008f24;
    font-weight: 800;
}
.mobileText {
    display: none;
}
.placeholder{
    width: 400px;
    
    height: 280px;
    margin-bottom: 50px;
  
    background: rgb(255, 255, 255);
    border-radius:22px ;
    box-shadow: 0px 5px 16px -3px rgba(54, 54, 54, 0.329);
}

@media screen and (max-width: 720px) {

    body{
        width: 100%;
        overflow-x: hidden;
    }
    ::-webkit-scrollbar {
        width: 0px;
      }
     
    
    h1 {
        font-size: 28px;
        padding-top: 70px;
    }
    .titleH1.titleH1{
        
        font-size: 28px;
        
    }
   

    h3 {
        font-size: 15px;
        max-width: 80%;
       
        padding-top: 32px;
        padding-bottom: 24px;
    }
    .desktopText {
        display: none;
    }
    .mobileText {
        display:flex;
    }
    

    #videosContainer {
        gap: 20px;
        margin-top: 30px;
    }

    #video {
        max-width: 100%;
        height: 90%;
       
    }
    .placeholder.placeholder {
        max-width: 100%;
        height: 90%;
       
    }
    .thumbnail{
        flex-grow: 1;
       
       width: 100%;
       height: 150px;
       object-fit: cover;
       border: none;
       border-radius: 19px;
       cursor: pointer; 
     
      
    }

    .controls {
        width: 140px;
        height: 34px;
    }

    button {
        font-size: 14px;
    }

    .videoTitle {
        font-size: 14px;
    }
    footer p {
        width: 100%;
        position: relative;
        left: 0px;
        text-align: center;
    }
    button:hover {
        transform: none; /* Disable hover scaling effect */
    }

    #video:hover {
        transform: none; /* Disable hover scaling effect */
    }
}