/* Global Styles  */

body{
  background-color: azure; 
}

img {
    display: block;
    margin: 0 auto;
    width: 100%;
}

#container {
    background-color: aliceblue; 
}

/* Mobile styles */ 

@media (min-width: 320px) {
    nav{
        background-color: azure;
        padding: 5px;
        margin-top: 10px;
        text-align: center;
    }
    
    nav ul{
        list-style-type: none;
        padding: 0;
        
    }
    
    nav li{
        display: block;
    }
    
    nav li a {
        display: block;
        height: 30px;
        line-height: 40px;
        background-color: azure;
        color: black;
        font-size: 24px;
        text-decoration: none;
        margin-top: 5px;
    }
    
    nav li a{
      background-color: azure;  
    }
    
    main{
        padding: 20px; 
    }
    h1, h2, h3 {
        text-align: center;
        color: black;
        text-shadow: 1px 1px 1px azure;
    }
    
    footer {
        text-align: center;
        padding: 40px;
        color: black;
        text-shadow: 1px 1px 1px azure;

    }
}

/* Tablet Styles */

@media (min-width: 768px) {
    nav li {
        display: inline-block;
    }
    
    nav li a {
        width: 150px;
        height: 50px;
        line-height: 50px;
        margin: 5px;
    }
    
    .movie_post {
       width: 650px; 
       border-radius: 10px;
        box-shadow: 3px 3px 3px black;
    }
}

/* Desktop Styles */ 
@media (min-width: 1024px) {
    #container  {
        width: 80%;
     margin: 20px auto; 
        border: 4px solid black;
        border-radius: 20px;
        padding: 20px;
    }
    
    nav{
        padding: 0;
        margin: 0; 
    }
    
    nav li a {
      background-color: azure;  
    }
    
    #multi_co1{
        display: flex;
    }
    .co1 {
        width: 100%;
        max-width: 380px;
     margin: 10px;
        padding: 15px;
        border: 2px solid black;
 
    }
    .movie_post {
        width: 100%;
        height:auto;
        margin-top: 20px;
    }
    
    footer{
        margin-top: 40px;
        padding: 20px;
    }
    
}