/* DM Mono */
/* Roman */

@font-face {
    font-family: 'DMMono';
    src: url('/assets/fonts/DMMono-Regular.ttf') format('truetype');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'DMMono';
    src: url('/assets/fonts/DMMono-Light.ttf') format('truetype');
    font-style: normal;
    font-weight: 300;
    font-display: swap;
}
@font-face {
    font-family: 'DMMono';
    src: url('/assets/fonts/DMMono-Medium.ttf') format('truetype');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

/* Italic */
@font-face {
    font-family: 'DMMono';
    src: url('/assets/fonts/DMMono-Italic.ttf') format('truetype');
    font-style: italic;
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'DMMono';
    src: url('/assets/fonts/DMMono-LightItalic.ttf') format('truetype');
    font-style: italic;
    font-weight: 300;
    font-display: swap;
}
@font-face {
    font-family: 'DMMono';
    src: url('/assets/fonts/DMMono-MediumItalic.ttf') format('truetype');
    font-style: italic;
    font-weight: 500;
    font-display: swap;
}

:root {
    --background: light-dark(#ffC68f,#865b35);
    --text: light-dark(black,white);
    --text-inverse: light-dark(white, black);
    --text-error: light-dark(#c00, #b00);
    --link: #ff7800;
    --link-active: #ffb775;
    --link-visited: #865b35;

    --highlight: light-dark(white, black);
    --highlight-active: light-dark(#d9d9d9, #262626);
    --shadow: light-dark(#cdcdcd, #323232);
    --shadow-active: light-dark(#acacac, #595959);
    --drop-shadow: light-dark(black, white);
    --button-inner-shadow: light-dark(#a3a3a3, #5c5c5c);
    --button-inner-shadow-active: light-dark(#b3b3b3, #6c6c6c);

    --button-background: light-dark(#e7e7e7, #181818);
    --button-background-active: light-dark(#cdcdcd, #323232);
    --scroll-track-background: light-dark(#e7e7e7, #181818);
    --utility-background: light-dark(#e7e7e7, #181818);
    --window-background: light-dark(white,black);

    --border-primary: light-dark(black, white);
    --border-secondary: light-dark(#181818, #e7e7e7);

    --button-border: var(--border-secondary);
    --nav-border: var(--border-primary);
    --scroll-track-border: var(--border-secondary);
    --window-border: var(--border-primary);

    --window-chrome: light-dark(#ddd,#333);

    /*--button-focus-visible: light-dark(#444,#bbb);*/

    --button-focus-visible: var(--link-active);
}

* {
    box-sizing: border-box;
}

@media not (prefers-reduced-motion: reduce) {
    @view-transition {
        navigation: auto;
    }
    html {
        scroll-behavior: smooth;
    }
}

html {
    color-scheme: light dark;
}

body {
    color: var(--text);
    background-color: var(--background);
    font-family: 'DMMono', monospace;
    font-kerning: normal;
    font-size: 100%;
    font-variant-ligatures: common-ligatures;
    font-weight: 400;
    line-height: 1.444;
    margin: 0;
    padding: 0;
    text-align: left;
    text-size-adjust: 100%;
    display: flex;
    flex-flow: column;
    gap: 0.625rem;
    transition: background 0.3s, color 0.3s;
}

h1, h2, h3, h4, h5, h6, p {
    overflow-wrap: break-word;
}

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



footer {
    font-size: 0.6875rem;
    line-height: 1.2;
    margin: 0 auto;
    p {
        padding: 0;
        margin: 0;
    }
}


nav.main-nav {
    background: var(--window-chrome);
    border-bottom: 1px solid var(--window-border);
    display: flex;
    flex-direction: row;
    //justify-content: space-between;
    gap: 0;
    margin: 0;
    a {
        color: var(--text);
        font-size: 0.8125rem;
        padding: 5px 10px;
        text-decoration: none;
        transition: background 200ms ease-in-out, color 0.3s;
    }
    a:hover, a:focus-visible {
        background: var(--link-active);
        outline: none;
    }
    a:active {
        background: var(--link);
    }
    a[aria-current] {
        background: var(--link);
    }
    a[aria-current]:hover, a[aria-curret]:focus-visible {
        /*background: var(--link-active);*/
        cursor: default;
        outline: none;
    }
    .nav-home {
        padding: 5px 9px 5px 6px;
    }
    .nav-pages {
        display: flex;
        flex-direction: row;
        gap: 0;
    }
}

::-webkit-scrollbar {
    width: 16px;
}

::-webkit-scrollbar-track {
    background: var(--scroll-track-background) url(/assets/chrome/track-pattern.svg) repeat;
    border-left: 1px solid var(--scroll-track-border);
}

::-webkit-scrollbar-thumb {
    background: url(/assets/chrome/handle.svg) center center no-repeat var(--button-background);
    border-left: 1px solid var(--button-border);
    box-shadow: inset 1px 1px var(--highlight), inset -1px -1px var(--button-inner-shadow);
}
::-webkit-scrollbar-thumb:active {
    background: url(/assets/chrome/handle.svg) center center no-repeat var(--button-background-active);
    box-shadow: inset 1px 1px var(--highlight-active), inset -1px -1px var(--button-inner-shadow-active);
}

.locked::after {
    content: url('/assets/images/lock.svg') / "Locked";
    margin-left: 4px;
    vertical-align: middle;
}

.content-window {
    background: var(--window-chrome);
    border: 1px solid var(--window-border);
    box-shadow: 2px 2px 0 0 var(--drop-shadow);
    display: flex;
    flex-direction: column;
    /*height: 87lvh;*/
    margin-inline: auto;
    max-inline-size: 85ch;
    overflow: auto;
    padding: 3px 5px 5px;
    position: relative;
    transition: background 300ms, color 0.3s;
    h1 {
        background: url(/assets/chrome/titlebar-pattern.svg) center center repeat-x var(--window-chrome);
        font-size: 11px;
        font-weight: 500;
        margin: 0 0 4px 0;
        text-align: center;
        span {
            background: var(--window-chrome);
            display: inline-block;
            padding: 0 8px;
        }
        .close {
            background: var(--window-chrome);
            position: absolute;
            left: 4px;
            top: 4px;
            width: 17px;
            height: 15px;
            padding: 1.5px 4px 0 0;
        }
        a {
            background-color: var(--window-chrome);
            border: 1px solid var(--button-border);
            box-shadow: 1px 1px var(--highlight), -1px -1px var(--shadow), 1px 1px var(--highlight) inset, -1px -1px var(--button-inner-shadow) inset;
            display: block;
            height: 11px;
            width: 11px;

        }
        a:active {
            background-color: var(--button-background-active);
            box-shadow: 1px 1px var(--highlight), -1px -1px var(--shadow), -1px -1px var(--button-inner-shadow-active) inset;
        }
    }
    h2 {
        line-height: 1.2;
        margin-block-start: 0;
        font-weight: 500;
    }
    p {
        text-wrap: pretty;
    }
    section {
        background-color: var(--window-background);
        flex: 2;
        border: 1px solid var(--text);
        overflow: auto;
        padding: 8px;
    }
}



.resume {
    section > section {
        border: none;
        margin-block-end: 2em;
        padding: 0;
    }
    section > section > section {
        margin-block-end: 0.5em;
    }
    section > p {
        margin: 0;
    }
    h2, h3, h4 {
        margin-block: 0;
    }
    ul {
        margin-block-start: 0;
    }
}

.portfolio {
    main {
        /*display: flex;
        flex-direction: row;*/
    }
    /*
    .content-window {
        margin-block-end: 10px;
    }
    */
    section {
        padding: 0px;
    }
    ul {
        list-style-type: none;
        padding-inline-start: 0;
    }
    table {
        border-collapse: collapse;
        font-size: 0.875rem;
    }
    thead {
        background-color: var(--utility-background);
        box-shadow: 1px 1px 0 0 var(--highlight) inset;
        position: sticky;
        top: 0;
    }
    td {
        line-height: 1.2;
        padding: 0.375rem 0.75rem;
        vertical-align: top;
    }
    tr:first-child td {
        padding-block-start: 0.5rem;
    }
    tr:last-child td {
        padding-block-end: 1rem;
    }
    th {
        /*box-shadow: rgba(0,0,0, 0.2) 3px 3px 6px 0px inset, rgba(255,255,255, 0.5) -3px -3px 6px 1px inset;*/
        /*box-shadow: rgba(0,0,0, 0.2) 1px 1px 1px 0px inset, rgba(255,255,255, 0.5) -1px -1px 1px 1px inset;*/
        box-shadow: 0px 1px 0px 0px var(--button-inner-shadow);
        font-size: 0.8rem;
        padding: 0.25rem 0.75rem;
    }
    td + td, th + th {
        padding-inline-start:  0.5rem;
    }
    tr + tr {
        td {
            border-top: 1px solid var(--utility-background);
        }
    }
    .tag {
        padding: 1px 4px;
        line-height: 1;
    }
    .tag::before {
        content: url('/assets/images/dot.svg');
        color: #FF7800;
        margin-right: 2px;
        vertical-align: middle;
    }
}

.project {
    figure {
        display: flex;
        flex-direction: column;
        /*gap: 1%;*/
        margin: 0 0 0.5rem 0;
    }

    figure.halves {
        display: inline flow-root;
        margin-inline-end: -10px;
        width: 49.5%;
    }
    figure.thirds {
        display: inline flow-root;
        margin-inline-end: -10px;
        width: calc(98%/3);
    }
    figure.thirds + figure, figure.halves + figure {
        margin-inline-start: 1%;
    }
    figcaption {
        font-size: 0.8rem;
        font-style: italic;
        margin-block-start: 0.5rem;
    }

    img, video {
        width: 100%;
    }
    img.halves {
        width: 49.5%;
    }
    img.thirds {
        width: calc(98%/3);
    }
}

.page {
    display: flex;
    flex-direction: column;
    block-size: 100vh;
    > * {
        margin-block: 1rem;
    }
    > main {
        margin-block: auto;
    }
    > :first-child:not(main) {
        margin-block-start: 0;
    }
    /*> :last-child:not(main) {
        margin-block-end: 0;
    }*/
}

.login {
    main {
        background: var(--utility-background);
        border: 1px solid var(--window-border);
        box-shadow: 2px 2px 0 0 var(--drop-shadow);
        display: flex;
        flex-direction: column;
        margin-inline: auto;
        max-inline-size: 85ch;
        overflow: auto;
        padding: 0.8rem;
        position: relative;
        transition: background 300ms, color 0.3s;
    }
    h1 {
        font-size: 0.875rem;
        margin: 0 0 0.25rem 0;
    }
    label {
        display: block;
        font-size: 0.875rem;
        margin-block-end: .5rem;
    }
    input {
        border: 1px solid var(--border-primary);
        border-radius: 0;
        box-shadow: -1px -1px 0 0 var(--shadow), 1px 1px 0 0 var(--highlight);
        padding: 2px;
    }
    button:focus-visible, input:focus-visible {
        box-shadow: 0 0 0 2px var(--button-focus-visible);
        outline: none;
    }
    button {
        background-color: var(--button-background);
        border-radius: 2px;
        border: 1px solid var(--window-border);
        box-shadow: 1px 1px var(--highlight), -1px -1px var(--shadow), 1px 1px var(--highlight) inset, -1px -1px var(--button-inner-shadow) inset;
        color: var(--text);
        cursor: pointer;
        font-size: 0.8rem;
        font-weight: 500;
        image-rendering: pixelated;
        padding: 0.25rem 0.375rem;
    }
    button:active {
        background-color: var(--button-background-active);
        box-shadow: 1px 1px var(--highlight), -1px -1px var(--shadow), -1px -1px var(--button-inner-shadow-active) inset;
    }
    section + section {
        text-align: right;
    }
    .error {
        color: var(--text-error);
        font-size: 0.875rem;
        margin: 0 0 0.5rem;
    }
}