:root {
    --ff: Courier, monospace;
    --text-color: #424242;
    --link-color: #690077;
    --background-color: #bababa;
    --background-color: #dddddd;
}

/* Basics */
*, *:before, *:after { box-sizing: border-box; text-align: left; }
html {
    font-family: var(--ff);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; 
    -webkit-text-size-adjust: none;
    color: var(--text-color);
    background-color: var(--background-color);
}
body {
    padding: 0;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; 
    -webkit-text-size-adjust: none; 
}
a {
    /* color: #690077 !important; */
    color: var(--link-color);
    text-decoration: none;
    text-underline-offset: 3px;
}
a:hover, nav a.active {
    /* color: #690077; */
    color: var(--link-color);
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-color: var(--link-color);
    text-decoration-thickness: 1px;
    text-decoration-skip-ink: auto;
}

nav {
    padding: 20px;
    line-height: 22px;
}