:root {

    --page-font-size: 1rem;
    --portfolio-item-option-size: calc(var(--page-font-size) * 6);

    --page-margins-y: var(--page-font-size);
    --page-margins-x: round(6%, 1px);
    --page-margins: var(--page-margins-y) var(--page-margins-x);
    --page-content-padding-x: var(--page-font-size);
    --page-content-padding-y: calc(var(--page-font-size) * 3);
    --page-content-padding: var(--page-content-padding-x) var(--page-content-padding-y);

    --nav-bar-height: 4rem;
    --footer-height: 3rem;
    --taskbar-height: calc(var(--page-font-size) * 3);

    --border-radius: var(--page-font-size);
    --ease-overshoot-s: cubic-bezier(0.0,0.5,0.0,1.5);
    --ease-overshoot-m: cubic-bezier(0.0,0.5,0.0,2.5);
    --ease-overshoot-l: cubic-bezier(0.0,0.5,0.0,3.5);

    --col-background: #2f1e33;
    --col-page-padding: #6f3a7c;
    --col-address-bar: #663679;
    --col-page-content: #542d66;
    --col-page-text: #ffe261;
    --col-page-text-muted: #e7aa59;
    --col-page-text-dark: #bd7235;

    --col-btn: var(--col-page-padding);
    --col-btn-text: var(--col-page-text);
    --col-btn-hover: var(--col-page-padding);
    --col-btn-text-hover: var(--col-page-text);
    --col-btn-active: var(--col-page-padding);
    --col-btn-text-active: var(--col-page-text-muted);

    --tooltip-shadow-color: var(--col-page-content);
    --tooltip-shadow-width: 0.1em;
    --tooltip-shadow-blur: 0;
    --tooltip-shadow: 0 var(--tooltip-shadow-width) var(--tooltip-shadow-blur) var(--tooltip-shadow-color), 0 calc(-1 * var(--tooltip-shadow-width)) var(--tooltip-shadow-blur) var(--tooltip-shadow-color), var(--tooltip-shadow-width) 0 var(--tooltip-shadow-blur) var(--tooltip-shadow-color), calc(-1 * var(--tooltip-shadow-width)) 0 var(--tooltip-shadow-blur) var(--tooltip-shadow-color);
    /* ADD TO PREVIOUS LINE TO ADD DIAGONAL SHADOWS , var(--tooltip-shadow-width) var(--tooltip-shadow-width) var(--tooltip-shadow-blur) var(--tooltip-shadow-color), var(--tooltip-shadow-width) calc(-1 * var(--tooltip-shadow-width)) var(--tooltip-shadow-blur) var(--tooltip-shadow-color), calc(-1 * var(--tooltip-shadow-width)) var(--tooltip-shadow-width) var(--tooltip-shadow-blur) var(--tooltip-shadow-color), calc(-1 * var(--tooltip-shadow-width)) calc(-1 * var(--tooltip-shadow-width)) var(--tooltip-shadow-blur) var(--tooltip-shadow-color); */

    /* ABOUT IMAGES */
    --about-img-scale: 5;

    --mobile-width: 1180px;
}

/* GLOBAL */

@media (max-width:1180px) {
    :root {
        --page-font-size: 0.8rem;
        --portfolio-item-option-size: calc(1rem * 6);
        --page-margins-y: var(--page-font-size);
        --page-margins-x: var(--page-font-size);
        --page-content-padding: var(--page-font-size) var(--page-font-size);
    }
    .hide-on-mobile {
        display: none !important;
    }
}
@media (max-width:850px) {
    :root {
        --page-font-size: 0.65rem;
    }
    .hide-on-mobile {
        display: none !important;
    }
}

.icon {
    width: round(100%, 1px);
    height: round(100%, 1px);
    margin: auto;
    -webkit-mask-image: var(--icon);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
    -webkit-mask-type: alpha;
    mask-image: var(--icon);
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
    mask-type: alpha;
}
.site-icon {
    --icon: url('../ui/icon.png');
    background-color: var(--col-btn-text);
    aspect-ratio: 1;
    width: 2em;
}
.vert-flex {
    display: flex;
    flex-direction: column;
}
.hor-flex {
    display: flex;
    flex-direction: row;
}

p, li {
    font-size: calc(var(--page-font-size) * 2);
}
h1, h2, h3, h4 {
    margin-top: 0.0em;
    margin-bottom: 0;
}
h1 {
    font-size: calc(var(--page-font-size) * 4);
}
h2 {
    font-size: calc(var(--page-font-size) * 3);
}
h3, h4 {
    font-size: calc(var(--page-font-size) * 8);
}
.centered {
    text-align: center;
}
a {
    color: inherit;
}
a:hover {
    cursor: pointer;
}
red {
    color: #f54c68;
}
green {
    color: #40d88c;
}
nom {
    font-size: 0em;
}
muted {
    color: var(--col-page-text-muted);
}

.tooltip {
    --pos-x: calc(var(--page-font-size) * -5 + var(--page-font-size));
    font-size: var(--page-font-size);
    text-wrap: nowrap;
    text-align: center;
    align-self: center;
    position: absolute;
    width: calc(var(--page-font-size) * 10);
    transform: translate(var(--pos-x), round(calc(-50% - var(--page-font-size) * 1.5), 1px));
    opacity: 0;
    pointer-events: none;
    color: var(--col-btn-text);
    text-shadow: var(--tooltip-shadow);
    transition: 0.1s font-size, 0.1s transform, 0.1s opacity;
}
.icon.animated, .nav-bar-icon.animated {
    animation: spritesheet-h 0.2s steps(var(--steps)) infinite;
    -webkit-animation: spritesheet-h 0.2s steps(var(--steps)) infinite;
    mask-size: 400% 100%;
}


@keyframes spritesheet-h {
    0% {
        -webkit-mask-position: 0% center;
        mask-position: 0% center;
    }
    100% {
        -webkit-mask-position: 100% center;
        mask-position: 100% center;
    }
}
@-webkit-keyframes spritesheet-h {
    0% {
        -webkit-mask-position: 0% center;
        mask-position: 0% center;
    }
    100% {
        -webkit-mask-position: 100% center;
        mask-position: 100% center;
    }
}

/* PAGE */

@font-face {
  font-family: 'yoster';
  src: url("/resources/fonts/yoster/yoster-webfont.woff");
}
@font-face {
  font-family: 'boldpixels';
  src: url("/resources/fonts/boldpixels/boldpixels1.4-webfont.woff");
}
@font-face {
  font-family: 'nihonium';
  src: url("/resources/fonts/nihonium/nihonium113-webfont.woff");
}
@font-face {
  font-family: 'grapesoda';
  src: url("/resources/fonts/grapesoda/grapesoda.woff");
}

body {
    background: var(--col-background);
    padding: 0;
    margin: 0;
    height: 100%;
    font-size: calc(var(--page-font-size) * 2);
    font-family: "grapesoda", sans-serif;
    font-weight: normal !important;
    color: var(--col-page-text);
}
i {
    color: var(--col-page-text-muted)
}
body .vert-flex {
    height: 100%;
}

.window {
    --window-width: round(calc(100% - var(--page-margins-x) * 2), 2px);
    --window-height: round(calc(100% - var(--page-margins-y) * 2), 2px);
    background: var(--col-page-padding);
    width: var(--window-width);
    height: var(--window-height);
    left: round(calc((100% - var(--window-width)) / 2), 2px);
    top: round(calc((100% - var(--window-height)) / 2), 2px);
    border-radius: var(--border-radius);
    overflow: hidden;
    color: var(--col-btn-text);
    position: absolute;
}
.window .vert-flex {
    height: 100%;
}

@media (max-height:600px) {
    .window {
        overflow-y: scroll;
    }
    .window .vert-flex {
        height: fit-content;
    }
}

.desktop {
    /* max-height: calc(100% - var(--page-margins-y) * 2.0); */
    /* padding: var(--page-margins); */
    height: 100%;
    width: 100%;
}

/* NAV BUTTONS */

.nav-btn {
    height: 100%;
    text-align: center;
    align-content: center;
    padding: 0 0.5rem;
    cursor: pointer;
    background: var(--col-btn);
    color: var(--col-btn-text);
    user-select: none;
    overflow:hidden;
}
.nav-btn .icon {
    background-color: var(--col-btn-text);
}
.nav-btn:hover {
    background: var(--col-btn-hover);
    color: var(--col-btn-text-hover);
}
.nav-btn:hover .icon {
    background-color: var(--col-btn-text-hover);
}
.nav-btn:focus, .nav-btn:active {
    background: var(--col-btn-active);
    color: var(--col-btn-text-active);
}
.nav-btn:focus .icon, .nav-btn:active .icon {
    background-color: var(--col-btn-text-active);
}
.nav-btn > .content {
    display: inline-block;
    overflow: hidden;
    text-wrap: nowrap;
    text-overflow: ellipsis;
    white-space:nowrap;
    width: 100%;
    transition: 0.1s transform ease-out;
}
.nav-btn:hover > .content {
    transform: translateY(calc(var(--nav-btn-press-depth) * -0.5));
    transition: 0.1s transform var(--nav-btn-ease);
}
.nav-btn:focus > .content, .nav-btn:active > .content {
    transform: translateY(var(--nav-btn-press-depth)) scaleY(0.75);
    transition: 0.05s transform ease-out;
}
.nav-btn:hover .tooltip {
    font-size: calc(var(--page-font-size) * 2);
    transform: translate(var(--pos-x), calc(-50% - var(--page-font-size) * 2));
    opacity: 1;
}
.nav-btn.spacer {
    pointer-events: none !important;
    padding: 0;
}
.nav-btn.hor-flex {
    align-items: center;
    gap: round(0.25em, 1px);
}
.nav-btn:last-child {
    margin-right: 1rem;
}
.nav-btn:first-child {
    margin-left: 1rem;
}

/* NAV BAR */

.nav-bar {
    --nav-btn-ease: var(--ease-overshoot-m);
    --nav-btn-press-depth: calc(var(--page-font-size) * 0.66);
    flex: 0 0 var(--nav-bar-height);
}
@media (max-width: 1180px) {
    .nav-bar {
        justify-content: center;
    }
}

.nav-btn.home {
    width: var(--nav-bar-height);
    background: var(--col-btn);
    flex-shrink: 0;
}
.nav-btn.home .site-icon {
    transform: scale(0.8) rotate(0deg);
    transition: 0.2s transform var(--nav-btn-ease);
}
.nav-btn.home:hover .site-icon {
    transform: scale(0.9) rotate(5deg);
}
.nav-btn.home:focus .site-icon, .nav-btn.home:active .site-icon {
    transform: scale(0.7) rotate(-5deg);
}

/* ADDRESS BAR */

.address-bar {
    --nav-btn-ease: var(--ease-overshoot-m);
    --nav-btn-press-depth: calc(var(--page-font-size) * 0.33);
    flex: 0 0 2em;
    border-top: dashed 2px var(--col-page-content);
}
.address-bar .nav-btn {
    background: var(--col-btn);
}
.address-bar > .search-bar {
    position: relative;
    background: var(--col-page-content);
    border-radius: calc(var(--border-radius) * 0.25) 0 0 calc(var(--border-radius) * 0.25);
    display: flex;
    padding: 0 0.5em;
    margin: 0.25em 0 0.25em 0.25em;
    flex: 1 0 1em;
    overflow: hidden;
    cursor: pointer;
}
.address-bar > .search-bar-end {
    position: relative;
    height: auto;
    background: var(--col-page-content);
    border-radius: 0 calc(var(--border-radius) * 0.25) calc(var(--border-radius) * 0.25) 0;
    display: flex;
    padding: 0 0.25em;
    margin: 0.25em 0.25em 0.25em 0;
    flex: 0 0;
    flex-basis: fit-content;
    overflow: hidden;
    cursor: pointer;
}
.address-bar > .search-bar > .search {
    position: absolute;
    width: calc(100% - 1em);
    height: 100%;
    text-align: left;
    align-content: center;
    cursor: text;
}
.address-bar > .search-bar > .copied {
    position: absolute;
    width: calc(100% - 1em);
    height: 1.5em;
    background: var(--col-page-content);
    text-align: left;
    align-content: center;
    cursor: text;
    pointer-events: none;
    opacity: 0;
    animation-delay: 0.5s;
    animation-duration: 1.0s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in;
}
@keyframes search-copied-fade {
    0% { opacity: 1.0; }
    100% { opacity: 0.0; }
}
.address-bar > .search-bar > .search > span, .address-bar > .search-bar > .copied > span {
    color: var(--col-page-text-muted)
}


/* PAGE-CONTENT */

.page-content {
    flex: 0 1 100%;
    background-color: var(--col-page-content);
    overflow-x: hidden;
    padding: var(--page-content-padding);
    overflow-y: scroll;
    color: var(--col-page-text-muted);
}
.page-content i {
    color: var(--col-page-text-dark)
}
.page-content h1, .page-content h2, .page-content h3, .page-content h4 {
    color: var(--col-page-text);
}
.page-content h1, .page-content h2, .page-content h3, .page-content h4, .page-content b, .page-content strong {
    font-weight: 500;
}
.page-content embed {
    height: 100%;
    width: 100%;
}

/* FOOTER */

.hor-flex.footer {
    --nav-btn-ease: var(--ease-overshoot-s);
    --nav-btn-press-depth: 0.5rem;
    flex: 0 0 var(--footer-height);
}
.footer .nav-btn {
    padding: 0 var(--page-font-size);
    font-size: calc(var(--page-font-size) * 2);
    background: var(--col-btn);
}
.footer .nav-btn.spacer {
    min-width: 0;
    color: var(--col-page-text-muted);
}
@media (max-width: 400px) {
  .footer .nav-btn.spacer {
    display: none !important;
  }
}
.footer .nav-btn.hor-flex .icon {
    aspect-ratio: 1;
    height: 2rem;
}

/* TABLE */

td {
    text-align: center;
    font-size: 2em;
}
.table-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: calc(var(--page-font-size) * 2) 0;
}
.table-header-row {
    width: 100%;
}
.table-header {
    font-size: 3em;
}
td:first-child {
    padding-right: calc(var(--page-font-size) * 0.333333);
}

/* ABOUT */

body.about .header {
    text-align: center;
    font-size: calc(var(--page-font-size) * 2);
    color: var(--col-page-text);
}
body.about .table {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--page-font-size) * 2);
    justify-content: center;
}
body.about .table > .column {
    font-size: calc(var(--page-font-size) * 2);
}
body.about .table > .column > .title {
    font-size: calc(var(--page-font-size) * 2);
    text-decoration: underline;
    text-align: center;
}

body.about .table > .column > .image-container {
    height: calc(48px * var(--about-img-scale));
    width: calc(64px * var(--about-img-scale));
    display: inline-flex;
    image-rendering: pixelated;
}
body.about .table > .column > .image-container > .image {
    width: 100%;
    height: 100%;
    background: var(--img);
    background-size: cover;
}
body.about .table > .column > .image-container > .image > .stimmer-container {
    position: relative;
    cursor: pointer;
}


body.about .table > .column > .image-container > .image > .stimmer-container > .stimmer {
    width: 100%;
    height: 100%;
    background: var(--img);
    background-size: cover;
}
body.about .table > .column > .image-container > .image > .stimmer-container:hover > .stimmer {
    background-position: 50% 0;
}
body.about .table > .column > .image-container > .image > .stimmer-container:focus > .stimmer, body.about .table > .column > .image-container > .image > .stimmer-container:active > .stimmer {
    background-position: 100% 0;
} 

/**/

.about-img {
    height: calc(48px * var(--about-img-scale));
    width: calc(64px * var(--about-img-scale));
    display: inline-flex;
    image-rendering: pixelated;
}
.about-img img {
    width: 100%;
    height: 100%;
}
.about-img .about-img-container {
    width: 100%;
    height: 100%;
    background: var(--img);
    background-size: cover;
}
.about-img .about-img-container .stimmer-container {
    position: relative;
    cursor: pointer;
}


.about-img-container > .stimmer-container > .stimmer {
    width: 100%;
    height: 100%;
    background: var(--img);
    background-size: cover;
}
.about-img-container > .stimmer-container:hover > .stimmer {
    background-position: 50% 0;
}
.about-img-container > .stimmer-container:focus > .stimmer, .about-img-container > .stimmer-container:active > .stimmer {
    background-position: 100% 0;
} 

#unity-stimmer {
    left: calc(21px * var(--about-img-scale));
    top: calc(12px * var(--about-img-scale));
    width: calc(19px * var(--about-img-scale));
    height: calc(19px * var(--about-img-scale));
}
#blender-stimmer {
    left: calc(16px * var(--about-img-scale));
    top: calc(16px * var(--about-img-scale));
    width: calc(18px * var(--about-img-scale));
    height: calc(18px * var(--about-img-scale));
}
#clip_studio-stimmer {
    left: calc(20px * var(--about-img-scale));
    top: calc(13px * var(--about-img-scale));
    width: calc(20px * var(--about-img-scale));
    height: calc(28px * var(--about-img-scale));
}
#clip_studio-stimmer:hover > .stimmer {
    background-position: calc(100% / 38) 0;
}
#clip_studio-stimmer:focus > .stimmer, #clip_studio-stimmer:active > .stimmer {
    animation: clip_studio-stimmer-frames 0.8s steps(36) 0s 1 forwards;
} 
@keyframes clip_studio-stimmer-frames {
    0% {
        background-position: calc(100% / 38 * 2.0) 0;
    }
    100% {
        background-position: calc(100% / 38 * 38) 0;
    }
}
#aseprite-stimmer {
    left: calc(34px * var(--about-img-scale));
    top: calc(22px * var(--about-img-scale));
    width: calc(14px * var(--about-img-scale));
    height: calc(14px * var(--about-img-scale));
}
#aseprite-stimmer:hover > .stimmer {
    background-position: calc(100% / 19) 0;
}
#aseprite-stimmer:focus > .stimmer, #aseprite-stimmer:active > .stimmer {
    animation: aseprite-stimmer-frames 0.7s steps(17) 0s 1 forwards;
} 
@keyframes aseprite-stimmer-frames {
    0% {
        background-position: calc(100% / 19 * 2.0) 0;
    }
    100% {
        background-position: calc(100% / 19 * 19) 0;
    }
}

.emoji {
    height: var(--page-font-size);
    width: calc(var(--page-font-size) * 2);
    background-size: var(--page-font-size);
    image-rendering: pixelated;
    transform: scale(1, 2);
}
.content.emoji {
    display: block;
    height: calc(var(--page-font-size) * 2);
    width: calc(var(--page-font-size) * 2);
    transform: scale(1);
}
.nav-bar-icon {
    margin: auto;
    -webkit-mask-image: var(--icon);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
    -webkit-mask-type: alpha;
    mask-image: var(--icon);
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
    mask-type: alpha;
    --width: calc(var(--page-font-size) * 2);
    min-width: var(--width);
    width: var(--width);
    height: var(--width);
    background-color: var(--col-page-text);
    image-rendering: pixelated;
}

/* PORTFOLIO */

body.portfolio #filters {
    width: 100%;
    display: flex;
    padding: var(--page-font-size);
    gap: calc(var(--page-font-size) * 1);
    align-self: center;
    justify-content: center;
    font-size: calc(var(--page-font-size) * 3);
    flex-wrap: wrap;
}
body.portfolio #filters > div {
    --item-scale: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(var(--page-font-size) * 6);
    width: calc(var(--page-font-size) * 16);
    border-radius: calc(var(--page-font-size) * 0.5);
    background-color: var(--col-address-bar);
    cursor: pointer;
    transform: scaleX(calc(1 + 6 / 16 * var(--item-scale))) scaleY(calc(1 + 16 / 6 * var(--item-scale)));
    transition: 0.2s transform ease;
}
body.portfolio #filters > div.active {
    background-color: var(--col-page-padding);
    color: var(--col-page-text);
}
body.portfolio #filters > div:hover {
    --item-scale: 0.05;
    z-index: 100;
    transition: 0.1s transform var(--ease-overshoot-m);
}
body.portfolio #filters > div:active, body.portfolio #filters > div:focus {
    --item-scale: -0.05;
}
body.portfolio #filters > div > span {
    user-select: none;
    transition: 0.1s transform ease;
}
body.portfolio #filters > div:hover > span {
    transform: scaleY(1.2) translateY(-0.05em);
    transition: 0.2s transform var(--ease-overshoot-m);
}
body.portfolio #filters > div:active > span, body.portfolio #filters > div:focus > span {
    transform: scaleY(0.9) translateY(0.5em);
    transition: 0.0s transform ease;
}

.portfolio-item-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--page-font-size);
}

.portfolio-item {
    position: relative;
    --bg-col: #fff;
    --item-scale: 0;
    box-sizing: border-box;
    height: calc(48px * var(--about-img-scale) + 12px);
    width: calc(48px * var(--about-img-scale) * var(--aspect-ratio) + 12px);
    border-radius: calc(2px * var(--about-img-scale));
    background-color: var(--bg-col);
    overflow: hidden;
    cursor: pointer;
    border: solid 0 var(--col);
    transform: scaleX(calc(1 + 48 / 64 * var(--item-scale))) scaleY(calc(1 + 64 / 48 * var(--item-scale)));
    border-width: 6px;
    transition: 0.3s transform ease, 0.1s border-width ease, 0.2s border-radius ease;
}
.portfolio-item:hover {
    --item-scale: 0.05;
    z-index: 100;
    border-width: 8px;
    border-radius: calc(3px * var(--about-img-scale));
    transition: 0.3s transform var(--ease-overshoot-m), 0.4s border-width var(--ease-overshoot-m), 0.4s border-radius var(--ease-overshoot-m);
}
.portfolio-item:active, .portfolio-item:focus {
    --item-scale: -0.05;
    border-width: 4px;
}
.portfolio-item .item-bg {
    height: 100%;
    width: 100%;
    background-color: var(--col);
    mask-image: url('/resources/ui/checkerboard.png');
    mask-size: calc(219px * 4);
    mask-position: center;
    image-rendering:pixelated;
    opacity: 0.25;
    transition: 0.4s mask-size ease;
}
.portfolio-item:hover .item-bg {
    mask-size: calc(219px * 3.5);
    transition: 0.2s mask-size var(--ease-overshoot-m);
}
.portfolio-item .item-background {
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    display: inline-flex;
    flex-direction: column;
    justify-content: end;
    background-image: var(--img);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: 0.3s transform ease;
}
.portfolio-item .item-video-background {
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    transition: 0.3s transform ease;
}
.portfolio-item .item-video-background > video {
    height: 100%;
    width: 100%;
}
.portfolio-item:hover .item-background {
    transform: scale(calc(1 + 64 / 48 * var(--item-scale)), calc(1 + 48 / 64 * var(--item-scale))) scale(1.15);
    transition: 0.25s transform var(--ease-overshoot-m);
}
.portfolio-item .item-info {
    display: none;/*inline-flex;  */
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    flex-direction: column;
    justify-content: center;
    pointer-events: none;
    user-select: none;
    padding: calc(var(--page-font-size) * 0.5) var(--page-font-size);
    margin: calc(1px * var(--about-img-scale));
    border-radius: calc(1px * var(--about-img-scale));
    background-color: rgba(0,0,0,0.45);
    color: var(--col-page-text);
    opacity: 0.0;
    transition: 0.1s opacity;
}
.portfolio-item:hover .item-info {
    opacity: 1.0;
}
.portfolio-item .item-info .title {
    margin: 0;
    font-size: var(--page-font-size);
}
.portfolio-item .item-info .description {
    margin: 0;
    font-size: var(--page-font-size);
    color: var(--col-page-text-muted);
}



body.portfolio_item #item {
    height: 100%;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
@media (max-height:600px) {
    body.portfolio_item #item {
        height: fit-content;
        box-sizing: border-box;
    }
}
body.portfolio_item #title {
    margin: 0;
}
body.portfolio_item #subtitle {
    margin: 0;
    color: #34b36d;
    padding-bottom: calc(var(--page-font-size) * 0.5);
    border-bottom: solid var(--col-page-padding) 3px;
    display: flex;
    justify-content: space-between;
}
body.portfolio_item #made-with-container {
    display: flex;
}
body.portfolio_item #made-with-container .logo {
    width: calc(var(--page-font-size) * 2);
    height: calc(var(--page-font-size) * 2);
    background-image: var(--img);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    image-rendering: pixelated;
    cursor: pointer;
}

body.portfolio_item #description {
    margin: var(--page-font-size) 0 calc(var(--page-font-size) * 0.5) 0;
}
body.portfolio_item #image-container {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    background-color: var(--bg-col);
    border-radius: var(--page-font-size);
    border: solid var(--col) calc(var(--page-font-size) * 0.25);
    position: relative;
}
body.portfolio_item #image-container > #bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--col);
    mask-image: url('/resources/ui/checkerboard.png');
    mask-size: calc(219px * 4);
    image-rendering:pixelated;
    opacity: 0.125;
    z-index: 10;
}
body.portfolio_item #image-container > #big-preview {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    filter: drop-shadow(0 0 calc(var(--page-font-size) * 2) rgba(0,0,0,0.45));
    z-index: 20;
}
body.portfolio_item #image-container > #big-preview > #image {
    position: absolute;
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    filter: drop-shadow(0 0 calc(var(--page-font-size) * 2) rgba(0,0,0,0.45));
}
body.portfolio_item #image-container > #big-preview > #video {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
body.portfolio_item #image-container > #big-preview > #video > video {
    width: 100%;
    height: 100%;
}
body.portfolio_item #image-container > #image-subtitle {
    position: absolute;
    padding: calc(var(--page-font-size) * 0.5) 0;
    top: 0;
    left: calc(var(--page-font-size) * 8);
    text-align: left;
    opacity: 0;
    font-size: calc(var(--page-font-size) * 0);  
    z-index: 30;
    transition: 0.4s opacity ease, 0.4s font-size ease;
}
body.portfolio_item #image-options {
    position: relative;
    display: flex;
    flex-direction:column;
    margin-bottom: calc(var(--page-font-size) * 0.25);
    margin-left: calc(var(--page-font-size) * 0.25);
    align-items: center;
    filter: drop-shadow(0 0 var(--page-font-size) rgba(0,0,0,0.35));
    z-index: 22;
}
body.portfolio_item #image-options #image-option-button {
    width: calc(var(--page-font-size) * 6);
    padding: calc(var(--page-font-size) * 0.25) 0;
    border-radius: calc(var(--page-font-size) * 0.25);
    text-align: center;
    margin-top: calc(var(--page-font-size) * 0.25);
    justify-content: center;
    background-color: var(--bg-col);
    color: var(--col);
    cursor: pointer;
    font-size: var(--page-font-size);
    user-select: none;
}
body.portfolio_item #image-options #image-options-container {
    max-height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: calc(var(--page-font-size) * 0.25) 0;
    gap: calc(var(--page-font-size) * 0.25);
    overflow-y: scroll;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
body.portfolio_item #image-options::-webkit-scrollbar {
    display: none;
}
body.portfolio_item #image-options-container > .option {
    flex-shrink: 0;
    width: var(--portfolio-item-option-size);
    height: var(--portfolio-item-option-size);
    padding-top: calc(var(--page-font-size) * 0.25);
    display: flex;
    flex-direction: column;
    cursor: pointer;
    overflow: hidden;
}
body.portfolio_item #image-options-container > .option:hover {
    border-radius: calc(var(--page-font-size) * 0.75);
    background-color: rgba(0,0,0,0.25);
}
body.portfolio_item #image-options-container > .option > #image {
    flex: 1;
    background-image: var(--img);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
body.portfolio_item #image-options-container > .option > #title {
    display: none;
    text-align: center;
    font-size: var(--page-font-size);
    user-select: none;
    text-wrap: wrap;
}




body.portfolio_item #item-fullscreen-image {
    display: none;
    height: 100%;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    background-color: var(--bg-col);
    border-radius: var(--page-font-size);
    border: solid var(--col) calc(var(--page-font-size) * 0.25);
}
@media (max-height:600px) {
    body.portfolio_item #item-fullscreen-image {
        height: calc(100vh - var(--nav-bar-height) - var(--footer-height) - var(--page-content-padding-y) - var(--page-margins-y));
    }
}
body.portfolio_item #item-fullscreen-image > #bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--col);
    mask-image: url('/resources/ui/checkerboard.png');
    mask-size: calc(219px * 4);
    image-rendering:pixelated;
    opacity: 0.125;
}
body.portfolio_item #item-fullscreen-image > #image {
    position: relative;
    height: 100%;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    filter: drop-shadow(0 0 calc(var(--page-font-size) * 2) rgba(0,0,0,0.45));
    z-index: 10;
}
body.portfolio_item #item-fullscreen-image > #video {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}
body.portfolio_item #item-fullscreen-image > #video > video {
    width: 100%;
    height: 100%;
}





body.opening .page-content {
    padding-bottom: 0;
}

body.opening #opening-page {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    overflow-y: scroll;
}
body.opening #opening-page > p {
    margin: 0;
    margin-bottom: var(--page-font-size);
    font-size: calc(var(--page-font-size) * 1.5);
}

body.opening #opening-page > #opening-page-container {
    box-sizing: border-box;
    width: 100%;
    max-width: 1368px;
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--page-font-size) * 0.75) calc(var(--page-font-size) * 2);
    overflow: visible;
    justify-content: center;
    align-items: center;
}

body.opening #opening-page > #opening-page-container > .opening-page-item {
    flex-shrink: 0;
    text-align: center;
    font-size: calc(var(--page-font-size) * 2);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transform: scaleX(calc(1 + 48 / 64 * var(--item-scale))) scaleY(calc(1 + 64 / 48 * var(--item-scale)));
    transition: 0.3s transform ease;
}
body.opening #opening-page > #opening-page-container > .opening-page-item:hover {
    --item-scale: 0.05;
    z-index: 100;
    transition: 0.3s transform var(--ease-overshoot-m);
}
body.opening #opening-page > #opening-page-container > .opening-page-item:active, body.opening #opening-page > #opening-page-container > .opening-page-item:focus {
    --item-scale: -0.05;
}

body.opening #opening-page > #opening-page-container > .opening-page-item > #bg {
    height: calc(48px * var(--about-img-scale));
    width: calc(64px * var(--about-img-scale));
    background-image: var(--img);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: var(--page-font-size);
}

body.opening #opening-page > #opening-page-container > .opening-page-item > #title {
    text-align: center;
    vertical-align: middle;
    margin: 0;
}





body.info .page-content > .box {
    --padding: calc(var(--page-font-size) * 3);
    --inner-padding: calc(var(--page-font-size) * 3);
    margin: var(--padding);
    margin-left: 14%;
    margin-right: 14%;
    background: var(--palette-bg-main);
    border-radius: var(--page-font-size);
    width: calc(100% - 14% * 2);
    color: var(--col-page-text);
    font-size: calc(var(--page-font-size) * 2);
    font-weight: normal;
    text-align: left;
    word-wrap: break-word;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    opacity: 0%;
    animation: box-fade-in 0.4s ease-out forwards;
}
.active {
    opacity: 1.0;
}
body.info .page-content > .box {
    --box-bg: var(--palette-bg-main);
    --box-inner-bg: var(--inner-box);
    --box-text: var(--text-color-main);
    --box-link: var(--text-color-link);
    --box-border-width: 4px;
    background-color: var(--box-bg);
    scroll-margin-top: 64px;
    border: solid 4px rgba(255, 255, 255, 0.125);
    transform: translate(-4px, -4px);
    width: calc(100% - 14% * 2 - 4px * 2);
}
body.info .page-content > .box.active {
    animation: box-fade-in 0.4s ease-out forwards, box-active-decay 4s ease-out forwards;
}
@keyframes box-fade-in {
    0% {
        transform: translateY(1em);
        opacity: 0%;
    }
    100% {
        transform: translateY(0em);
        opacity: 100%;
    }
}
@keyframes box-active-decay {
    10% { border-color: white; }
    12% { border-color: rgba(255, 255, 255, 0.125); }
    14% { border-color: white; }
    18% { border-color: white; }
    20% { border-color: rgba(255, 255, 255, 0.125); }
    22% { border-color: white; }
    100% { border-color: rgba(255, 255, 255, 0.125); }
}

body.info .page-content > .box * a {
    color: var(--box-link);
}

body.info .page-content > .box > .info-category {
    margin: 1em;
}

body.info .page-content > .box.active > .info-category {
    margin: calc(1em - var(--box-border-width));
}

body.info .info-category > #title {
    text-align: center;
    font-size: calc(var(--page-font-size) * 3);
    margin-bottom: 0.25em;
}
body.info .info-category > #subtitle {
    text-align: center;
    font-size: calc(var(--page-font-size) * 2);
    margin-bottom: 0.5em;
    pointer-events: none;
    user-select: none;
}

body.info .info-category > #description {
    background-color: var(--box-inner-bg);
    border-radius: 0.5em;
    padding: 1em 2em;
    font-size: calc(var(--page-font-size) * 2);
    color: var(--box-text);
}

body.info .info-category > #description small {
    font-size: calc(var(--page-font-size) * 2);
    font-style: italic;
    opacity: 0.75;
}

body.info .banner {
    position: relative;
    height: calc(var(--page-font-size) * 8);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}