@font-face {
    font-family: 'CothamSansRegular';
    src: url('/fonts/CothamSans.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Bagnard';
    src: url('/fonts/Bagnard.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


:root {
    --color-bg-1:    oklch(0.97 0 0);
    --color-bg-2:    oklch(1.00 0 0);
    --color-text-1:  oklch(0.20 0 0);
    --color-text-2:  oklch(0.35 0 0);
    --color-theme-1: oklch(0.6 0.05 170);
    /*
    --color-theme-2: oklch(0.6 0.105 281);
    --color-theme-3: oklch(0.532 0.137 2.78);
    --color-theme-4: oklch(0.905 0.067 91.51);
    --color-theme-5: oklch(0.283 0.029 281.56);
    */

    --font-body: CothamSansRegular, serif;
    --font-title: Bagnard, sans;
    --font-size-1: 3.0rem;
    --font-size-2: 2.5rem;
    --font-size-3: 2.0rem;
    --font-size-4: 1.5rem;
    --font-size-5: 1.0rem;
    --font-size-6: 1.0rem;

    --spacing-1: 1.0rem;
    --spacing-2: 0.5rem;
    --spacing-3: 0.25rem;

    --border-radius: 0.5rem;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-bg-1:   oklch(0.27 0.0187 167.75);
        --color-bg-2:   oklch(0.37 0.0187 167.75);
        --color-text-1: oklch(0.92 0 0);
        --color-text-2: oklch(0.85 0 0);
        /*
        --theme-1: oklch(42.0% 0.0187 167.75);
        --theme-2: oklch(38.0% 0.0187 167.75);
        --theme-3: oklch(34.0% 0.0187 167.75);
        --theme-4: oklch(30.0% 0.0187 167.75);
        --theme-5: oklch(27.0% 0.0187 167.75);
        */
    }
}


/************************/
/* Reset Browser Styles */
/************************/

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	box-sizing: border-box;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


/***************/
/* Base Styles */
/***************/

html {
    font-weight: normal;
    font-style: normal;
    font-family: var(--font-body);

    background-color: var(--color-bg-1);
    color: var(--color-text-1);
}

body {
    line-height: 1.2;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-title);
    margin-top: var(--spacing-1);
}
h1 { font-size: var(--font-size-1); }
h2 { font-size: var(--font-size-2); }
h3 { font-size: var(--font-size-3); }
h4 { font-size: var(--font-size-4); }
h5 { font-size: var(--font-size-5); }
h6 { font-size: var(--font-size-6); }

a {
    color: var(--color-text-1);

    &:visited {
        color: var(--color-text-2);
    }

    &:hover {
        color: var(--color-theme-1);
    }
}

ul {
    margin-left: 3rem;

    li::before {
        display: inline-block;
        width: 1.5rem;
        padding-right: 1rem;
        margin-left: -2.5rem;
        text-align: right;
        content: "•";
    }

    ul {
        margin-left: 1.5rem;

        li::before { content: "◦"; }

        ul {
            li::before { content: "▪"; }
        }
    }
}

ol {
    counter-reset: ol-nums;
    margin-left: 3rem;

    li {
        counter-increment: ol-nums;
    }

    li::before {
        display: inline-block;
        width: 2.0rem;
        padding-right: 0.5rem;
        margin-left: -2.5rem;
        text-align: right;
        content: counter(ol-nums) ")";
    }

    ol {
        counter-reset: ol-roman;
        margin-left: 1.5rem;

        li { counter-increment: ol-roman; }
        li::before { content: counter(ol-roman, lower-roman) ")"; }

        ol {
            counter-reset: ol-greek;

            li { counter-increment: ol-greek; }
            li::before { content: counter(ol-greek, lower-greek) ")"; }
        }
    }
}

pre {
    display: block;
    margin: var(--spacing-1) auto;
    padding: var(--spacing-1);
    max-width: 680px;
    border-style: solid;
    border-width: 0.15rem;
    border-color: var(--color-bg-2);
    border-radius: var(--border-radius);
    overflow-x: scroll;

    scrollbar-color: var(--color-theme-1) var(--color-bg-2);
}

code {
    font-family: monospace;
}

strong, b {
    font-weight: bold;
}

em, i {
    font-style: oblique;
}

p {
    margin: var(--spacing-1) 0rem;
}

::selection{
    background-color: var(--color-theme-1);
    color: oklch(0.283 0.029 281.56);
}

main {
    /* TODO: Determine a good max-width size. */
    max-width: 60rem;
    margin: 0rem auto;
    padding: var(--spacing-2);
}

header {
    max-width: 60rem;
    margin: 0rem auto;
}

footer {
    max-width: 60rem;
    margin: 0rem auto;
    margin-top: var(--spacing-1);
    text-align: center;
    color: var(--color-bg-2);
}


/*********************/
/* Cross Site Styles */
/*********************/

.nav-bar {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: baseline;

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

    .logo {
        padding: var(--spacing-3) var(--spacing-1);
        font-family: var(--font-title);
        font-size: var(--font-size-3);
        border-bottom: solid 0.25rem;
        border-color: transparent;

        &:hover { border-color: var(--color-theme-1); }
    }

    .sections {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: baseline;
        gap: var(--spacing-2);

        .section {
            padding: var(--spacing-3) var(--spacing-1);
            font-family: var(--font-title);
            font-size: var(--font-size-4);
            border-bottom: solid 0.25rem;
            border-color: transparent;

            &:hover { border-color: var(--color-theme-1); }
        }
    }
}


/************************/
/* Page Specific Styles */
/************************/

/* Front Page */
#homepage {
    position: absolute;
    width: 100vw;
    height: 100vh;
    overflow: hidden;

    display: grid;
    grid-template-rows: 1fr auto 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
        "tl tc tr"
        "cl c  cr"
        "bl bc br";
    row-gap: 2rem;

    > h1, > h2 {
        transition-property: scale;
        transition-duration: 0.5s;
        transition-timing-function: ease-in;
    }

    > #homepage-title {
        margin: auto;
        text-align: center;
        grid-area: c;

    }

    > #homepage-excursus {
        grid-area: bl;
        font-family: var(--font-title);
        font-size: 2em;
        padding-top: 2em;

        display: flex;
        justify-content: flex-end;
        align-items: flex-start;

        transition-property: scale;
        transition-duration: 0.5s;
        transition-timing-function: ease-in;
        /* TODO: both coords are arbitrary, is there some way to calculate them? */
        transform-origin: 150% -50%;
    }

    > #homepage-projects {
        grid-area: br;
        font-family: var(--font-title);
        font-size: 2em;
        padding-top: 2em;
        opacity: 100% !important;

        transition-property: scale;
        transition-duration: 0.5s;
        transition-timing-function: ease-in;
        /* TODO: both coords are arbitrary, is there some way to calculate them? */
        transform-origin: -50% -50%;
    }

    > #homepage-start-msg {
        text-align: center;
        opacity: 0%;
        grid-area: bc;

        /* TODO: y-coord is arbitrary, is there some way to calculate it? */
        transform-origin: 50% -50%;
    }
    > #homepage-start-msg.a-homepage-start-msg {
        animation-name: a-homepage-start-msg-blink;
        animation-delay: 5s;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        animation-timing-function: ease-in;
    }

    .t-homepage-zoom {
        scale: 100;
    }
}

@keyframes a-homepage-start-msg-blink {
    0% {
        opacity: 0%;
    }

    100% {
        opacity: 100%;
    }
}

#lost-in-space {
    display: block;
    width: 100vw;
    height: 100vh;
    scale: 0%;

    transition-property: scale;
    transition-duration: 0.5s;
    transition-timing-function: ease-out;
}

#lost-in-space.t-lost-in-space-zoom {
    scale: 1;
}

/* Section Pages */
.projects {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-auto-rows: 10rem;
    gap: 1rem;
}

@media(min-width: 950px) {
    .projects {
        grid-template-columns: repeat(2, 1fr 2fr);
    }
}

.project-thumbnail {
    width: 100%;
    height: 100%;
    overflow: hidden;

    > picture > img {
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-height: 100%;
    }
}

.project-description {
    overflow: hidden;
    mask-image: linear-gradient(to bottom, var(--color-text-1) 95%, transparent 100%);

    text-decoration: none;
    &:visited { color: var(--color-text-1); }
    &:hover { color: var(--color-theme-1); }

    > header {
        font-size: var(--font-size-3);
    }
}