:root {
    --color-1: #FCE9D9;
    --color-2: #F2B06B;
    --color-3: #B05F20;
    --color-4: #594F4C;
    --color-5: #2F333B;
}

@media only screen and (min-width: 600px) {
    :root { --padding: 30vw; }
}
@media only screen and (max-width: 600px) {
    :root { --padding: 15vw; }
}

body { margin: 0; font-family: Calibri, Helvetica, Arial, sans-serif; background-color: var(--color-5); color: whitesmoke; }
header, footer, section { padding: 0 var(--padding); }

h1 { margin-left: 1.5vw; }
p { color: whitesmoke; }
ul { padding-left: 3vw; }
li { list-style: none; margin-bottom: 5px; }
a { text-decoration: none; transition: 0.2s; border-bottom: 2px solid var(--color-5); color: var(--color-2); }
a:hover { color: var(--color-2); border-bottom-style: dotted;}