@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&family=Fredoka+One&family=Poppins&display=swap');

*{
    margin: 0px;
    text-decoration: none;
}

#titre{
    background: linear-gradient(to bottom right, darkblue, aquamarine);
    padding: 10px;
    height: 50px;
    display: flex;
    justify-content: space-between;
}
#titre nav a{
    color: white;
    font-family: 'Comfortaa', cursive;
}
#titre nav a:hover{
    color: darkblue;
}
#titre nav {
    align-self: flex-end;
}
#titre h1{
    font-family: 'Fredoka One', cursive;
    font-size: 30px;
    color: white;
}
#james{
    display: flex;
    height: 300px;
    background: linear-gradient(to bottom left ,aquamarine ,rgb(215, 241, 233));
}
#james img{
    height: 100%;
}
#james ul{
    color: rgb(46, 46, 46);
    font-family: 'Poppins', sans-serif;
    padding-top: 20px;
}
#film{
    display: flex;
    flex-direction: column;
    font-family: 'Comfortaa', cursive;
    font-weight: 1000;
}
#film p{
    color: rgb(48, 48, 48);
    text-align: center;
    padding: 10px;
    font-size: 20px;
}
#film h2{
    color: rgb(48, 48, 48);
    text-align: center;
    padding: 10px;
    font-size: 25px;
}
#film img{
    max-width: 100%;
}
#film1{
    background: linear-gradient(rgb(0, 160, 160),cyan)
    
}
#film2{
    background:linear-gradient(rgb(255, 58, 91),rgb(247, 116, 138));
    
}
#film3{
    background: linear-gradient(rgb(95, 95, 95),gray);
}
#film3 h2{
    color: white;
}
#film3 p{
    color: white;
}
#film4{
    background: linear-gradient(green, rgb(0, 156, 0));
}
@media screen and (min-width:640px) {
    #serie1{
        display: flex;
    }
    #film1{
        width: 50%;
    }
    #film2{
        width: 50%;
    }
    #serie2{
        display: flex;
    }
    #film3{
        width: 50%;
    }
    #film4{
        width: 50%;
    }
    #james {
        justify-content: center;
        background: linear-gradient(to bottom left,pink,rgb(252, 240, 242));
    }
    #titre{
        justify-content: flex-start;
        background: linear-gradient(to bottom right, rgb(252, 42, 77), pink);
    }
    #titre nav{
        margin: 20px;
        align-self: flex-end;
    }
}
@media screen and (min-width:1090px) {
    #film{
        display: flex;
        flex-direction: row;
    }
    #james {
        background: linear-gradient(to bottom left, lightgreen,rgb(189, 228, 189));
    }
    #titre{
        justify-content: flex-start;
        background: linear-gradient(to bottom right, green, lightgreen);
    }
    body{
        background: linear-gradient(to bottom left, lightgreen,rgb(189, 228, 189));
    }
}
@media screen and (min-width:1400px) {
    #james {
        background: linear-gradient(to bottom left, rgb(245, 189, 86),rgb(247, 220, 171));
    }
    #titre{
        background: linear-gradient(to bottom right, rgb(255, 102, 0), rgb(245, 189, 86));
    }
    body{
        background: linear-gradient(to bottom left, rgb(245, 189, 86),rgb(247, 220, 171));
    }
}