#container{
    background-color: #2EC486;
}

/* =====mobile, phone, and tablet=====*/

header{
    background-color: #20A4F3; 
    width: fit-content;
    margin: 0px auto;
}

header h1{
    text-align: center;
    font-size: clamp(4rem, 4vw, 5rem);
}

#container nav{
    background-color: #FF3366;
    border: 4px solid #011627;
    margin: 8px;
}

nav ul{
    list-style: none;
    display: flex;
}

nav li{
    margin: 8px;
    width: 30%; height: 45px;
    flex: 1 0 auto;
}

li a{
    text-decoration: none;
    display: block;
    width: 100%; height: 100%;
    background-color: #2A4DF3;
    text-align: center;
    color: orange;
    border: 2px solid #011627;
}

nav li:nth-child(4), 
nav li:nth-child(5){
    display: none;
}

/* -----Article----- */

article{
    background-color: #FF3366;
    margin: 8px;
}

article #top, #bottom{
    border: 2px solid #011627;
}

#top p, #bottom p{
    background-color: lightgrey;
    flex: 1 0 auto;
    margin: 8px;
}

#top img, #bottom img{
    height: 80%;
    width: 100%;
}

@media (width > 1000px){

    nav ul{
        width: 75%;
        margin: 0px auto;
    }
    
    nav li{
        width: 15%;
        flex: 1 0 auto;
    }
    
    nav li:nth-child(4), 
    nav li:nth-child(5){
        display: block;
    }
    
    /* -----Article----- */
    #top, #bottom{
        display: flex;
    }
    #top p, #bottom p{
        text-align: left;
        width: 50%;
        height: 75%;
        margin: 8px;
        flex: auto;
    }
    
    #top img, #bottom img{
        height: 0%;
        width: 50%;
        margin: 8px;
    }
}