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

    body{
        background-color: lightgray;
    }

    .container{
        margin: 0 auto;
        width:85%;
        background-color: aliceblue;
        overflow: hidden;
    }

    .menu{
        width:100%;
        display:inline-block;
    }
    
    .dropdown-content{
        margin:0 auto;
        padding-left: 3.25%;
        padding-right: 3.25%;
        text-decoration: none;
        display: inline-block;
    }


    .banner{
        width: 100%;
        position: relative;
    }

    #bannerImage{
        width:100%;
    }

    a:active, a:visited, a:link{
        color:black;
        text-decoration: none;
    }

    a:hover{
        text-decoration: underline;
    }
    
    .main-content{
        border:1px solid blue;
        width:50%;
        float:left;
        margin: 4% 2%;
        background-color: beige;
    }
    
    .related-content{
        border:1px solid red;
        width: 40%;
        margin: 4% 2%;
        float:right;
    }

}

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

    .container{
        width:90%; 
        background-color:blue;
    }
    
    .menu{
        width:100%;
        display:inline-block;
    }

    .dropdown-content{
        margin:0 auto;
        padding-left: 2%;
        padding-right: 2%;
        text-decoration: none;
        display:inline-block;
    }

}

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

    
    .container{
        width:90%;
        background-color:  purple;
    }

    #menuLabel{
        display: flex;
    }

    .menu{
        width:100%;
        display:inline-block;
    }

    .dropdown{
        position: relative;
    }

    .dropdown-content{
        margin:0 auto;
        padding-left: 1%;
        padding-right: 1%;
        text-decoration: none;
        display: none;
        width:100%;
        z-index: 1;
    }

    .dropdown:hover .dropdown-content{
        display: flex;
    }

    .main-content{
        border:1px solid red;
        width:100%;
        margin: 0 auto;
    }
    
    .related-content{
        border:1px solid black;
        width:100%;
        margin:0 auto;
    }

}

@media screen and (width:360px) and (orientation:portrait){

    
    .container{
        width:90%;
        background-color:  purple;
    }

    #menuLabel{
        display: flex;
    }

    .menu{
        width:100%;
        display:inline-block;
    }

    .dropdown{
        position: relative;
    }

    .dropdown-content{
        margin:0 auto;
        padding-left: 1%;
        padding-right: 1%;
        text-decoration: none;
        display: none;
        width:100%;
        z-index: 1;
    }

    .dropdown:hover .dropdown-content{
        display: flex;
    }

    .main-content{
        border:1px solid red;
        width:100%;
        margin: 0 auto;
    }
    
    .related-content{
        border:1px solid black;
        width:100%;
        margin:0 auto;
    }
    
    
}