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

body {
    font-size: 30px;
    text-align: center;
}

#container {
    min-width: 1100px; max-width: 1800px; height: calc(200vh - 200px);
    margin: 30px auto;
    justify-content: center;
}

#logo {
    background-color: lightgrey;
    width: 100%; height: 10%;
}

#navigation {
    background-color: lightgrey;
    width: 100%; height: 5%;
    margin-top: 7px; margin-bottom: 7px;
}

#header-banner {
    background-color: lightgrey;
    width: 100%; height: 15%;
    margin-bottom: 20px;
    background-image: url(/images/purpleskies.jpg);
}

#sidebyside {
    display: inline-flex;
    justify-content: space-between;
    width: 100%; height: 62.5%;
}

#sidebar {
    background-color: lightgrey;
    width: 15%;
}

#bodyarea {
    background-color: lightgrey;
    width: 83%;
}

#footer {
    background-color: lightgrey;
    width: 100%; height: 5%;
    margin-top: 25px;
}