:root {
--example-color: lightgreen;
}

body {
    background-color: pink;
    font-family: "Funnel Sans", sans-serif;
}

header {
    background-color: pink;
}

.top {
    text-align: center;
    margin-bottom: 0em;
    padding-bottom: 0.7em;
}

nav {
    display: grid;
    grid-template-columns: auto;
}

.wrapper {
    margin: 0 auto;
    width: min(800px, 96%);
    background-color: white;
}

main {
    padding-left: 1em;
    padding-right: 1em;
}

a {
    word-break: break-all;
}

:is(ol,ul) {
    padding-left: 2em;
}

.menu {
    padding: 12px;
    color: black;
    background-color: lavender;
    border: solid 0.1em black;
    filter: drop-shadow(0 0 0.1em black);
    font-size: 1em;
}

button:hover {
    background-color: lightpink;
    color: black;
}

.calc {
display: block;
width: calc(100px + 10px);
}

.var {
background-color: var(--example-color);
}

.rgb {
    background: rgb(147, 223, 255, 0.8);
}

.url {
background: url('texture.webp') no-repeat;
}

footer {
    text-align: center;
    padding-top: 1.5em;
    background-color: pink;
    padding-bottom: 1.5em;
}

footer a {
    color: black;
}

footer button {
    border: solid 0.1em black;
    margin-left: 0.5em;
    filter: drop-shadow(0 0 0.1em black);
}