@import url('crimson-pro.css');

@font-face {
    font-family: 'Geologica';
    src: url('/static/fonts/Geologica.ttf') format('truetype');
    font-variation-settings: "wght" 150;
    font-display: swap;
    font-style: normal;
}


:root {
    --color-bg: oklch(0.15 0.02 300);
    --color-link: oklch(0.9653 0.0203125 60);
    --color-main: oklch(0.9199 0.04843750000000001 60);
    --color-subtle: oklch(0.7 0.1 60);
    --color-subtle-bg: oklch(0.2 0.03 0);
    --font-header: 'CrimsonPro-Variable';
    --font-body: 'Geologica';

    --stripe-1: oklch(0.8 0.18 60);
    --stripe-2: oklch(0.7 0.18 30);
    --stripe-3: oklch(0.6 0.18 0);
    --stripe-4: oklch(0.5 0.18 330);
    --stripes-left:
        var(--stripe-1) 0%, var(--stripe-1) 24%,
        var(--stripe-2) 26%, var(--stripe-2) 49%,
        var(--stripe-3) 51%, var(--stripe-3) 74%,
        var(--stripe-4) 76%, var(--stripe-4) 99%,
        var(--color-bg) 101%;
    --stripes-right:
        var(--stripe-4) 0%, var(--stripe-4) 24%,
        var(--stripe-3) 26%, var(--stripe-3) 49%,
        var(--stripe-2) 51%, var(--stripe-2) 74%,
        var(--stripe-1) 75%, var(--stripe-1) 99%,
        var(--color-bg) 101%;
    --stripe-size: 3rem;
}

body {
    background: var(--color-bg);
    color: var(--color-main);
    font-family: var(--font-body);
    display: flex;
    flex-direction: column;
    align-items: center;
}

main {
    margin-inline: auto;
    text-align: center;

    display: flex;
    flex-direction: column;
    /* align-items: center; */
    width: clamp(12rem, 100vw, 60rem);
    box-sizing: border-box;

    position: relative;
}

h1, h2{
    font-family: var(--font-header);
}

h2 {
    font-size: clamp(2.4rem, 6vw, 3rem);
}

h3 {
    font-size: 1.8em;
    font-variation-settings: "wght" 300;
}

p {
    font-size: 1.2em;
    line-height: 1.5em;
}

header {
    gap: .3rem;
}

nav {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    
    gap: clamp(.1rem, 1vw, 1.2rem);
    
    z-index: 6;

    font-size: clamp(1.2rem, 3vw, 1.8rem);
    font-variation-settings: "wght" 600;
}

.stripe-up, .stripe-down {
    height: var(--stripe-size);
}

.subtle {
    color: var(--color-subtle);
}

.pronouns {
    margin-top: -.9rem;
    font-family: 'CrimsonPro-Variable';
}

.homesection {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-block: 1.2rem;

    /* width: 100%; */
    border-width: 0;
    /* border-style: solid; */
    border-color: transparent;
}

.homesection:last-child {
    border: none;
}
.homesection:last-child .projectblock:first-of-type {
    border-top: none;
}

/* .homesection:last-child .projectblock:last-of-type {
    margin-bottom: calc(var(--stripe-size) * -1);
} */

#projects {
    border-width: 0;
    border-style: solid;
    padding-block: 1.2rem;
}

.projectblock {
    border-width: 0;
    border-style: solid;
    border-color: transparent;
    padding-block: 1.2rem;
    /* width: 100%; */
}

.projectblock > div {
    display: flex;
    gap: 1.2rem;
    padding-inline: 1.2rem;
    /* margin-inline: -1.8rem; */
}

.projectblock > h3 {
    padding-inline: 1.2rem;
    padding-bottom: 1.2rem;
}

.projectblock h3 a {
    color: var(--color-main);
    text-decoration: none;
}

.projectblock a:hover {
    text-decoration: underline;
}

.projectimage, .aboutimg {
    padding: .6rem;
    border: 4px solid var(--stripe-1);
    border-radius: 2rem;
    background: var(--color-subtle-bg);
    position: relative;
}

.projectimage img, .aboutimg img {
    width: 100%;
    border-radius: 1.4em;
}

.projectimage{
    width: 50%;
    box-sizing: border-box;
    flex-basis: 0;
    flex-grow: 1;
    height: fit-content;
}

.projectimage::after, .aboutimg::after {
    border: 4px solid var(--stripe-3);
    content: '';
    position: absolute;
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    top: -8px;
    left: -8px;
    border-radius: calc(2rem + 4px);
    z-index: -6;
}

.projectdesc {
    flex-grow: 1;
    flex-basis: 0;
}

.projectdesc ul {
    display: flex;
    gap: 1.2rem;
    height: 2.4rem;
    align-items: center;
    margin-bottom: .6rem;
}

.projectdesc li {
    border: 2px solid oklch(0.4 0.06 60);
    padding: .3rem;
    border-radius: .6rem;
    background: var(--color-subtle-bg);
}

.projectdesc div {
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: .9rem;
}

figcaption {
    font-variation-settings: "slnt" -12;
    text-align: center;
}

.skillsection {
    display: flex;
    justify-content: space-around;
    width: 100%;
    column-gap: 2.4rem;
    row-gap: 1.2rem;
    flex-wrap: wrap;
    margin-top: 1.2rem;
    padding-inline: 1.2rem;
    box-sizing: border-box;
}

.skillblock, .skillblock div {
    display: flex;
    flex-wrap: wrap;
}

.skillblock {
    flex-direction: column;
    gap: .6rem;
}

.skillblock div {
    gap: 1.2rem;
    justify-content: center;
}

.skillblock ul {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

h2 a:link, h2 a:visited {
    color: var(--color-main);
    text-decoration: none;
}

*:link, *:visited {
    color: var(--color-bg);
}

footer {

    position: fixed;
    bottom: 0;
    color: var(--color-bg);
    height: var(--stripe-size);
    width: calc(clamp(12rem, 100vw, 60rem) - calc(var(--stripe-size) * 2));
    background: linear-gradient(
        90deg,
        transparent,
        oklch(0.8 0.18 60 / .5) 10%,
        oklch(0.8 0.18 60 / .5) 90%,
        transparent 
    );

    font-variation-settings: "wght" 300;
    font-size: 1.2rem;

    dl {
        display: flex;
        column-gap: 1.2rem;
        justify-content: center;
        height: 3rem;
        align-items: center;
    }
    
    details {
        height: 100%;
    }

    details::details-content {
        content-visibility: visible;
    }

    dt {
        font-variation-settings: "wght" 600;
    }
    dt::after {
        content: '•';
        font-size: .9rem;
        margin-left: .3rem;
    }

    dl div {
        display: flex;
        gap: .3rem;
        width: fit-content;
        align-items: baseline;
    }

    a {
        text-decoration: none;
    }

    a:hover {
        text-decoration: underline;
    }

    summary {
        display: none;
    }

    summary::before, summary::after {
        content: '▴';
    }

}

@media (max-width: 720px) {

    :root {
        --stripe-size: 1.8rem;
    }

    h3 {
        font-size: 1.5em;
    }

    .projectimage, .aboutimg {
        float: none;
        width: 100%;
    }

    .projectblock > div {
        flex-direction: column;
    }

    .projectdesc div, .abouttext > div > div {
        text-align: center;
    }

    .projectdesc ul {
        justify-content: center;
    }

    footer {
        width: 50%;
    }

    footer details {
        height: 100%;
        text-align: center;
        line-height: 1.8rem;
    }

    footer summary {
        display: flex;
        justify-content: center;
        gap: .6rem;
        font-variation-settings: "wght" 600;
    }

    footer:has(details[open]) summary::before,
    footer:has(details[open]) summary::after {
        content:'▾';
    }

    footer dl {
        background:
            linear-gradient(
                300deg,
                var(--stripe-3) 10%,
                var(--stripe-2) 10%,
                var(--stripe-2) 20%,
                var(--stripe-1) 20%,
                var(--stripe-1));
        text-align: center;
        height: unset;
        position: absolute;
        bottom: 100%;
        flex-direction: column;
        height: fit-content;
        margin-inline: auto;
        left: 50%;
        translate: -50%;
        margin-bottom: .6rem;
        padding: .6rem;
        border-radius: 2rem;
        border: 4px outset var(--stripe-4);
        row-gap: .6rem;
        box-shadow: 0 0 6px var(--color-bg)
    }

    footer dl > div {
        align-items: center;
        flex-direction: column;
        gap: 0;
        line-height: 1.5rem;
    }

    footer dt::after {
        content: '';
    }

    footer details:not([open])::details-content {
        content-visibility: auto;
    }
}

* {
    margin: 0;
    padding: 0;
    list-style: none;
    text-wrap: balance;
}

.homesection.stripe-left, .homesection.stripe-right,
.stripe-left .projectblock, .stripe-right .projectblock {
    border-style: solid;
}

.gallery {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    column-gap: 6rem;
    row-gap: 3rem;
    text-align: center;
    justify-content: space-evenly;
    padding: 3rem;
    margin-bottom: 1.8rem;
}

.galleryimg {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
}

.pixel img{
    image-rendering: pixelated;
}

.projectlink {
    background:
        linear-gradient(
            300deg, 
            var(--stripe-3) 2.1rem,
            var(--stripe-2) 2.1rem,
            var(--stripe-2) 50%,
            var(--stripe-1) 50%);
    border-radius: 10rem;
    padding: 0.2rem;
    padding-inline: .6rem;
    border: 4px outset var(--stripe-4);
    width: fit-content;
    text-decoration: none;
    align-self: flex-end;
    font-variation-settings: "wght" 400;
    display: flex;
    align-items: center;
    gap: .6rem;
    color: var(--color-bg);
}

.projectlink::after {
    content: '→';
    line-height: 0;
    font-size: 1.2rem;
    font-variation-settings: "wght" 500;
}

.projectlink:hover {
    background: var(--color-main);
    border-color: var(--stripe-3);
}

nav a {
    text-decoration: none;
    height: 100%;
    display: flex;
    align-items: center;
}

nav a:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

nav > span {
    display: flex;
    gap: clamp(.3rem, 1vw, 1.2rem);
}
nav > span:not(:last-child)::after {
    content:'•';
    color: var(--color-bg);
}