* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    scrollbar-width: thin;
    scrollbar-color: var(--apogee-glow) transparent;

    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
*::-webkit-scrollbar-track {
    background: transparent;
}
*::-webkit-scrollbar-thumb {
    background-color: var(--apogee-glow);
    border-radius: 10px;
    border: none;
}

html {
  font-size: clamp(12px, 1.14vw, 16px);
}

:root {

    --apogee-bg: rgba(2, 23, 49, 0.4);
    --apogee-glow: rgba(46, 114, 178, 0.15);
    --content-gap: 2rem;
    --coquette: #e5dcdc;
    --center-container-padding: 6rem;
    --dark-charcoal: #323232;
    --desktop-sidebars-margin: 0.25rem;
    --desktop-sidebar-left-gallery-margin: 0.5rem;
    --desktop-sidebar-left-width: 16rem;
    --desktop-center-width: 64rem;
    --desktop-sidebar-right-width: 6rem;
    --desktop-thumbnail-base-size: 1rem;
    --dim-gray: #626f7c;
    --ember-shadow: rgba(196, 14, 14, 0.3);
    --french-gray: #cfc9cb;
    --french2-gray: #cfc9cb88;
    --indent: 4rem;
    --light-red: #a52a2a;
    --link-red: #cf2f2f;
    --mysterious-mauve: #aaaabb;
    --rich-black: #041113;
    --pop-1: rgba(255, 52, 52, 0.2);
    --pop-2: rgba(130, 255, 172, 0.1);
    --pop-3: rgba(79, 170, 255, 0.2);
    --section-margin: 3rem;
    --shadow-r: rgba(196, 14, 14, 0.15);
    --shadow-g: rgba(14, 196, 14, 0.15);
    --shadow-b: rgba(14, 14, 196, 0.15);
    --white-glow: rgba(255, 255, 255, 0.2);
}

.background {
    position: fixed;
    inset: 0;
    
    background:
        radial-gradient(140% 50% at 15% 60%, rgba(124, 58, 237, 0.11), transparent 50%),
        radial-gradient(90% 80% at 85% 25%, rgba(245, 101, 101, 0.09), transparent 60%),
        radial-gradient(120% 65% at 40% 90%, rgba(197, 34, 34, 0.13), transparent 55%),
        radial-gradient(100% 45% at 70% 5%, rgba(251, 191, 36, 0.07), transparent 45%),
        radial-gradient(80% 75% at 90% 80%, rgba(168, 85, 247, 0.10), transparent 60%),
        radial-gradient(100% 100% at 20% 10%, rgba(112, 104, 223, 0.1), transparent 60%);
        

    z-index: -1;
    pointer-events: none;
}

.desktop-layout {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.mobile-layout {
    display: none;
}

@media (max-width: 1050px) {

  .desktop-layout {
    display: none;
  }

  .mobile-layout {
    width: 100%;
    height: 100dvh;

    display: unset;
    flex-direction: column;

    overflow: hidden;
  }
}

a {
    text-decoration: none;
}

p, ul, ol {
    margin-bottom: 1rem;

    text-align: justify;
    text-justify: inter-word;

    color: var(--mysterious-mauve);
    font-family: "Noto Sans", sans-serif;
    font-size: 1rem;
    font-style: normal;
    font-optical-sizing: auto;
    font-weight: 400;
    font-variation-settings: "wdth" 100;

    transition: color 0.5s;

    hyphens: auto;
    word-break: break-word;

    list-style: inside;
}
    .p.code {
        font-family: "JetBrains Mono", monospace;
        font-size: 1rem;
        font-weight: 200;
        color: var(--coquette);
    }
    .p.emphasize {
        color: var(--french-gray);

        text-shadow: 0 1px var(--ember-shadow);
    }

.title-container {
    width: var(--desktop-center-width);
    height: 100%;
    padding-right: 3rem;
    padding-bottom: 1.2rem;

    display: flex;
    justify-content: space-between;
    align-items: end;
}

h1 {
    font-family: "JetBrains Mono", monospace;
    font-size: 2rem;
    letter-spacing: -0.1ch;
    color: var(--french-gray);
    font-weight: 300;
    text-align: left;
    text-shadow:
        0 0.2rem var(--shadow-r),
        0.2rem -0.1rem var(--shadow-g),
        -0.2rem 0.1rem var(--shadow-b);

    opacity: 50%;
    }

.h1-container {
    padding: 0.5rem 2.5rem 0.5rem 6rem;

    border-radius: 2px;
    clip-path: polygon(
        /* top edge */
            0% 0%,
            calc(100% - var(--corner)) 0%,
        /* right edge */
            100% var(--corner),
            100% 100%,
        /* bottom edge */
            100% 100%,
            0% 100%,
        /* left edge */
            0% 100%,
            0% 0% );

    --corner: 1rem;

    backdrop-filter: sepia(20%) blur(5px);
    box-shadow: inset 0 0.35rem 4rem -1.3rem var(--apogee-glow);

}

.h1-corner {
    font-family: "JetBrains Mono", monospace;
    font-size: 2rem;
    color: var(--mysterious-mauve);
    font-weight: 300;

    text-shadow:
        0 0.2rem var(--shadow-r),
        0.2rem -0.1rem var(--shadow-g),
        -0.2rem 0.1rem var(--shadow-b);

    transform: translateY(-0.5rem);

    opacity: 35%;
    }


.indent {
    text-indent: var(--indent);
}

h2 {
    font-family: "JetBrains Mono", monospace;
    font-size: 1.5rem;
    letter-spacing: -0.1ch;
    color: var(--french2-gray);
    font-weight: 300;
    text-align: left;
    text-shadow:
        0 0.2rem var(--shadow-r),
        0.2rem -0.1rem var(--shadow-g),
        -0.2rem 0.1rem var(--shadow-b);
}

.h2-container {
    grid-column: full;
    width: 100%;

    margin-top: var(--section-margin);
    margin-bottom: var(--section-margin);
    padding: 0.5rem 0;

    border-radius: 2px;

    backdrop-filter: sepia(20%) blur(5px) brightness(150%);
    box-shadow:
        inset 0 0.35rem 4rem -1.3rem var(--white-glow),
        0 0 0.1rem 0.1rem var(--white-glow),
        0 0.5rem 1rem 0 black,
        0 2rem 2rem 0 var(--apogee-bg),
        0 -3rem 3rem 0 rgba(0, 0, 0, 0.35);
}

h3 {
    width: 100%;

    margin-top: var(--content-gap);

    font-family: "Noto Sans", sans-serif;
    font-size: 1.5rem;
    letter-spacing: -0.1ch;
    color: var(--mysterious-mauve);
    font-weight: 600;
    text-align: left;
    text-indent: var(--indent);
    text-shadow:
        0 1px var(--ember-shadow),
        0 0.2rem var(--shadow-r),
        0.2rem -0.1rem var(--shadow-g),
        -0.2rem 0.1rem var(--shadow-b);
}

.subtitle {
    width: 100%;

    margin-bottom: 1rem;

    font-family: "JetBrains Mono", monospace;
    font-size: 1rem;
    font-style: italic;
    letter-spacing: -0.25ch;
    color: var(--dim-gray);
    font-weight: 300;
    text-align: left;
    text-indent: var(--indent);
    text-shadow:
        0 1px var(--ember-shadow),
        0 0.1rem var(--shadow-r),
        0.1rem -0.1rem var(--shadow-g),
        -0.1rem 0.1rem var(--shadow-b);
}

.desktop-header {
    position: fixed;

    width: 100%;
    height: calc(2*var(--desktop-sidebars-margin) + var(--desktop-sidebar-right-width));

    display: flex;
    justify-content: space-between;
    align-items: center;
    
    backdrop-filter: blur(10px);
    box-shadow:
        inset 0 5vh 5vh -1vh var(--apogee-glow),
        0 -5vh 0.1vh -0.2vh var(--ember-shadow);

    z-index: 1;
}

.desktop-body-container {
    width: 100%;
    height: 100%;

    display: flex;
    justify-content: center;
}

.desktop-sidebar-left {
    height: 2000px;
    overflow-y: auto;
    overflow-x: visible;
    margin-top: var(--desktop-sidebars-margin);
    margin-left: var(--desktop-sidebars-margin);
    width: var(--desktop-sidebar-left-width);
    
    z-index: 2;
}
.desktop-sidebar-left-section {
    padding: var(--desktop-sidebar-left-gallery-margin);
    margin: 1.5rem 1rem;

    border-radius: 2px;

    text-align: center;

    backdrop-filter: sepia(0%) blur(5px);
}
.desktop-sidebar-left-title-container {
    padding: 0.25rem 0 0.25rem 1rem;
    margin-bottom: 0.5rem;

    border-radius: 2px;
    clip-path: polygon(
        /* top edge */
            0% 0%,
            calc(100% - var(--corner)) 0%,
        /* right edge */
            100% var(--corner),
            100% 100%,
        /* bottom edge */
            100% 100%,
            0% 100%,
        /* left edge */
            0% 100%,
            0% 0% );

    --corner: 1rem;

    /* backdrop-filter: sepia(20%) blur(5px);
    box-shadow: inset 0 0.35rem 4rem -1.3rem var(--apogee-glow); */

    background: var(--apogee-bg);
    box-shadow:
        0 0 4px -2px var(--white-glow),
        0 0 0.5rem 0.1rem var(--apogee-glow),
        inset 0 1rem 1rem 0 var(--apogee-glow);
    backdrop-filter: sepia(100%) blur(5px);
}
.desktop-sidebar-left-section-title {
    font-family: "JetBrains Mono", monospace;
    font-size: 1.2rem;
    color: var(--french-gray);
    font-weight: 200;
    text-align: left;
    text-shadow:
        0 0.2rem var(--shadow-r),
        0.2rem -0.1rem var(--shadow-g),
        -0.2rem 0.1rem var(--shadow-b);

    opacity: 35%;
    /* font-family: "Noto Sans", sans-serif;
    color: var(--dim-gray);
    font-size: 1rem;
    font-weight: 300;

    margin: 0.4rem 0 0.5rem 0;
    
    text-shadow:
    0 1px var(--ember-shadow),
    0 0 var(--shadow-g),
    0 0 var(--shadow-b); */
}
.desktop-sidebar-left-gallery {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--desktop-sidebar-left-gallery-margin);
}
    .desktop-sidebar-left-gallery a {
        display: contents;
    }

.thumbnail {
    grid-column: span 3;
    width: 100%;
    aspect-ratio: 1/1;

    border: solid 2px var(--apogee-bg);
    border-radius: 4px;
    backdrop-filter: brightness(50%);
    box-shadow:
        0 0 4px 0 var(--apogee-glow);
}
    .thumbnail:hover {
        border: solid 2px var(--light-red);
        border-radius: 0.5rem;
        box-shadow:
            0 0 1rem 0 var(--white-glow);
    }

.center-container {
    height: 100%;
    width: var(--desktop-center-width);

    padding: calc(var(--desktop-sidebar-right-width) + 5rem) 0;
    margin: 0 var(--desktop-sidebars-margin);

    overflow-y: auto;
    overflow-x: visible;
    

    background: var(--apogee-bg);
    box-shadow:
        0 4rem 4px -2px var(--white-glow),
        0 2rem 4rem 0.75rem var(--apogee-glow),
        inset 0 0.3rem 4rem 0 var(--apogee-glow);
    backdrop-filter: sepia(100%) blur(5px);
}

.content-grid {
    --padding-inline: 2rem;
    --content-max-width: 900px;
    --breakout-max-width: 1200px;

    --breakout-size: calc(
        (var(--breakout-max-width) - var(--content-max-width)) / 2
    );

    display: grid;
    justify-items: center;
    grid-template-columns:
        [full-start] minmax(var(--padding-inline), 1fr)
        [breakout-start] minmax(0, var(--breakout-size))
        [content-start] min(
        100% - (var(--padding-inline) * 2),
        var(--content-max-width)
        )
        [content-end]
        minmax(0, var(--breakout-size)) [breakout-end]
        minmax(var(--padding-inline), 1fr) [full-end];
}
.content-grid > * {
    grid-column: content;
}
.breakout {
    grid-column: breakout;
}
.feature {
    grid-column: feature;
}
.full,
.content-grid > .h2-container {
    grid-column: full;
}

.desktop-sidebar-right {
    height: 100%;
    margin-top: var(--desktop-sidebars-margin);
    margin-right: var(--desktop-sidebars-margin);
    width: var(--desktop-sidebar-right-width);

    display: flex;
    flex-direction: column;

    z-index: 2;
}

.cv-container {
    aspect-ratio: 1/1;
    background-size: cover;
}

.social-icon {
    width: var(--desktop-sidebar-right-width);
    aspect-ratio: 1/1;
    
    margin-bottom: var(--desktop-sidebars-margin);
    
    filter:
    drop-shadow(0 1px var(--ember-shadow))
    drop-shadow(0 0 var(--shadow-g))
    drop-shadow(0 0 var(--shadow-b));
}

.tbl-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;

    width: var(--desktop-sidebar-left-width);
    height: var(--desktop-sidebar-right-width);

    margin-bottom: 2rem;

    font-family: "Noto Sans", sans-serif;
    color: var(--dim-gray);

    text-shadow:
        0 1px var(--ember-shadow),
        0 0 var(--shadow-g),
        0 0 var(--shadow-b);

    transition: 0.15s;
}
    .tbl-container:hover {
        color: var(--light-red);
        text-shadow:
            0 0.1rem var(--shadow-r),
            0.1rem -1px var(--shadow-g),
            -0.1rem 1px var(--shadow-b);
    }
    .tbl-container:hover .tbl-tech {
        font-weight: 900;
    }
    .tbl-container:hover * {
        opacity: 100%;
    }
.tbl-name {
    font-size: 1rem;
    font-weight: 600;

    transition: 0.15s;
}
.tbl-tech {
    font-size: 1.3rem;
    font-weight: 300;

    transition: 0.15s;
}


.tile-3d {
    --xrot: 0deg;
    --yrot: 0deg;
    --xoff: 0px;
    --yoff: 0px;
    transform: rotateX(0) rotateY(0) translateX(0) translateY(0);
    --color: var(--light-red);
    z-index: auto;
    
    background-size: cover;
    background-image: var(--icon);
    
    transition: 0.15s
}
    .tile-3d:hover {
        transform-origin: 50% 50%;
        transform-style: preserve-3d;
        perspective: 1800px;
        transform: rotateX(var(--xrot)) rotateY(var(--yrot)) translateX(var(--xoff)) translateY(var(--yoff));
        z-index: 512;
    }
.tile-3d.thumbnail {
    filter:
        drop-shadow(0 1px var(--shadow-r))
        drop-shadow(1px -1px var(--shadow-g))
        drop-shadow(1px 1px var(--shadow-b));
    box-shadow:
        inset 0 0 4rem 0 var(--apogee-glow);
}
    .tile-3d.thumbnail:hover {
        filter:
            sepia(0%)
            drop-shadow(0 0.25rem var(--shadow-r))
            drop-shadow(0.25rem -1px var(--shadow-g))
            drop-shadow(-0.25rem 1px var(--shadow-b));
        box-shadow:
            inset 0 0 1rem 0 var(--color);
    }

    .tile-3d.social-icon:hover {
        background-image: var(--icon-hover);
    }



.link-corner {
    font-size: 0.7em;
    line-height: 0;
    vertical-align: super;

    opacity: 35%;

    transition: 0.15s;
}




.row {
    display: block;

    margin-bottom: var(--content-gap);
    clear: both;
}
.flex-row {
    display: flex;
    flex-direction: row;
    align-items: start;

    gap: var(--content-gap);
    margin-bottom: var(--content-gap);
    clear: both;
}
    .flex-row.align-center{
        align-items: center;
    }

.float-left {
    float: left;
    margin: 1ch 1rem 1ch 0;
}
.float-right {
    float: right;
    margin: 1ch 0 1ch 1rem;
}

.pop {
    box-shadow:
        0 0 0.1rem 0.1rem var(--white-glow),
        0 0.3rem 0.3rem 0 var(--pop-1),
        0.3rem -0.1rem 0.3rem 0 var(--pop-2),
        -0.2rem -0.2rem 0.3rem 0 var(--pop-3),
        0 0 5rem 0 black;
}

.extralink {
    color: var(--french-gray);
    font-weight: 600;

    text-decoration: underline dotted var(--white-glow);
    text-decoration-skip-ink: all;
    text-underline-offset: 0.1em;

    text-shadow:
        0 0.1rem var(--pop-1),
        0.1rem -0.1rem var(--pop-2),
        -0.1rem -0.1rem var(--pop-3);

    transition: 0.15s;
}
    .extralink:hover {
        color: var(--link-red);

        text-decoration-color: var(--light-red);
        text-underline-offset: 0.2em;

        text-shadow:
            0 0.1rem var(--pop-1),
            0.1rem -0.1rem var(--pop-2),
            -0.1rem -0.1rem var(--pop-3);
    }
    .extralink:hover .link-corner {
        opacity: 100%;
    }



.breakdown-grid {
    display: grid;
    justify-items: center;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;

    margin-bottom: var(--section-margin);
    margin-top: var(--content-gap);
}    
.article-container {
    --color: var(--apogee-glow);
    height: 100%;
    display: flex;
    flex-direction: column;

    clear: both;

    padding: 0.5rem;

    border: 2px solid var(--apogee-glow);
    border-radius: 4px;
    box-shadow:
        inset 0 0 10rem -4rem var(--white-glow),
        0 0 0.5rem 0 var(--white-glow);

    transition: 0.15s;
}
    .article-container:hover {
        border: solid 2px var(--light-red);
        border-radius: 0.5rem;
        box-shadow:
            inset 0 0 10rem -4rem var(--color),
            0 0 1rem 0 var(--light-red);
    }
    .article-container:hover .article-title {
        opacity: 100%;

        transition: 0.15s;
    }
    .article-container:hover .thumbnail {
        border: solid 2px transparent;
        border-radius: 2px;
        box-shadow: none;
    }

.article-header-container {
    margin-bottom: 1rem;

    display: flex;
}

.article-title-container {
    width: 100%;

    display: flex;
    align-items: center;

    padding: 0 1rem;

    border-radius: 2px;
    clip-path: polygon(
        /* top edge */
            0% 0%,
            calc(100% - var(--corner)) 0%,
        /* right edge */
            100% var(--corner),
            100% 100%,
        /* bottom edge */
            100% 100%,
            0% 100%,
        /* left edge */
            0% 100%,
            0% 0% );

    --corner: 1rem;

    backdrop-filter: sepia(20%) blur(5px);
    box-shadow: inset 0 0.35rem 4rem -1.3rem var(--apogee-glow);
}

.article-title {
    font-family: "JetBrains Mono", monospace;
    font-size: 1.2rem;
    letter-spacing: -0.1ch;
    line-height: 100%;
    color: var(--french-gray);
    font-weight: 300;
    text-align: left;
    text-shadow:
        0 0.1rem var(--pop-1),
        0.1rem -0.1rem var(--pop-2),
        -0.1rem -0.1rem var(--pop-3);

    opacity: 80%;
}

.article-body {
    flex-grow: 1;

    padding: 1rem;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.article-header-container .thumbnail {
    height: 3rem;
    width: auto;

    margin-right: 1rem;

    border: solid 2px transparent;
    border-radius: 2px;
    backdrop-filter: brightness(100%);
    box-shadow: none;
}

sub {
    font-size: 0.7em;
    line-height: 0;
    vertical-align: sub;
}

.tags-row-container{
    margin-top: 2rem;

    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    justify-content: left;
    align-items: center;
    flex-wrap: wrap;
}
.tags-row-container > * {
    height: 2.5rem;

    padding-left: 0.5rem;

    display: flex;
    align-items: center;

    /* object-fit: contain; */

    color: var(--mysterious-mauve);
    text-align: right;
    font-family: "Noto Sans", sans-serif;
    font-size: 0.8rem;
    letter-spacing: -0.1ch;
    font-style: normal;
    font-optical-sizing: auto;
    font-weight: 300;
    border-left: 2px solid var(--dark-charcoal);
}
.tags-row-container :first-child {
    border: none;

    color: var(--dim-gray);
    font-family: "JetBrains Mono", monospace;
    font-size: 2rem;
    font-weight: 900;
}
    .toolbox-grid .tags-row-container > * {
        height: 1.8rem;
        font-size: 0.7rem;
    }
    .toolbox-grid .tags-row-container :first-child {
        font-size: 1.2rem;
    }

.game-banner-wrapper {
    position: relative;
    width: 100%;

    margin: var(--content-gap) 0;

    box-shadow:
        0 0 0.1rem 0.1rem var(--white-glow),
        0 0.5rem 1rem 0 black,
        0 2rem 2rem 0 var(--apogee-bg),
        0 -3rem 3rem 0 rgba(0, 0, 0, 0.35);
}
.game-banner {
    display: block;
    width: 100%;
}

.game-banner-label {
    position: absolute;
    left: 0;
    top: 0;

    height: 100%;

    color: var(--mysterious-mauve);
    text-align: center;

    font-family: "Noto Sans", sans-serif;
    font-size: 2.2rem;
    letter-spacing: -0.1ch;
    font-style: normal;
    font-optical-sizing: auto;
    font-weight: 300;

    text-shadow:
        0 0.1rem var(--pop-1),
        0.1rem -0.1rem var(--pop-2),
        -0.1rem -0.1rem var(--pop-3);

    writing-mode: vertical-rl;
    transform: translateY(0) rotate(180deg);

    opacity: 35%;
    }


.toolbox-grid {
    margin-bottom: var(--section-margin);
    margin-top: var(--content-gap);

    display: grid;
    justify-items: center;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}
.toolbox-grid .article-container {
    max-width: 80vw;
}
.toolbox-grid .article-header-container {
    margin-bottom: 0;
}
.toolbox-grid .article-header-container .thumbnail {
    height: 2.4rem;
}
.toolbox-grid .article-title-container {
    padding: 0 0.8rem;
}
.toolbox-grid .article-title {
    font-size: 1rem;
}
.toolbox-grid .article-body {
    padding: 0.8rem;
}

.clear {
    clear: both;
}

.wrapping-grid {
    width: 100%;

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
}

/* .wrapping-grid > * {
    width: 100%;
    height: 100%;
    object-fit: contain;

    
} */

.wrapping-grid video {
    width: 100%;
    object-fit: cover;

    /* display: block; */
}