:root {
    --ff: Courier, monospace;
    --text-color: #424242;
    --link-color: purple;
    --background-color: #dddddd;
    --border-color: rgb(176, 176, 176);
    --p-fs: 16px;
    --p-lh: 22px;
}

/* 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;
}
a {
    /* color: #690077 !important; */
    color: var(--link-color);
    text-decoration: underline;
    /* text-underline-offset: 3px; */
    text-decoration-color: var(--link-color);
    text-decoration-thickness: 1px;
    text-decoration-skip-ink: all;
}
a:hover {
    /* 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: all;
}

nav {
    padding: 20px;
    font-size: var(--p-fs);
    line-height: var(--p-lh);
}

nav a, .projects a .name, .chronological-item a {
    text-decoration: none;
}

nav a:hover, nav a.active, .projects a .name:hover, .chronological-item a:hover {
    text-decoration: underline;
    text-decoration-color: var(--link-color);
    text-decoration-thickness: 1px;
    text-decoration-skip-ink: all;
}

#search-field {
    color: var(--link-color);
    outline: none;
    border: none;
    background: transparent;
    font-family: var(--ff);
    font-size: var(--p-fs);
    line-height: var(--p-lh);
    height: .9em;
    padding: 0;
    margin: 0;
    cursor: text;
    display: inline-block;
    min-width: 4.5em;
    white-space: nowrap;
    vertical-align: baseline;
}

#search-field:hover {
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-color: var(--link-color);
    text-decoration-thickness: 1px;
    text-decoration-skip-ink: auto;
}

#search-field:focus {
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-color: var(--link-color);
    text-decoration-thickness: 1px;
    text-decoration-skip-ink: auto;
}

#site-info {
    padding: 20px;
    margin-top: 80px;
}
#site-info p {
    font-size: var(--p-fs);
    line-height: var(--p-lh);
}

hr {
    border: 0;
    border-bottom: 1px solid var(--border-color);
}