/* COLOR PALETTE
------------------------------------*/
:root {
    --color-0: oklch(0.099 0.035 279);
    --color-1: oklch(from var(--color-0) 0.167 c h);
    --color-2: oklch(from var(--color-0) 0.202 c h);
    --color-3: oklch(from var(--color-0) 0.239 c h);
    --color-4: oklch(from var(--color-0) 0.282 c h);
    --color-5: oklch(from var(--color-0) 0.326 c h);
    --color-6: oklch(from var(--color-0) 0.397 c h);
    --color-7: oklch(from var(--color-0) 0.528 c h);
    --color-8: oklch(from var(--color-0) 0.636 c h);
    --color-9: oklch(from var(--color-0) 0.805 c h);
    --full-gradient: var(--color-0), var(--color-1), var(--color-2), var(--color-3), var(--color-4), var(--color-5), var(--color-6), var(--color-7), var(--color-8), var(--color-9);
    --color-highlight-1: oklch(from var(--color-7) l 0.213 h);
    --color-highlight-2: oklch(from var(--color-0) 0.735 0.118 h);
    --gradient-bg: linear-gradient(45deg, var(--color-0) 20%, var(--color-4) 80%);
    --gradient-bg-trans-val: 0.73;
    --gradient-bg-trans: linear-gradient(45deg, oklch(from var(--color-0) l c h / var(--gradient-bg-trans-val)), oklch(from var(--color-3) l c h / var(--gradient-bg-trans-val)));

    /* Borders */
    --default-border-size-pixels: 2px;
    --default-border-size: var(--default-border-size-pixels) solid;
    --default-border-color: var(--color-highlight-1);
    --default-border: var(--default-border-size) var(--default-border-color);
    --default-border-radius: 1rem;
    --bright-border: var(--default-border-size) var(--color-highlight-2);
    --fancy-border-gradient: linear-gradient(
        to right, 
        var(--color-highlight-1),
        var(--color-9)
    ) 1;
}


/* GLOBAL STYLES 
------------------------------------*/
*, *::before, *::after {
    box-sizing: inherit;
}
html {
    box-sizing: border-box;

    /* Default Font */
    font-family: "Play", sans-serif;
    font-weight: 400;
    font-style: normal;
    text-shadow: calc(2.25 * 0.0625em) calc(2.25 * 0.0625em) calc(0.0625em) var(--color-5);
}
html, body {
    min-block-size: 100vh;
}
body { margin: 0; }
.content-wrapper {
    margin-block: 0;
    margin-inline: auto;
    padding: .9375rem;
    max-inline-size: min(100%, 56.25rem);
}
.hidden { display: none; }
.card-background {
    padding: 1rem;

    background-color: var(--color-2);

    border: var(--default-border);
}
/* Typography */
body, .default-typography {
    /* Default Typography */
    font-size: 0.9375rem;
    line-height: 1.5rem;
    color: var(--color-9);
}
h1, h2, h3,
.h1, .h2, .h3 {
    margin: 0;
    
    font-family: "Bruno Ace SC", sans-serif;
    font-weight: 400;
    font-style: normal;

    text-shadow: calc(3 * 0.0625rem) calc(3 * 0.0625rem) calc(0.0625rem) var(--color-4);
}
h1, .h1 {
    font-size: 3.75rem;
    line-height: 1.05;
    margin-bottom: 1rem;
}
h2, .h2 {
    font-size: 2.25rem;
    margin-block-end: 1.125rem;
    line-height: 1.2;
}
h3, .h3 {
    font-size: 1.5rem;
}
/* Backgrounds */
.background-holder {
    position: fixed;
    z-index: -100;
    block-size: 100vh;
    inline-size: 100vw;
}
.background-holder.site {
    background: var(--gradient-bg);
}

/* Links */
a:hover { text-decoration: none; }
a {
    color: var(--color-highlight-1);

    &:hover {
        color: var(--color-highlight-2);
    }
}
.btn {
    display: inline-block;

    width: fit-content;
    padding: 0.4375rem;

    background: var(--color-2);
    color: var(--color-9);

    border: var(--bright-border);

    text-decoration: none;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    line-height: 1;
}
a.btn:hover, button.btn:active {
    color: #fff;
    background: oklch(from var(--color-highlight-1) calc(l * 0.05) c h / 0.75);
    box-shadow: inset 0 0 .25rem var(--color-highlight-2);
    border: var(--default-border-size);
    border-image: var(--fancy-border-gradient);
}


/* NAV
------------------------------------*/
.logo {
    max-inline-size: 5.625rem;
}
.navWrap {
    position: sticky;
    inset-block-start: 0;
    z-index: 99;
    block-size: 3rem;
    inline-size: 100%;
    border-block-end: var(--bright-border);

    background: var(--color-1);
    
    display: flex;
    align-items: center;
}
.navWrap > .content-wrapper {
    inline-size: 100%;
    padding-block: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
input#navToggle {
    display: none;
}
input#navToggle ~ label {
    position: relative;
    padding: 0.25rem;
    inline-size: 2rem;
    block-size: 2rem;
}
input#navToggle ~ label > span,
input#navToggle ~ label > span::before,
input#navToggle ~ label > span::after {
    content: "";
    display: block;
    position: absolute;
    inset-block-start: 0.75rem;
    block-size: 0.125rem;
    inline-size: 1.75rem;
    opacity: 1;
    background: #fff;
    transition: 0.14s ease-in-out;
}
input#navToggle ~ label > span::before {
    inset-block-start: -0.5rem;
}
input#navToggle ~ label > span::after {
    inset-block-start: 0.5rem;
}
#navToggle:checked ~ label > span {
    inline-size: 0;
    background: oklch(0.1822 0 / 0);
}
#navToggle:checked ~ label > span::before {
    transform: rotateZ(45deg);
    inset-block-start: 0;
}
#navToggle:checked ~ label > span::after {
    transform: rotateZ(-45deg);
    inset-block-start: 0;
}
#navToggle:checked ~ nav {
    inset-inline-start: 0;
}
nav {
    position: absolute;
    z-index: -1;
    inset-block-start: 3rem;
    inset-inline-start: -110%;
    inline-size: 100%;
    transition: 0.22s ease-in-out;

    anchor-name: --nav;
}
nav::after {
    content: "";
    position: absolute;
    inset-block-start: 0;
    z-index: -1;
    block-size: 100vh;
    inline-size: 100vw;
    background-color: var(--color-2);
    background-size: cover;
}
nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
nav ul li > a {
    display: inline-block;
    text-decoration: none;
    inline-size: 100%;
    padding: 0.75rem 1rem;
    color: var(--color-9);
    border-block-end: var(--default-border);
    background: var(--color-2);
    transition: 0.14s ease-in-out;
}
nav ul li > a:hover {
    color: #fff;
    background: var(--color-4);
}
.active-page {
    color: #fff !important;
    background: var(--color-4) !important;
}
nav ul li:last-of-type {
    display: flex;
    padding-block-start: 1.5rem;
    justify-content: center;
}
nav ul li > .btn {
    padding: .75rem;
    font-size: 1rem;

    anchor-name: --contact-button;
}
/* contact popover */
#contact-box:popover-open {
    position: absolute;
    position-anchor: --contact-button;
    container: contact-box / inline-size;

    inset-block-start: anchor(bottom);

    margin: 0 auto;
    border: var(--bright-border);

    inline-size: max(33vw, min(100%, 24.8rem));

    &::backdrop {
        background-color: #000;
        opacity: 0.35;
    }
    & img {
        aspect-ratio: 3/4;
        inline-size: clamp(6rem, 100%, 7.875rem);
        outline: calc(1.5 * var(--default-border-size-pixels)) solid var(--default-border-color);
    }
}
#contact-box-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;

    & * { margin: 0; }
    & > div {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        align-items: center;
    }
}
#contact-box-content-biography { display: none; }
@container contact-box (min-inline-size: 22.5rem) {
    #contact-box-content-wrapper {
        flex-direction: row;
        align-items: start;
        grid-template: auto / 1fr auto;

        & > div { align-items: start; }
    }
}
@container contact-box (min-inline-size: 23.75rem) {
    #contact-box-content-biography { display: block; }
}


/* HOME
------------------------------------*/
.home {
    display: flex;
    flex-direction: column;

    & .content-wrapper {
        flex: 1 0 auto;
        
        & .content-wrapper { padding-inline: 0; }
    }
}


/* RESUME
------------------------------------*/
.resume, .projects-page {
    & header {
        &::before {
            content: '';
            mask-image: linear-gradient(oklch(0 0 0 / 1), oklch(0 0 0 / 0) 90%);
            mask-mode: alpha;
            background: url(../images/bg-planet.jpg) no-repeat bottom / cover;
            display: block;
            block-size: 12.5rem;
        }
    }
    & > * > section {
        margin-block-end: 3.125rem;

        & h2 {
            border-block-end: 2px solid;
            border-image: linear-gradient(
                to right, 
                var(--color-highlight-1),
                var(--color-9)
            ) 1;

        }
    }
}

/* Profile
------------------------------------*/

/* Projects
------------------------------------*/
.project-item {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    margin-inline: 0;

    & img {
        display: block;
        object-fit: contain;
        
        inline-size: 100%;
    }
}
.project-item-content-wrapper {
    /* Yes technically this is flex not grid but the user would never know and it looks better anyways. */
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
}
.project-item-button-wrapper {
    display: flex;
    flex-direction: column;
    margin-block-start: auto;
    gap: .5rem;
    align-items: flex-start;
}
.project-item-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Work Experience
------------------------------------*/
.work-item {
    display: block;
    grid: 1fr / 18.75rem 1fr;
    column-gap: 1.25rem;
}
.work-details p { margin: 0; }
.work-summary { margin-block-end: 1.875rem; }

/* Education
------------------------------------*/


/* FOOTER
------------------------------------*/
footer {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
    text-align: center;

    padding-block: 1rem;
    padding-inline: 3rem;

    background: linear-gradient(to top, var(--color-1), var(--color-4));

    border-block-start: var(--default-border);
}
.socials {
    list-style-type: none;
    padding: 0;

    & li {
        display: inline-block;

        margin-inline-start: .625rem;
    }
    & img {
        inline-size: 2rem;

        &:hover {
            opacity: .5;
        }
    }
}


@media screen and (min-width: 31.25rem) {
    .home {
        background: url(../images/bg-blackhole-2_1080.jpg) no-repeat bottom / cover;
    }
    .home .background-holder { visibility: hidden; }
    .content-bg { 
        background: var(--gradient-bg-trans); 
        padding: 1.25rem; 
        border-radius: var(--default-border-radius);
    }

    .resume {
        & header {
            &::before {
                block-size: 23.4375rem;
            }
        }
    }
    h1 {
        font-size: 4.375rem;
    }
}
/* 750px */
@media screen and (min-width: 46.875rem) {
    .content-wrapper, .content-bg { padding: 1.875rem; }
    
    footer {
        flex-direction: row;
        align-items: baseline;
        text-align: start;
    }
    
    .navWrap {
        block-size: auto;
    }

    .navWrap > .content-wrapper {
        display: grid;
        grid-template-columns: 6.25rem minmax(auto, 68.75rem);
        justify-content: center;
    }

    .navToggleLabel {
        display: none;
    }

    nav {
        position: initial;
        z-index: 100;
    }

    nav ul {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    nav ul li a:not(.btn) {
        background: none;
        border-bottom: none;
    }

    nav::after {
        display: none;
        padding: initial;
    }

    nav ul li:last-of-type {
        display: initial;
        padding: 0 1rem;
        justify-content: center;
    }

    nav ul .btn {
        padding: 0.4375rem;
        font-size: 0.75rem;
    }
    
    #contact-box:popover-open {
        position-anchor: --nav;

        inset: anchor(bottom) anchor(end) auto auto;
        margin: var(--default-border-size-pixels) auto 0;
    }
}
/* 900px */
@media screen and (min-width: 56.25rem) {
    /*
    .project-item {
        flex-direction: row;
    
        & img {
            inline-size: 18.75rem;
        }
    }
    .project-item-content-wrapper {
        flex: unset;
    }
    .project-item-wrapper {
        display: block;
    }
    */
    
    .project-item-wrapper {
        display: grid;
        grid-template: repeat(8, max-content) / repeat(3, 1fr);
    }
    .project-item {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 4;
    }
    
    .work-item { display: grid; }
    .work-summary { margin: 0; }
}