:root {
    --serif: 'EB Garamond', serif;
    --sansserif: 'Lato', sans-serif;
    --display: 'EB Garamond', serif;
    --fontawesome: 'Font Awesome 6 Pro';
    --color: black;
    --color-dim: #767676;
    --background: oklch(0.6469 0.1332 253.59 / 25%);
    --border: #DDDDDD;
    --primary: #4E6585;
    --secondary: #AC912A;
    --tertiary: #AC2A2A;
    --selection: #B7BBC0;
}

header,
footer {
    --background: #FFFFFF;
    --link: var(--secondary);
    --border: white;
    --background-hover: #EEEEEE;
    --border-hover: white;
    --color: #666666;
}

.navigation-bar {
    --background: var(--primary);
    --background-hover: var(--primary);
}

body, main {
    --background: var(--background);
    --border: var(--border);
    --background-hover: var(--background);
    --border-hover: var(--border);
    --link: var(--secondary);
    --corner-radius: 0.25rem;
}