#container{
    background-color: #EE6055;
}

/* =====mobile, phone, and tablet=====*/
header{
    background-color: #60D394;
}

header #logo{
    background-image: url(../images/home_logo.jpg);
    display: block;
    height: 100px;
    width: 100px;
    background-size: cover;
    margin: 0px auto;
}

nav{
    background-color: #FFD97D;
    margin-top: 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: #FF9B85;
    text-align: center;
    color: #000;
    border: 2px solid #000;
    border-radius: 25px;
}

a:hover{
    background-color: #AAF683;
}

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

/* -----section-----*/

section{
    border: 2px solid #FF9B85;
    margin: 8px;
}

section #desktop{
    display: none;
}

article{
    border: 2px solid #FF9B85;
}

section p{
    margin-bottom: 8px;
    border: 0px solid #FF9B85;
}

section #mobile{
    width: 100%;
}

@media (width > 1000px){
    header{
        display: flex;
        height: 100px;
    }
    
    header #logo{
        height: 80px;
        width: 80px;
        margin: 0px 24px;
    }
    
    nav{
        background-color: transparent;
        margin: 8px 50px;
        width: 50%;
    }
    
    nav li:nth-child(4), 
    nav li:nth-child(5){
        display: block;
    }
    
    /* -----section-----*/
    
    section{
        height: 100vh;

    }
    
    section #desktop{
        display: block;
        float: left;
    }
    
    article{
        border: 0px solid #FF9B85;
        height: 80%;
    }
    
    section p{
        margin-bottom: 32px;
        margin-top: 32px;
        border: 0px solid #FF9B85;
    }
    
    section #mobile{
        display: none;
    }
}