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

}

#container {

margin: 8px;
min-height: 100vh;

}

header {

height: 80px;
background-color: #C7D3DD;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
font-size: 24pt;
text-indent: 15px;
padding-top: 20px;

}

body {

background-color: #3D348B;

}

main {

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    }
    
    main aside {
    
    background-color: #E6AF2E;
    height: 80vh;
    flex: 0 0 10%;
    
    
    }
    
    
    
    aside nav a {
    
        display: inline-block;
        width: 65%; height: 40px;
        background-color: #EF476F;
        opacity: 75%;
        margin: 13%;
        text-align: center;
        padding-top: 8px;
        font-size: 16pt;
        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    }

    #box1 {

        height: 80vh;
        flex: 1 0 30%;
        background-color: black;

    }

    #box2 {

        height: 80vh;
        flex: 1 0 30%;
        background-color: #028090;

    }

footer {

height: 100px;
background-color: #D00000;
}

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

    main {

display: block;

    }

    main aside {
        
        flex: 0 0 auto;
        height: 100px;
        
        
        }

        aside nav {

        display: flex;
        height: 35px;

        }

        aside nav a {

            width: 90%; height: 60px;
            background-color: #EF476F;
            margin: 8px;
            margin-top: 15px;
        
        }











}