:root {
    --heading-background-color: #dcdcdc;
    --heading-text-color: #333;
    --heading-font: 'Kanit', sans-serif;
    --text-font: 'Rubik', sans-serif;
    --padding: 1rem;
    --border: 1px solid rgba(0,0,0,0.1);
    /* Color pallete https://coolors.co/palette/0a2463-3e92cc-fffaff-d8315b-1e1b18*/
    --primary-color: #FFFAFF;
    --secondary-color: #3E92CC;
    --accent1-color: #1E1B18;
    --accent2-color: #D8315B;
    --accent3-color: #0A2463;
}

nav {
    background-color: steelblue;
    padding: 10px;
}
nav a {
    color: white;
    display: block;
    padding: 20px;
}
h1 {
    background-color: var(--heading-background-color);
    color: var(--heading-text-color);
    font-family: var(--heading-font);
    padding: var(--padding);
}
img {
    width: 150px;
    height: auto;
    border: 1px solid steelblue;
    padding: 2px;
    box-shadow: 0 0 30px gray;
}
p {
    padding: 10px;
}
main {
    max-width: 840px;
}
aside {
    width: 50rem;
    margin: 1rem;
    border: 5px solid rgb(30, 34, 35);
    padding: var(--padding);
    background-color: rgb(40, 45, 46);
    color: whitesmoke;
}
aside img {
    width: 200px;
    height: auto;
}
main img {
    width: 150px;
    height: auto;
}
p { padding: 0; }
footer {
    margin-top: 50px;
    border-top: 1px solid rgb(205, 205, 205);
}