:root {

    --color-black: rgb(0, 0, 0);
    --color-black-90: rgba(0, 0, 0, .9);
    --color-black-80: rgba(0, 0, 0, .8);
    --color-black-70: rgba(0, 0, 0, .7);
    --color-black-60: rgba(0, 0, 0, .6);

    --color-dark-gray: rgb(20, 20, 20);
    --color-dark-gray-90: rgba(20, 20, 20, .9);
    --color-dark-gray-80: rgba(20, 20, 20, .8);
    --color-dark-gray-70: rgba(20, 20, 20, .7);
    --color-dark-gray-60: rgba(20, 20, 20, .6);

    --color-dark-gray-hover: rgb(40, 40, 40);
    --color-dark-gray-hover-90: rgba(40, 40, 40, .9);
    --color-dark-gray-hover-80: rgba(40, 40, 40, .8);
    --color-dark-gray-hover-70: rgba(40, 40, 40, .7);
    --color-dark-gray-hover-60: rgba(40, 40, 40, .6);

    --color-gray: rgb(65, 65, 65);
    --color-gray-90: rgba(65, 65, 65, .9);
    --color-gray-80: rgba(65, 65, 65, .8);
    --color-gray-70: rgba(65, 65, 65, .7);
    --color-gray-60: rgba(65, 65, 65, .6);

    --color-gray-hover: rgb(75, 75, 75);
    --color-gray-hover-90: rgba(75, 75, 75, .9);
    --color-gray-hover-80: rgba(75, 75, 75, .8);
    --color-gray-hover-70: rgba(75, 75, 75, .7);
    --color-gray-hover-60: rgba(75, 75, 75, .6);

    --color-light-gray: rgb(200, 200, 200);
    --color-light-gray-90: rgba(200, 200, 200, .9);
    --color-light-gray-80: rgba(200, 200, 200, .8);
    --color-light-gray-70: rgba(200, 200, 200, .7);
    --color-light-gray-60: rgba(200, 200, 200, .6);

    --color-white: rgb(255, 255, 255);
    --color-white-90: rgba(255, 255, 255, .9);
    --color-white-80: rgba(255, 255, 255, .8);
    --color-white-70: rgba(255, 255, 255, .7);
    --color-white-60: rgba(255, 255, 255, .6);

    --rem: 12px;

    --line-height: 175%;

    --header-height: 6rem;
    --footer-height: 5rem;

    --spacing-extra-small: .5rem;
    --spacing-small: 1rem;
    --spacing-medium: 2rem;
    --spacing-large: 3rem;
    --spacing-extra-large: 4rem;

    --font-size-extra-large-3: 3rem;
    --font-size-extra-large-2: 2.5rem;
    --font-size-extra-large: 2rem;
    --font-size-large: 1.5rem;
    --font-size-regular: 1rem;
    --font-size-small: .8rem;
    --font-size-extra-small: .6rem;

    --font-weight-thin: 100;
    --font-weight-extra-light: 200;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semi-bold: 600;
    --font-weight-bold: 700;
    --font-weight-extra-bold: 800;
    --font-weight-black: 900;

    --font-family: "Inter Tight", sans-serif;

    --max-content-width: 1280px;
    --max-container-width: 800px;
    --page-height: 100%;
    --project-grid-template-columns: repeat(6, 1fr);
    --related-project-grid-template-columns: repeat(3, 1fr);
    --grid-gap: 3rem;
    --grid-gap: 0rem;

    --width-send-button: 20rem;
    --width-form-width: 40rem;

    --width-date: 100px;

    --button-height: 45px;

}

::-webkit-scrollbar {
    display: none;
}

html {
    position: fixed;
    inset: 0;
    padding: 0;
    margin: 0;
    -webkit-text-size-adjust: 100%;
}

body {
    position: fixed;
    inset: 0;
    padding: 0;
    margin: 0;
    background-color: var(--color-dark-gray);
    opacity: 0;
}

body.main {
    opacity: 0;
    background-color: var(--color-dark-gray);
}

* {
    font-family: var(--font-family);
    box-sizing: border-box;
    transition: all 300ms;
    padding: unset;
    margin: unset;
    letter-spacing: -.02em;
}

hr {
    border: none
}

.flex-row {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-small);
    justify-content: space-between;

}

.flex-column {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-small);
    justify-content: center;
    align-items: center;
    text-align: center;
}

svg {
    width: 100%;
    height: 100%;
}

svg * {
    pointer-events: none;
    fill: var(--color-white);
}

.svg-button {
    cursor: pointer;
}

.svg-button * {
    fill: var(--color-light-gray);
    pointer-events: none;
}

.svg-button:hover * {
    fill: var(--color-white);
}

.svg-button.color-dark-gray * {
    fill: var(--color-dark-gray);
    pointer-events: none;
}

.svg-button.color-dark-gray:hover svg * {
    fill: var(--color-gray);
}

.page {
    width: 100%;
    align-items: center;
    position: relative;
    transition: opacity 300ms linear;
    min-height: 100%;
    display: flex;
    justify-content: center;
    opacity: 0;
    overflow-x: hidden;
    background-color: var(--color-dark-gray);
    /* scroll-snap-align: start;
    scroll-snap-stop: always; */
}



.page.projects {
    /* padding-top: var(--header-height);
    padding-bottom: var(--footer-height); */
}

.page-content-container {
    max-width: var(--max-container-width);
    inset: var(--header-height) auto var(--footer-height) auto;
    overflow: hidden;
}

.page-content {
    padding: var(--spacing-large);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-medium);
    margin-top: auto;
    margin-bottom: auto;
    max-height: 100%;
    max-width: var(--max-content-width);
    overflow-y: auto;
    min-height: 0;
    padding: var(--header-height) var(--spacing-large) var(--footer-height) var(--spacing-large);
    color: var(--color-light-gray);

}

#homeGradient {
    position: absolute;
    inset: 0;
    height: 50%;
    background: linear-gradient(to bottom, var(--color-black), var(--color-white));
    mix-blend-mode: multiply;
    pointer-events: none;
    opacity: .75;
}

#topGradient {
    position: fixed;
    inset: 0;
    height: calc(var(--header-height) * 1.5);
    background: linear-gradient(to bottom, var(--color-black), var(--color-white));
    mix-blend-mode: multiply;
    pointer-events: none;
    opacity: .9;
}

#bottomGradient {
    position: fixed;
    inset: auto 0 0 0;
    height: calc(var(--footer-height) * 2);
    background: linear-gradient(to top, var(--color-black), var(--color-white));
    mix-blend-mode: multiply;
    pointer-events: none;
    bottom: 0;
    opacity: .9;
}

body.home #topGradient,
body.home #topGradient {
    opacity: 0;
}

header,
footer {
    position: fixed;
    z-index: 2;
}

header.left {
    inset: var(--spacing-extra-small) auto auto var(--spacing-extra-small);

    height: var(--header-height);
    min-width: var(--header-height);
    display: flex;
    flex-direction: row;
    align-items: center;
}

header.left .logo {
    max-width: calc(var(--header-height) * .75);
    max-height: calc(var(--header-height) * .75);
}

header.right {
    right: var(--spacing-medium);
    height: var(--header-height);
    display: flex;
    flex-direction: row;
    align-items: center;
    top: 0;
}

footer.left {
    inset: auto var(--spacing-small) var(--spacing-small);
    max-width: calc(var(--footer-height) * .5);
    max-height: calc(var(--footer-height) * .5);
    display: flex;
}

footer.right {
    inset: auto var(--spacing-medium) var(--spacing-medium) auto;
    pointer-events: none;
}


#pageName {
    opacity: 0;
    pointer-events: none;
}


#desktopMenu {
    display: flex;
    gap: var(--spacing-small);
}

.menu-item {
    font-size: var(--font-size-regular);
    font-weight: var(--font-weight-semi-bold);
    color: var(--color-light-gray);
    background-color: transparent;
    cursor: pointer;
}

.menu-item:hover {
    color: var(--color-white);
}

.menu-item.home {
    /* display: none; */
}

#hamburger {
    height: 100%;
    padding: var(--spacing-medium);
    display: none;
}

#mobileMenu {
    position: fixed;
    inset: 0;
    background-color: var(--color-black-90);
    opacity: 0;
    pointer-events: none;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: var(--spacing-medium);
}

#content {
    position: fixed;
    inset: 0;
    flex-direction: column;
    height: unset !important;
    overflow-y: scroll;
    background: var(--color-black);
    /* scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    overscroll-behavior: contain; */
}


footer .left .linkedin {
    display: flex;
    flex-direction: row;
    height: 100%;
}

body.showing-menu #hamburger .line1 {
    transform-origin: center;
    transform: rotate(45deg) translateY(30%);
}

body.showing-menu #hamburger .line2 {
    opacity: 0;
}

body.showing-menu #hamburger .line3 {
    transform-origin: center;
    transform: rotate(-45deg) translateY(-30%);
}




.font-size-extra-small {
    font-size: var(--font-size-extra-small);
}

.font-size-small {
    font-size: var(--font-size-small);
}

.font-size-regular {
    font-size: var(--font-size-regular);
}

.font-size-large {
    font-size: var(--font-size-large);
}

.font-size-extra-large {
    font-size: var(--font-size-extra-large);
}

.font-size-extra-large-2 {
    font-size: var(--font-size-extra-large-2);
}

.font-size-extra-large-3 {
    font-size: var(--font-size-extra-large-3);
}





.font-weight-thin {
    font-weight: var(--font-weight-thin);
}

.font-weight-extra-light {
    font-weight: var(--font-weight-extra-light);
}

.font-weight-light {
    font-weight: var(--font-weight-light);
}

.font-weight-regular {
    font-weight: var(--font-weight-regular);
}

.font-weight-medium {
    font-weight: var(--font-weight-medium);
}

.font-weight-semi-bold {
    font-weight: var(--font-weight-semi-bold);
}

.font-weight-bold {
    font-weight: var(--font-weight-bold);
}

.font-weight-extra-bold {
    font-weight: var(--font-weight-extra-bold);
}

.font-weight-black {
    font-weight: var(--font-weight-black);
}

/* Black variants */
.color-black,
.color-black svg * {
    color: var(--color-black);
    fill: var(--color-black);
}

hr.color-black {
    border-bottom: 1px dotted var(--color-black);
}

.color-black-90,
.color-black-90 svg * {
    color: var(--color-black-90);
    fill: var(--color-black-90);
}

hr.color-black-90 {
    border-bottom: 1px dotted var(--color-black-90);
}

.color-black-80,
.color-black-80 svg * {
    color: var(--color-black-80);
    fill: var(--color-black-80);
}

hr.color-black-80 {
    border-bottom: 1px dotted var(--color-black-80);
}

.color-black-70,
.color-black-70 svg * {
    color: var(--color-black-70);
    fill: var(--color-black-70);
}

hr.color-black-70 {
    border-bottom: 1px dotted var(--color-black-70);
}

.color-black-60,
.color-black-60 svg * {
    color: var(--color-black-60);
    fill: var(--color-black-60);
}

hr.color-black-60 {
    border-bottom: 1px dotted var(--color-black-60);
}


/* Dark‑Gray variants */
.color-dark-gray,
.color-dark-gray svg * {
    color: var(--color-dark-gray);
    fill: var(--color-dark-gray);
}

hr.color-dark-gray {
    border-bottom: 1px dotted var(--color-dark-gray);
}

.color-dark-gray-90,
.color-dark-gray-90 svg * {
    color: var(--color-dark-gray-90);
    fill: var(--color-dark-gray-90);
}

hr.color-dark-gray-90 {
    border-bottom: 1px dotted var(--color-dark-gray-90);
}

.color-dark-gray-80,
.color-dark-gray-80 svg * {
    color: var(--color-dark-gray-80);
    fill: var(--color-dark-gray-80);
}

hr.color-dark-gray-80 {
    border-bottom: 1px dotted var(--color-dark-gray-80);
}

.color-dark-gray-70,
.color-dark-gray-70 svg * {
    color: var(--color-dark-gray-70);
    fill: var(--color-dark-gray-70);
}

hr.color-dark-gray-70 {
    border-bottom: 1px dotted var(--color-dark-gray-70);
}

.color-dark-gray-60,
.color-dark-gray-60 svg * {
    color: var(--color-dark-gray-60);
    fill: var(--color-dark-gray-60);
}

hr.color-dark-gray-60 {
    border-bottom: 1px dotted var(--color-dark-gray-60);
}

/* Gray variants */
.color-gray,
.color-gray svg * {
    color: var(--color-gray);
    fill: var(--color-gray);
}

hr.color-gray {
    border-bottom: 1px dotted var(--color-gray);
}

.color-gray-90,
.color-gray-90 svg * {
    color: var(--color-gray-90);
    fill: var(--color-gray-90);
}

hr.color-gray-90 {
    border-bottom: 1px dotted var(--color-gray-90);
}

.color-gray-80,
.color-gray-80 svg * {
    color: var(--color-gray-80);
    fill: var(--color-gray-80);
}

hr.color-gray-80 {
    border-bottom: 1px dotted var(--color-gray-80);
}

.color-gray-70,
.color-gray-70 svg * {
    color: var(--color-gray-70);
    fill: var(--color-gray-70);
}

hr.color-gray-70 {
    border-bottom: 1px dotted var(--color-gray-70);
}

.color-gray-60,
.color-gray-60 svg * {
    color: var(--color-gray-60);
    fill: var(--color-gray-60);
}

hr.color-gray-60 {
    border-bottom: 1px dotted var(--color-gray-60);
}

/* Light‑Gray variants */
.color-light-gray,
.color-light-gray svg * {
    color: var(--color-light-gray);
    fill: var(--color-light-gray);
}

hr.color-light-gray {
    border-bottom: 1px dotted var(--color-light-gray);
}

.color-light-gray-90,
.color-light-gray-90 svg * {
    color: var(--color-light-gray-90);
    fill: var(--color-light-gray-90);
}

hr.color-light-gray-90 {
    border-bottom: 1px dotted var(--color-light-gray-90);
}

.color-light-gray-80,
.color-light-gray-80 svg * {
    color: var(--color-light-gray-80);
    fill: var(--color-light-gray-80);
}

hr.color-light-gray-80 {
    border-bottom: 1px dotted var(--color-light-gray-80);
}

.color-light-gray-70,
.color-light-gray-70 svg * {
    color: var(--color-light-gray-70);
    fill: var(--color-light-gray-70);
}

hr.color-light-gray-70 {
    border-bottom: 1px dotted var(--color-light-gray-70);
}

.color-light-gray-60,
.color-light-gray-60 svg * {
    color: var(--color-light-gray-60);
    fill: var(--color-light-gray-60);
}

hr.color-light-gray-60 {
    border-bottom: 1px dotted var(--color-light-gray-60);
}


/* White variants */
.color-white,
.color-white svg * {
    color: var(--color-white);
    fill: var(--color-white);
}

hr.color-white {
    border-bottom: 1px dotted var(--color-white);
}

.color-white-90,
.color-white-90 svg * {
    color: var(--color-white-90);
    fill: var(--color-white-90);
}

hr.color-white-90 {
    border-bottom: 1px dotted var(--color-white-90);
}

.color-white-80,
.color-white-80 svg * {
    color: var(--color-white-80);
    fill: var(--color-white-80);
}

hr.color-white-80 {
    border-bottom: 1px dotted var(--color-white-80);
}

.color-white-70,
.color-white-70 svg * {
    color: var(--color-white-70);
    fill: var(--color-white-70);
}

hr.color-white-70 {
    border-bottom: 1px dotted var(--color-white-70);
}

.color-white-60,
.color-white-60 svg * {
    color: var(--color-white-60);
    fill: var(--color-white-60);
}

hr.color-white-60 {
    border-bottom: 1px dotted var(--color-white-60);
}



.page.home {
    background-image: url(../images/home.jpg);
    background-position: center;
    background-size: cover;
    text-align: center;
    max-height: 100%;
    min-height: 100%;
    height: 100%;
    overflow: hidden;
    filter: hue-rotate(0deg);
    animation: hueRotate 30s linear infinite;
}

@keyframes hueRotate {
    0% {
        filter: hue-rotate(0deg);
    }

    100% {
        filter: hue-rotate(360deg);
    }
}

.page.home .logo {
    max-width: 150%;
    width: 130vh;
    height: 130vh;
    mix-blend-mode: overlay;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    opacity: .25;
    pointer-events: none;
}

.page.home .name {
    margin-bottom: var(--spacing-extra-small);
}

.page.home .mobileName {
    margin-bottom: var(--spacing-extra-small);
    display: none;
}

.page.home .description {
    display: flex;
    flex-direction: row;
    align-items: center;
    line-height: unset;
    justify-content: center;
}

.page.home hr {
    width: 25%;
}

.page.home .page-content-container {
    width: 80%;
    height: 50%;
    position: relative;
    top: 50%;
    transform: translateY(-100%);
    display: flex;
}

.show-locked {
    opacity: 0;
    pointer-events: none;
}

body.locked .show-locked {
    opacity: 1;
    pointer-events: unset;
}

.show-unlocked {
    opacity: 0;
    pointer-events: none;
}

body.unlocked .show-unlocked {
    opacity: 1;
    pointer-events: unset;
}

.page.home .page-content {
    padding: 0;
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    gap: 0;
}

.page.about #jd1,
.page.about #jd2 {
    background-image: url(../images/jd.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    inset: var(--header-height) auto var(--footer-height) -50%;
    width: 100%;
    background-position: center;
    opacity: 0;
}

.page.about #jd2 {
    inset: var(--header-height) -50% var(--footer-height) auto;
}



.page.connect {
    text-align: center;
}

.page.connect a {
    cursor: pointer;
    color: var(--color-light-gray);
    text-decoration: none;
    font-weight: var(--font-weight-light);
    font-size: var(--font-size-small);
}

.page.connect a:hover {
    color: var(--color-white);
}

.page.connect a .svg-button {
    width: var(--spacing-extra-large);
}

.page.connect a .svg-button * {
    fill: var(--color-light-gray);
}

.page.connect a:hover .svg-button * {
    fill: var(--color-white);
}

.page.connect .flex-column {
    gap: unset;
}



body.home .menu-item.home,
body.about .menu-item.about,
body.projects .menu-item.projects,
body.experience .menu-item.experience,
body.connect .menu-item.connect {
    pointer-events: none;
    font-weight: var(--font-weight-black);
    color: var(--color-white);
}

body.home .page.home,
body.about .page.about,
body.projects .page.projects,
body.experience .page.experience,
body.connect .page.connect {
    opacity: 1;
}


body.about .page.about #jd1,
body.about .page.about #jd2 {
    opacity: .2;
    transition: opacity 1000ms linear 500ms;
}

.page.projects .page-content-container {
    width: 100%;
    max-width: unset;
}

.page.projects .page-content {
    width: 100%;
    max-width: unset;
    display: grid;
    grid-template-columns: var(--project-grid-template-columns);
    grid-auto-rows: min-content;
}

.related-projects {
    padding-top: var(--spacing-medium);
    display: flex;
    gap: var(--spacing-extra-small);
}

.related-projects-grid {
    width: 100%;
    max-width: unset;
    display: grid;
    grid-template-columns: var(--related-project-grid-template-columns);
    grid-auto-rows: min-content;
    padding: var(--spacing-medium);
    gap: var(--spacing-medium);
    border-radius: 5px;
    background-color: var(--color-gray);
}

.project-button {
    aspect-ratio: 1 /1;
    border-radius: 5px;
    position: relative;
    background-size: revert;
    overflow: hidden;
    cursor: pointer;
    box-sizing: border-box;
    border: 2px solid transparent;
}

.project-button:hover {
    box-shadow: 3px 3px 7px rgba(0, 0, 0, .4);
    border: 2px solid var(--color-light-gray-80);
}


.project-button-name {
    position: absolute;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-regular);
    inset: -1px;
    padding: var(--spacing-extra-small);
    background-color: var(--color-dark-gray-90);
    color: var(--color-white-90);
    border-radius: 5px;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    opacity: 0;
}

.project-button:hover>.project-button-name {
    opacity: 1;
}

.project-button-preview {
    position: absolute;
    inset: -1px;
    opacity: 1;
    background-size: cover;
    background-position: center;
}


#projectViewer {
    background-color: var(--color-black-90);
    position: fixed;
    inset: var(--header-height) 0 var(--footer-height);
    inset: 0;
    opacity: 0;
    pointer-events: none;
    z-index: 3;
}

body.project-loaded #content,
body.showing-menu #content {
    filter: blur(5px);
}

body.project-loaded #projectViewer {
    opacity: 1;
    pointer-events: unset;
}

#projectViewer #projectClose {
    inset: var(--spacing-small) var(--spacing-small) auto auto;
    width: var(--spacing-medium);
    height: var(--spacing-medium);
    position: absolute;
    z-index: 1;
}

#projectViewer #projectCopyLink {
    inset: auto var(--spacing-extra-small) var(--spacing-extra-small) auto;
    width: var(--spacing-medium);
    height: var(--spacing-medium);
    position: absolute;
    z-index: 1;
}

#projectFrameContainer {
    position: relative;
    border-radius: 5px;
    max-width: 960px;
    transform: translateX(-50%);
    top: var(--spacing-medium);
    left: 50%;
    width: calc(100% - var(--spacing-medium) - var(--spacing-medium));
    height: calc(100% - var(--spacing-medium) - var(--spacing-medium));
    overflow: hidden;
    box-shadow: 3px 3px 7px var(--color-black-60);
    background-color: var(--color-white);

}


#projectViewer iframe {
    background-color: var(--color-white);
    border: none;
    position: absolute;
    width: 100%;
    height: 100%;
}


.project-content-button,
button {
    color: white;
    cursor: pointer;
    background-color: var(--color-gray);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-small) var(--spacing-medium);
    width: fit-content;
    white-space: nowrap;
    font-weight: var(--font-weight-black);
    font-size: var(--font-size-regular);
    text-decoration: none;
    border-radius: 5px;
    border: none;
}

.project-content-button:hover,
button:hover {
    background-color: var(--color-gray-hover);
}

.project-content-container {
    background-color: var(--color-white);
    position: absolute;
    top: 0;
    bottom: 0;
    overflow: hidden;
    width: 100%;
}

.project-content {
    padding: var(--spacing-large);
    display: flex;
    flex-direction: column;
    margin-top: auto;
    margin-bottom: auto;
    max-height: 100%;
    overflow-y: auto;
    min-height: 0;
    width: 100%;
    color: var(--color-dark-gray);
}


.project-content .header {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-extra-large-3);
    color: var(--color-dark-gray);
    line-height: 1;
}

.project-content .subhead {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-large);
    color: var(--color-gray);
}

.project-content .paragraph {
    font-weight: var(--font-weight-light);
    line-height: 200%;
}

.project-content .paragraph+.paragraph {
    padding-top: var(--spacing-small);
}

.project-content .paragraph+.subhead {
    padding-top: var(--spacing-small);
}


.project-content .paragraph-header {
    font-weight: var(--font-weight-bold);
}


.project-content .image-description {
    text-align: center;
    font-weight: var(--font-weight-black);
    margin-top: calc(var(--spacing-medium) * -1);
    margin-bottom: var(--spacing-medium);
}

.project-content .font-size-large {
    line-height: 150%;
}

.project-content img,
.project-content video {
    padding: var(--spacing-medium) 0;
    max-width: 100%;
}

.flex2x2 {
    display: flex;
    align-items: center;
    gap: var(--spacing-large);
}

#passcodeFormContainer {
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    align-items: center;
    gap: var(--spacing-extra-small);
    position: relative;
    z-index: 10;
}

#passcodeFormContainer input {
    width: 100%;
    max-width: 300px;
    padding: 0 var(--spacing-medium);
    border-radius: 100vmin;
    border: 1px solid transparent;
    outline: none;
    background-color: var(--color-white);
    color: var(--color-dark-gray);
    font-size: var(--font-size-regular);
    font-weight: var(--font-weight-medium);
    font-family: var(--font-family);
    -moz-box-shadow: inset 0 0 var(--spacing-large) rgba(0, 0, 0, .1);
    -webkit-box-shadow: inset 0 0 var(--spacing-large) rgba(0, 0, 0, .1);
    box-shadow: inset 0 0 var(--spacing-large) rgba(0, 0, 0, .1);
    padding: var(--spacing-small);
}

#passcodeMessage {
    color: transparent;
    font-size: var(--font-size-regular);
}

#passcodeMessage.active {
    color: var(--color-black-80);
}

.page.home a {
    font-weight: var(--font-weight-semi-bold);
    color: var(--color-white);
}

.page.home a:hover {
    color: var(--color-white-80);
}

body.mobile .project-button-name {
    opacity: 1;
    top: unset;
    padding: var(--spacing-extra-small);
    padding-bottom: var(--spacing-small);
    border-radius: 0;
}

#linkCopiedConfirm {
    position: fixed;
    inset: 0;
    display: flex;
    background-color: var(--color-black-80);
    opacity: 0;
    pointer-events: none;
    z-index: 10;
    justify-content: center;
    align-items: center;
    font-size: var(--font-size-large);
    color: var(--color-white-80);
    font-weight: var(--font-weight-black);
}

body.linkCopied #projectViewer {
    filter: blur(5px);
}

body.linkCopied #linkCopiedConfirm {
    opacity: 1;
    pointer-events: unset;
}

@media only screen and (max-width: 1480px) {
    :root {
        --project-grid-template-columns: repeat(5, 1fr);
    }
}

@media only screen and (max-width: 1280px) {
    :root {
        --project-grid-template-columns: repeat(4, 1fr);
    }
}

@media only screen and (max-width: 980px) {
    :root {
        --project-grid-template-columns: repeat(3, 1fr);
    }
}

@media only screen and (max-width: 720px) {
    :root {
        --project-grid-template-columns: repeat(2, 1fr);
        --related-project-grid-template-columns: repeat(2, 1fr);
    }

    body.about .page.about #jd1,
    body.about .page.about #jd2 {
        opacity: 0;
    }

    .page.home .name {
        display: none;
    }

    .page.home .mobileName {
        display: unset;
    }

}

@media only screen and (max-width: 500px) {
    :root {
        --project-grid-template-columns: repeat(1, 1fr);
        --related-project-grid-template-columns: repeat(1, 1fr);
    }

    .project-button {
        aspect-ratio: 1 /1;
    }


}



@media only screen and (max-width: 600px) {

    :root {
        --font-size-extra-large-3: 2rem;
        --font-size-extra-large-2: 1.75rem;
        --font-size-extra-large: 1.5rem;
        --font-size-large: 1.25rem;
        --font-size-regular: 1rem;
        --font-size-small: .8rem;
        --font-size-extra-small: .6rem;
    }

    #contactButtons {
        flex-direction: column;
    }

    header.right {
        top: 0;
        right: 0;
        height: var(--header-height);
        width: var(--header-height);
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    #hamburger {
        display: flex;
    }

    body.locked #hamburger {
        display: none;
    }

    #pageName {
        opacity: 1;
    }


    #desktopMenu {
        display: none;

    }

    body.showing-menu #mobileMenu {
        display: flex;
        pointer-events: unset;
        opacity: 1;
        align-content: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: var(--spacing-medium);
    }

    .project-content {
        padding: var(--spacing-medium);
    }

    #projectViewer #projectClose {
        inset: var(--spacing-extra-small) var(--spacing-extra-small) auto auto;
        background-color: var(--color-light-gray-60);
        border-radius: 5px;
    }

    #projectViewer #projectCopyLink {
        inset: auto var(--spacing-extra-small) var(--spacing-extra-small) auto;
        background-color: var(--color-light-gray-60);
        border-radius: 5px;
    }

    .flex2x2 {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-extra-small);
    }


}

#documentLoader {
    border: none;
    inset: 0;
    position: fixed;
    width: 100%;
    height: 100%;
    opacity: 1;
    pointer-events: unset;
}

.hidden {
    opacity: 0;
    pointer-events: none;
}

body.autoPasscodeCheckBody {
    opacity: 0 !important;
    pointer-events: none;
}

#passcodeCheckButton:disabled {
    background-color: var(--color-gray) !important;
    opacity: .25;
    pointer-events: none;
}

#passcodeCheckButton {
    cursor: pointer;
    color: var(--color-white) !important;
    background-color: var(--color-black) !important;
    font-weight: var(--font-weight-black) !important;
}

#passcodeCheckButton:hover {
    background-color: var(--color-dark-gray) !important;
}