@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap')

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

html{
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
}
bg1{
    color: #977f7f
}
bg2{
    color: #6d0909
}
bg3{
    color: #af4d4d
}
bg4{
    color: rgba(128, 128, 128, 0.807)
}
.bg5{
    /* background: #d1b0b0; */
    background: #d7b8b8;
}


   
/* fkexbox */

.container{
    display: flex;    
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin: 10px;   
    }
    .items{
        width: 30%;
        background: grey;
        margin-bottom: 10px;
    }     

    .news-sec{
        display: flex;
        height: 50vh;
        border: 1px solid #420505;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        }
        .banner{
            width: 30%;
            height: 240px;
            background: #977f7f;
        }

header{
    display: flex;
    flex-direction: row;      
    padding: 1%;
    background: linear-gradient(90deg, rgba(61, 9, 18, 0.724) 0%, rgba(151, 127, 127, 0.671) 100%);
    margin-bottom: 10px;
    margin-top: 10px;
    border-radius: 10px;
               
    }
    img{
        width: 12%;
        height: fit-content;
        border-radius: 10px;      
        display: flex;
        justify-content: start;
        
        }
    h1 {    
        color:#6d0909;
        text-align: center;
        font-size: 2.5em;
        font-weight: bold;           
    }
    nav{            
        justify-content: flex-start;
        color: #6d0909;   
                  
        }
        nav ul{
            display: flex;
            list-style: none;
            padding: 5px;
            /* padding-top: 10px;   */
            }
            nav ul li{
                margin-right: 10px;  
                margin-top: 5px;                                  
                }
                nav ul li a{
                    text-decoration: none;
                    font-size: 1.5;
                    color: whitesmoke;                        
                    border-radius: 10%;
                    transition: 1s;
                    padding: 5px; 
                    }
                    nav ul li a:hover{
                        color: rgb(109, 41, 41);
                        background: whitesmoke;
                    }
    .estrenos{
        background:rgba(61, 9, 18, 0.724);
        color: white;
        border: 1px solid #420505;
        border-radius: 10px;
        text-align: center;
        padding: 10px;
        position: sticky; 
        top: 0;
        z-index: 1;
        animation-delay: 2s;     
  
}
    .logo{
        width: 12%;                        
        }
        .logo img{
            width: 100%;
            border-radius: 10px;
            animation: 2s infinite;            
            }            
            .logo:hover {
                transform: rotate(360deg);
            }
            
    .search{
        width: 50%;
        padding: 10px;
        padding-top: 10px;
        padding-right: 10px;        
        }
        .search input[type="text"]{
            width: 80%;
            padding: 5px;
            border-radius: 5px;
            border: none;
            }
            .search input[type="submit"]{
                padding: 5px;
                border-radius: 5px;
                border: none;
                background: #420505;
                color: white;
                }
                .search input[type="submit"]:hover{
                    background: #977f7f;
                }
                .estrenos{
                    background:rgba(61, 9, 18, 0.724);
                    color: white;
                    border: 1px solid #420505;
                    border-radius: 10px;
                    text-align: center;
                    padding: 10px;
                    position: sticky; 
                    top: 0;
                    z-index: 1;
                    animation-delay: 2s;
                }
                           
.news-main{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    }
    .news-main article{
        width: 30%;
        padding: 2%;
        background: rgba(255, 255, 255, 0.3);
        border-radius: 15px;
        margin-bottom: 10px;
            }
        .news-main article img{
            width: 100%;                
}

footer{
    background-color: #977f7f;    
    color: #420505; 
    padding: 20px;
    text-align: center;
    margin-top: 10px;
    border-radius: 10px;
    justify-content: center;   
            }    
   
    .social{
        display: flex;
        justify-content: center;
        margin-top: 10px;           
        }
        .social a{
            margin-right: 10px;
            transition: 1s;
            }
            .social a img{                                
                width: 30px;
                border-radius: 50%;
                }
                .social a img:hover{
                    background: #420505;
                    border-radius: 50%;
                    }

/* Anulamos la regla de Bootstrap y permitimos que el ancho sea con margenes */
.myheader, .myfooter {
    margin-left: 10px !important;
    margin-right: 10px !important;
    border-radius: 10px !important;    
                    }    
#saludo {
    font-size: 18px;
    font-weight: bold;
}
.card-text{
    max-width:max-content;
    margin: 15px;
    height:auto;
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.animacion-div {
    opacity: 0; 
    transition: opacity 1s ease-in-out; 
}

.animacion-div.loaded {
    opacity: 1; 
}

.side-appear {
    opacity: 0; 
    transform: translateX(-100%); 
    transition: opacity 1s ease-in-out, transform 1s ease-in-out; 
}

.side-appear.show {
    opacity: 1; 
    transform: translateX(0); 
}
                         
/* media queries */
        
@media screen and (min-width: 0px) and (max-width: 576px) {
      
    body{
        background: rgba(128, 128, 128, 0.695);
    }
    header{
        flex-direction: column;
        align-items: center;
    }
    h1 {
        font-size: 1.5em;
    } 
    .news-main{
        flex-direction: column;
        width: 100%;
    }
    .news-main article{
        width: 100%;
    }   
    .img-banner {
        width: 200px;
        height: 200px;
    }
    nav ul {
        flex-direction: column;
        align-items: center;
    }
    nav ul li {
        margin-bottom: 10px;
    }
}


}
@media screen and (min-width: 576px) and (max-width: 900px){
    body{
        background: rgba(128, 128, 128, 0.695);
    }
    header{
        flex-direction: row;
    }    
    .logo{
        text-align: center;
    } 
    h1 {
        font-size: 1.5em;
    }
    .news-main{
        flex-wrap: wrap;
    }
    .news-main article:first-child{
        width: 100%;
        }
        .news-main article:first-child .img{
            max-height: 200px;
            overflow-y: hidden;
        }
    .news-main article{
        width: 45%;
    }
    .img-banner {
        width: 250px;
        height: 250px;
    }
} 

@media screen and (min-width: 900px) and (max-width: 1200px){
    body{
        background: rgba(128, 128, 128, 0.695);
        color: black;        
    }
    .logo{
        text-align: center;
    }
    h1 {
        font-size: 2em;
    }
    .news-main{
        flex-wrap: wrap;
    }
    .news-main article{
        width: 25%;
    }
    .img-banner {
        width: 300px;
        height: 300px;
    }
}

@media screen and (min-width: 1200px){
    body{
        background: rgba(128, 128, 128, 0.695);
    }
    .logo{
        text-align: center;
    }
    h1 {
        font-size: 2.5em;
    }
    .news-main{
        flex-wrap: wrap;
    }
    .news-main article{
        width: 25%;
    }
    .img-banner {
        width: 350px;
        height: 350px;
    }
}