* {
    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%;
    margin-bottom: 15px;
}

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

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

.gridboxes {
    width: 100%; height: 50%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    gap: 30px;
}

.gridbox {
    background-color: lightgrey;
}

#boxes {
    width: 100%; height: 25%;
    display: inline-flex;
    justify-content: space-between;
    margin-top: 25px;
}

#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: 25px;
}