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

}

body {

background-color: #FFF;
min-height: 100vw;

}

#container {

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

}

header {

height: 80px;
background-color: royalblue;
padding: 8px;

}

#banner {

width: 300px;
height: 64px;
border: 4px solid transparent;
background-color: rgba(2555, 255, 255, .3);

    
}

main {

display: flex;
flex-direction: row;
flex-wrap: wrap;
}

main aside {

background-color: brown;
min-height: 300px;
flex: 0 0 15%;


}



aside nav a {

    display: inline-block;
    width: 90%; height: 35px;
    background-color: #f5c59e;
    margin: 5%;

}

main article {

background-color: white;
min-height: 300px;
flex: 1 0 0;

}

article .pretend_image {

background-color: goldenrod;
width: 250px; height: 250px;
margin: 16px;
float: left;

}

article p {

font-family: Verdana, Geneva, Tahoma, sans-serif;
margin-top: 8px;
margin-bottom: 8px;
margin-right: 8px;
font-size: 14pt;
line-height: 1.5;
text-align: center;

}

article header {

background-color: green;

}

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

    main {

        flex-direction: column;
        
        }
        
        main aside {
        
        min-height: 80px; 
        flex: 1 0 auto;
       
        
        }

        aside nav {

        display: flex;

        }

        aside nav a {

            width: 90%; height: 60px;
            background-color: #f5c59e;
            margin: 8px;
        
        }

        aside nav a:nth-child(4), 
        aside nav a:nth-child(5) {

            display: none;

        }
        
        main article {
        
        min-height: 500px;

        }

#banner {

    width: 100%;
        
    }

    article .pretend_image {

        width: calc(100% - 30px); height: 250px;
        float: left;
        
        }

}