:root {

    /* fonts */
    --font-1: 'Roboto', ui-rounded, 'Hiragino Maru Gothic ProN', Quicksand, Comfortaa, Manjari, 'Arial Rounded MT', 'Arial Rounded MT Bold', Calibri, source-sans-pro, sans-serif;
    --font-2: 'DM Serif Display', Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
    --font-mono: Consolas, 'Nimbus Mono PS', 'Courier New', monospace;

    /* colors */
    --color-bg: #fbf7f4;
    --color-text: #141414;
    --color-text-deco: #B185A7;

}

/* globals */
* {
    text-rendering: optimizeLegibility;
    font-size: inherit;
}


/* semantic elements */

html {
    scroll-behavior: smooth;
}

/* overscroll background pseudo-element */
html::before{
    z-index: -1;
    position: fixed;
    height: 100vh;
    width: 100vw;
    content: "";

    background: conic-gradient(from 90deg, rgba(0, 0, 0, 0) 0deg, rgba(0, 0, 0, 0) 90deg, oklch(0.922 0 0) 90deg, oklch(0.922 0 0) 180deg, rgba(0, 0, 0, 0) 180deg, rgba(0, 0, 0, 0) 270deg, oklch(0.922 0 0) 270deg, oklch(0.922 0 0) 360deg);
    background-size: 10px 10px;
}


@media screen and (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

body {
    min-height: 100vh; /* overscroll - ensure body always covers full page */
    display: flex; /* overscroll - prevent margins from collapsing outside body */
}

#overscroll-wrapper {
    min-height: 100vh;
    min-width: 100vw;
    background-color: var(--color-bg);
}

main {
    max-width: 400px;
    padding: 20px;
    margin: auto;
    margin-top: 10vh;
}

section {
    height: 80vh;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-2);
    line-height: 1.2em;
    font-variant-ligatures:7common-ligatures;
    -moz-font-feature-settings: "liga", "clig";
    -webkit-font-feature-settings: "liga", "clig";
    font-feature-settings: "liga", "clig";
}

h1 {
    font-size: 2em;
}

h2 {
    font-size: 1.25em;
}

p, li {
    font-family: var(--font-1);
    font-weight: 300;
    line-height: 1.4em;
    font-size: 1.2em;
}

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

a:hover,
a:focus {
    background-color: var(--color-text-deco);
    color: #fFffff;
}

a:active,
a:visited {
    color: var(--color-text);
}

hr {
    height: 1px;
    border-width: 0;
    background-color: #dddddd;
}




/* classes */



/* specials */







/* old 

blockquote {
    font-family: minion-pro-display, serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.5em;
    margin: 2rem 1.5rem 2rem 1.5rem;
    border-left: 4px solid #900;
    padding-left: 8px;
}




img {
    max-width: 100%;
    height: auto;
}

.button {
    display: inline-block;
    outline: none;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    border-radius: 500px;
    transition-property: background-color, border-color, color, box-shadow, filter;
    transition-duration: .3s;
    border: 1px solid transparent;
    letter-spacing: 2px;
    width: 75%;

    text-transform: uppercase;
    white-space: normal;
    font-weight: 700;
    text-align: center;
    padding: 16px 14px 18px;
    color: #616467;
    box-shadow: inset 0 0 0 2px #616467;
    background-color: transparent;
    height: 48px;
}

.button:hover {
    color: #fff;
    background-color: #616467;
}

blockquote {
    font-family: minion-pro-display, serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.5em;
    margin: 2rem 1.5rem 2rem 1.5rem;
    border-left: 4px solid #900;
    padding-left: 8px;
}









hr {
    height: 1px;
    border-width: 0;
    margin-right: 10%;
    color: #dddddd;
    background-color: #dddddd;
}



/* LANDING PAGE */




.socials {
    padding-top: 20px;
}

.projects {
    padding-top: 10px;
}

.books {
    padding-top: 0;
}

.bottom {
    padding-top: 30px;
}

.socialsDescription {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1em;
    line-height: 1.4em;
    color: #900;
}

.socialsLinks {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: .8em;
    line-height: 1.8em;
    color: #888;
}

.slash {
    color: #900;
}

/* LANDING PAGE END */



/* Some color ideas
#
#B1B695 (yellowish pea green)
#FCD0A1 (weird orangish yellow)
#63535B (brownish purple-eggplant)
#A18276 (yellowish brown)
#53917E (emerald with a hint of yellow)
#00BD9D (upbeat yellowish emerald)
#FCDFA6 (orange-yellow melon color
#AAC0AA (super-chill greenish blue with slate)
#8BD7D2 (toned down blue green)
#95A472 (mossy yellowish green)
#C3A29E (tannish purplish)
#B185A7 (light violet)
#
*/


.checker {
    /* checker background */
    background: conic-gradient(from 90deg, rgba(0, 0, 0, 0) 0deg, rgba(0, 0, 0, 0) 90deg, oklch(0.922 0 0) 90deg, oklch(0.922 0 0) 180deg, rgba(0, 0, 0, 0) 180deg, rgba(0, 0, 0, 0) 270deg, oklch(0.922 0 0) 270deg, oklch(0.922 0 0) 360deg);
    background-size: 8px 8px;

    background-attachment: fixed;
}