@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');

body{
    margin: 0px;
    background: white;
    overflow: scroll;
}
body::-webkit-scrollbar{
    display: none;
}
nav{
    height:150px;
    padding-top: 15px;
    border-bottom:5px solid white;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    background: linear-gradient(to top, rgb(4, 14, 3),rgb(242, 245, 241));
}
.navbar-brand{
    color: white;
}
ul{
    list-style: none ;
    justify-content: left;
    display: flex; 
    margin-top: 20px;
    padding-right: 4rem; 
    padding-top: 20px;
    text-decoration: none; 
}
li{
    background-color: white;
    height:40px;
    width:120px;
    border: 4px solid rgb(95, 100, 95);
    border-radius: 50px;

}
.navbar-toggler:hover{
    box-shadow: 5px 4px 10px rgb(255, 255, 255);
}
li:hover{
    box-shadow: 5px 2px 10px rgb(202, 197, 197);
   
}
a{
    font-family:Calibri;
   font-size: larger;
    color: black;
    text-decoration: none;
}
#sign{
    font-family:Calibri; 
    font-size: larger;
     color: black;
     text-decoration: none;
    
     padding-left: 35px;
}
#imagemoving{
    margin-top: 170px;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    animation: slide 25s linear infinite;
}

@keyframes slide {
    0%{
        margin-left: 100%;
    }
    100%{
        margin-left: -280%;
    }
}
#image1:hover{
    cursor: pointer;
    width:350px;
    height: 210px;
    transition: all 150ms ;
    box-shadow: 5px 2px 10px black;
}
#image2:hover{
    cursor: pointer;
    width:350px;
    height: 210px;
    transition: all 150ms ;
    box-shadow: 5px 2px 10px black;
}
#image3:hover{
    cursor: pointer;
    width:350px;
    height: 210px;
    transition: all 150ms ;
    box-shadow: 5px 2px 10px black;
}
#image4:hover{
    cursor: pointer;
    width:350px;
    height: 210px;
    transition: all 150ms ;
    box-shadow: 5px 2px 10px black;
}
#image5:hover{
    cursor: pointer;
    width:350px;
    height: 210px;
    transition: all 150ms ;
    box-shadow: 5px 2px 10px black;
}
#poster:hover{
    width:150px;
    height: 190px;
    /* transform: scale(1.1); */
    transition: all 150ms ;
    box-shadow: 5px 2px 10px black;
}
button{
    cursor: pointer;
    background-color: white;
    color: black;
    border: 2px solid rgb(2, 26, 2);
}
 button:hover{
    box-shadow: 5px 2px 10px black;
 }

#postercontainer::-webkit-scrollbar{
    display: none;
}
@media screen and (max-width:700px) {

.container-fluid{
    position: absolute;
    top:0px;

}
.sidebutton{
    position: absolute;
    margin-top: 20px;
}
.navbar-brand{
    font-size: 100px;
}
#imagemoving{
    margin-top: 170px;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    animation: slide 25s linear infinite;
    
}
@keyframes slide {
    0%{
        margin-left: 100%;
    }
    100%{
        margin-left: -680%;
    }
}
}