:root {
    --font-default: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-primary: "Noto Sans", sans-serif;
    --font-secondary: "Noto Sans", sans-serif;
    --color-default: #233348;
    --color-primary: #233348;
    --color-backgrounds: #997F5D;
    --color-shadows: #997F5D;
    --color-secondary: #664F8C;
    --color-bright: #F3F1F4;

    --background-topbar: #735A51;
    --background-header: #A6938F;
    --background-footer: #735A51;
    scroll-behavior: smooth;
}

html, body {
    width: 100vw;
    overflow-x: hidden;
}

body {
    font-family: var(--font-default);
    color: var(--color-default);
}

a {
    color: var(--color-primary);
    text-decoration: none;
}

a:hover {
    color: var(--color-secondary);
    text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-primary);
}

#topbar {
    width: 100vw;
    background: var(--background-topbar);
    color: var(--color-bright);
}

#topbar a {
    color: var(--color-bright);
}

header {
    width: 100vw;
    background: var(--background-header);
    color: var(--color-bright);
    background-size: 100%;
}

#content {
    width: 100vw;
    min-height: 20vh;
    padding: 3em 0 3em 0;
}

footer {
    width: 100vw;
    background: var(--background-footer);
    color: var(--color-bright);
}

footer a {
    color: var(--color-bright);
}

footer a:hover {
    color: var(--color-bright);
}

.no-list {
    list-style: none;
    padding: 0 0 0 1em;
}