@import "reset.css";

:root {
    --dark: #201d20;
    --blue: #7b84a7;
    --pink: #c56981;
    --lite: #a3a29a;
}

html {
    background-color: var(--dark);
}

body {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    font-family: sans-serif;
}

body,
a {
    color: var(--lite);
    text-decoration-color: var(--pink);
}

h1,
h2 {
    color: var(--blue);
}

h1 a,
h2 a {
    color: var(--blue);
    text-decoration-style: wavy;
}

header {
    max-width: 70ch;
    width: 100%;
    margin: 2rem auto;
    padding: 0 2rem;
}

nav {
    display: flex;
    align-items: center;
}

nav h1,
nav a {
    font-style: italic;
}

nav > ul {
    display: flex;
    margin-left: auto;
}

nav a {
    padding: 1rem;
}

nav li {
    list-style-type: none;
}

main {
    flex: 1;
    max-width: 70ch;
    width: 100%;
    padding: 0 1rem;
    margin: 0 auto;
}

main :is(h1, h2, h3, h4, h5, h6) {
    margin: 1rem 0;
}

main pre {
    padding: 1rem;
    margin: 0.5rem;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 0.5rem;
}

footer {
    margin: 2rem auto;
    width: fit-content;
}