body {
    background-color: var(--background-color);
    overflow-x: hidden;
}

#wrapper {
    width: 100vw;
    min-height: 100vh;
    display: flex;
    flex-flow: column nowrap;
}

/* Header */
header {
    height: max(500px, 100vh);
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
    row-gap: var(--large-padding);
    padding: 0px var(--variable-padding);
}

.header-text {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    gap: var(--padding);
}

.header-title {
    font-size: 8em;
    color: var(--background-alt-color);
    width: fit-content;
    background-color: var(--accent-color);
    padding: var(--large-padding);
    white-space: nowrap;
}

.header-subtitle {
    font-size: 2em;
    width: fit-content;
    background-color: var(--background-alt-color);
    padding: var(--padding);
    white-space: nowrap;
}

.header-logo {
    height: min-content;
    width: max(500px, 30vw);
}

/* Project Grid */
.proj-grid {
    display: flex;
    flex-flow: column nowrap;
    gap: 30vh;
    padding: 0vh var(--variable-padding);
}

/* Project Box Container */
.proj-box-container {
    display: flex;
    min-height: var(--proj-box-base-height);
    width: var(--proj-box-base-width);
}

.proj-box-container.reversed {
    align-self: flex-end;
    justify-content: flex-end;
}

.proj-box-container:hover {
    width: calc(var(--proj-box-base-width) + var(--proj-link-width));
}

/* Project Box */
.proj-box {
    text-decoration: none;
    display: flex;
    flex-flow: row nowrap;
    min-height: min-content;
    width: var(--proj-box-base-width);
    filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.1));
    transition: transform 0.5s ease, filter 0.5s ease;
    text-align: end;
}

.proj-box-container.reversed .proj-box {
    flex-flow: row-reverse nowrap;
    text-align: start;
}

/* .proj-box-container:hover .proj-box {
    transform: translateY(calc(var(--padding) * -1));
    filter: drop-shadow(calc(var(--padding) * -0.5) var(--padding) 0px black);
} */

/* Project Thumbnail */
.proj-thumbnail {
    /* aspect-ratio: 1; */
    width: 100%;
    background-position: center;
    background-size: cover;
    /* border-color: var(--accent-color); */
    /* border-style: solid; */
    /* border-width: 0px; */
    /* transition: border-width 0.2s ease; */
}

/* .proj-box-container:hover .proj-thumbnail {
    border-width: 5px 0px 5px 5px;
} */

/* Project Info */
.proj-info {
    background-color: var(--background-alt-color);
    height: 100%;
    width: var(--proj-info-min-width);
    min-height: min-content;
    min-width: min-content;
    display: flex;
    flex-flow: column nowrap;
    gap: var(--padding);
    padding: var(--padding);
    /* border-color: var(--accent-color); */
    /* border-style: solid; */
    /* border-width: 0px; */
    /* transition: border-width 0.2s ease; */
    /* transition: background-color 0.2s ease; */
}

.proj-box-container:hover .proj-info {
    /* border-width: 5px 5px 5px 0px; */
    /* background-color: var(--background-alt-color); */
}

/* Project Title */
.proj-title {
    color: var(--accent-color);
    font-size: 4em;
    max-height: 1em;
    text-transform: uppercase;
}

/* Project Dates */
.proj-dates {
    font-weight: bold;
    text-transform: uppercase;
}

/* Project Description */
.proj-desc {
    text-align: justify;
}

/* Project Awards */
.proj-awards {
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-end;
    gap: var(--small-padding);
}

.proj-box-container.reversed .proj-awards {
    align-items: flex-start;
}

.proj-award {
    background-color: var(--award-color);
    color: var(--background-color);
    padding: var(--small-padding);
    width: fit-content;
    font-weight: bold;
    text-transform: uppercase;
    white-space: nowrap;
}

.proj-award.gmtk-2022 {
    color: var(--text-color);
}

/* Project Tags */
.proj-tags {
    display: flex;
    flex-flow: row wrap-reverse;
    justify-content: flex-end;
    gap: var(--small-padding);
}

.proj-tag {
    background-color: var(--accent-color);
    color: var(--text-color);
    font-weight: bold;
    max-width: fit-content;
    padding: var(--small-padding);
    text-transform: uppercase;
    white-space: nowrap;
}

.proj-box-container.reversed .proj-tags {
    justify-content: flex-start;
}

/* Project Links */
.proj-links {
    position: absolute;
    z-index: -1;
    top: 0px;
    left: var(--proj-box-base-width);
    width: fit-content;
}

.proj-box-container.reversed .proj-links {
    left: 0px;
}

.proj-link {
    position: absolute;
    left: calc(var(--proj-link-width) * -1);
    width: var(--proj-link-width);
    display: flex;
    flex-flow: row nowrap;
    gap: var(--small-padding);
    padding: var(--small-padding);
    align-items: center;
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    text-align: left;
    background-color: var(--background-alt-color);
    transition: background-color var(--button-fade-time) ease;
    white-space: nowrap;
}

.proj-link>p {
    transition: color var(--button-fade-time) ease;
}

.proj-box-container.reversed .proj-link {
    left: 0px;
}

.proj-box-container:hover .proj-link {
    left: var(--small-padding);
}

.proj-box-container.reversed:hover .proj-link {
    left: calc((var(--proj-link-width) + var(--small-padding)) * -1);
}

.proj-link:nth-child(1) {
    top: calc(0 * var(--proj-link-calc-height));
    height: calc(2 * var(--proj-link-calc-height) - var(--small-padding));
    transition: background-color var(--button-fade-time) ease, color var(--button-fade-time) ease, left var(--proj-link-move-time) cubic-bezier(0.83, 0, 0.17, 1) calc(0 * var(--proj-link-delay-stagger));
}

.proj-link:nth-child(1)>p {
    font-weight: 900;
    font-size: calc(1.25 * var(--text-base-size));
}

.proj-link:nth-child(1):hover {
    background-color: var(--accent-color);
}

.proj-link:nth-child(2) {
    top: calc(2 * var(--proj-link-calc-height));
    transition: background-color var(--button-fade-time) ease, color var(--button-fade-time) ease, left var(--proj-link-move-time) cubic-bezier(0.83, 0, 0.17, 1) calc(1 * var(--proj-link-delay-stagger));
}

.proj-link:nth-child(3) {
    top: calc(3 * var(--proj-link-calc-height));
    transition: background-color var(--button-fade-time) ease, color var(--button-fade-time) ease, left var(--proj-link-move-time) cubic-bezier(0.83, 0, 0.17, 1) calc(2 * var(--proj-link-delay-stagger));
}

.proj-link:nth-child(4) {
    top: calc(4 * var(--proj-link-calc-height));
    transition: background-color var(--button-fade-time) ease, color var(--button-fade-time) ease, left var(--proj-link-move-time) cubic-bezier(0.83, 0, 0.17, 1) calc(3 * var(--proj-link-delay-stagger));
}

.proj-link:nth-child(5) {
    top: calc(5 * var(--proj-link-calc-height));
    transition: background-color var(--button-fade-time) ease, color var(--button-fade-time) ease, left var(--proj-link-move-time) cubic-bezier(0.83, 0, 0.17, 1) calc(4 * var(--proj-link-delay-stagger));
}

.proj-link:nth-child(6) {
    top: calc(6 * var(--proj-link-calc-height));
    transition: background-color var(--button-fade-time) ease, color var(--button-fade-time) ease, left var(--proj-link-move-time) cubic-bezier(0.83, 0, 0.17, 1) calc(5 * var(--proj-link-delay-stagger));
}

.proj-link:hover {
    background-color: var(--text-color);
}

.proj-link:hover>p {
    color: var(--background-alt-color);
}

.proj-link>img {
    filter: none;
    height: var(--text-base-size);
    aspect-ratio: 1;
    transition: filter var(--button-fade-time) ease;
}

.proj-link:hover>img {
    /* --background-alt-color */
    filter: brightness(0) saturate(100%) invert(25%) sepia(0%) saturate(2761%) hue-rotate(176deg) brightness(99%) contrast(94%);
}

@media screen and (max-width: 2250px) {
    .header-title {
        font-size: 6em;
    }
}

@media screen and (max-width: 2000px) {
    :root {
        --proj-box-base-width: 60vw;
    }
}

@media screen and (max-width: 1750px) {
    header {
        flex-flow: column-reverse;
        justify-content: center;
    }
    .header-text {
        align-items: center;
    }
}

@media screen and (max-width: 1000px) {
    .header-title {
        font-size: 4em;
    }
}