:root {
    --primary-color: purple;
    font-size: 16px;
    --background-color: white;
    --main-font: Arial;
}

header {
    width: 100%;
    height: 50px;
    background-color:  var(--primary-color);
}

header > nav > ul {
    display: flex;
    flex-direction: row;
    gap: 40px;
}

.highlight {
    color: yellow;
}

footer {
    width: 100%;
    height: 50px;
    background-color: green;
}

.small {
    height: 100px;
    width: 50px;
    background-color: white;
    transition: all 0.5s ease-in-out;
}

.small:hover {
    height: 120px;
    width: 60px;
    background-color: var(--primary-color);
}

.small.bigger {
    height: 150px;
}

.bottom {
    align-self: self-end;
}

div.grid {
    display: grid;
    grid-template-rows: 50px 300px 50px;
    grid-template-columns: 100px 1fr 1fr;
    grid-template-areas: "... header header"
    "sidebar content content"
    "footer footer footer";
    gap: 10px 20px;
}

.box-1 {
    grid-area: header;
    background-color: aqua;
}

.box-2 {
    grid-area: sidebar;
    background-color:  var(--primary-color);
}

.box-3 {
    grid-area: content;
    background-color: green;
}

.box-4 {
    grid-area: footer;
    background-color: blue;
}

@media screen and (600px <= width <= 1000px) and (oriention: portrait), print
{

}