* {
    margin: 0; padding: 0; box-sizing: border-box;
    
    }

#container {
    
    margin: 8px;
    min-height: 100vh;
    
        
}

body {

background-color: #575D90;

}

header {

height: 80px;
background-color: #575D90;
padding-top: 20px; padding-left: 20px;

}

main {

height: 100px;
background-color: #84A07C;
border: 2px ridge black;


}



nav {

display: flex;
font-family: cursive;


}

nav a {

    width: 100px; height: 40px;
    background-color: #f5c59e;
    margin: 8px;
    text-align: center;
    padding-top: 10px;
    margin-left: 43px;
    margin-top: 25px;
    
}

.boxes {

display: flex;

}

#box1 {
margin-top: 25px;
flex: 1 0 50%;
height: 70vh;
background-color: #C3D350;
display: flex;
flex-flow: row wrap;
justify-content: center;

}

#box1 div {
margin: 50px;
height: 58vh;
width: 500px;
background-color: azure;

}

#box1 p {

line-height: 2em;
margin: 15px;
font-family: Verdana, Geneva, Tahoma, sans-serif;

}

#box2 {
    margin-top: 25px;
    flex: 0 1 50%;
    height: 70vh;
    background-color: #F96E46;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    }

    #box2 div {
        margin: 50px;
        height: 58vh;
        width: 500px;
        background-color: azure;
        
        
        }

        #box2 p {

            line-height: 2em;
            margin: 15px;
            font-family: Verdana, Geneva, Tahoma, sans-serif;
            
            }



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

    main {

        flex-direction: column;
        
        }

        nav {

            display: flex;
            justify-content: center;
            margin-top: 20px;

        }


        nav a {

            width: 100px; height: 40px;
            margin: 8px;
            text-align: center;
            
        }

         nav a:nth-child(7),
         nav a:nth-child(8),
         nav a:nth-child(9) {

            display: none;

        }

        .boxes {

            display: block;
            margin-top: 45px;


        }



























}