* {
    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;
}

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

#logonav > p:first-child {
    text-align: left;
}

#logonav > p:last-child {
    text-align: right;
    margin-top: -35px;
}

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

#introtext {
    background-color: lightgrey;
    width: 100%; height: 15%;
    margin-bottom: 30px;
}

.boxes {
    width: 100%; height: 45%;
    display: inline-flex;
    justify-content: space-between;
}

#box1 {
    background-color: lightgrey;
    width: 32%;
}

#box2 {
    background-color: lightgrey;
    width: 32%;
}

#box3 {
    background-color: lightgrey;
    width: 32%;
}

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