:root {
    /* Colors */
    --color-bg: #47561e;
    --color-link: #d7d419;
    --color-link-hover: #FFFDF6;
    --color-text: #FFFDF6;
    --color-title-hover: #8027c0;

    /* Fonts */
    --font-heading: "Shrikhand", serif;
    --font-main: "Space Mono", monospace;
    --font-size-small: clamp(0.8rem, 1.5vw, 1rem);
    --font-size-medium: clamp(1rem, 2vw, 1.25rem);
    --font-size-large: clamp(1.5rem, 3vw, 2rem);
    --font-size-centered-title: clamp(5rem, 10vw, 10rem);
    --font-size-h1: clamp(2.5rem, 8vw, 5rem);
    --font-size-small-mobile: clamp(0.5rem, 1vw, 0.75rem);
    --font-size-medium-mobile: clamp(0.75rem, 1vw, 1rem);
    --font-size-large-mobile: clamp(1.25rem, 2vw, 1.75rem);
    --font-size-centered-title-mobile: clamp(5rem, 10vw, 10rem);
    --font-size-h1-mobile: clamp(1.5rem, 6vw, 3rem);
    --font-size-back-button-mobile: clamp(0.9rem, 3vw, 1.1rem);
    --font-size-pre-mobile: clamp(0.7rem, 2.5vw, 1rem);
    --font-weight-bold: 700;
    --font-weight-main: 400;

    /* Sizing and layout */
    --height-body: 100vh;
    --width-body: 100vw;
    --margin-body: 0;
    --margin-pre: 2rem;
    --max-width-img-small: 10vw;
    --max-width-img-medium: 20vw;
    --max-width-img-large: 50vw;
    --max-width-img-small-mobile: 20vw;
    --max-width-img-medium-mobile: 30vw;
    --max-width-img-large-mobile: 50vw;
    --padding-body: 0;
    --padding-main: 2rem 1rem;
    --padding-title: 0 0.2em;
    --padding-grid-item: 2rem;
    --padding-grid-item-mobile: 4rem;
    --row-gap-grid: 2vh;
    --column-gap-grid: 2vw;
    --row-gap-grid-mobile: 4vh;
    --column-gap-grid-mobile: 4vw;
    --offset-top-extra: 4rem;
    --line-height: 1.6;
    --z-index-back-button: 2;
    --z-index-title: 3;

    /* Transitions */
    --transition-body-bg-color: background-color 0.8s ease-in-out;
    --transition-body-opacity: opacity 0.8s ease-in-out;
    --transition-title-color: color 0.3s ease-in-out;
    --transition-title-opacity: opacity 0.3s ease-in-out;

    /* Background Images */
    --background-image-default: url('a/i/jungle_diffusion_3.png');

    /* Glow Effect */
    --glow-small: 4px;
    --glow-medium: 8px;
    --glow-large: 12px;

}

body {
    height: var(--height-body);
    width: var(--width-body);
    margin: var(--margin-body);
    padding: var(--padding-body);
    font-family: var(--font-main);
    font-size: var(--font-size-medium);
    font-style: normal;
    font-weight: var(--font-weight-main);
    line-height: var(--line-height);
    text-transform: lowercase;
    background-color: var(--color-bg);
    color: var(--color-text);
    background-repeat: repeat;
    background-position: center center;
    background-size: cover;
}

body.home::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    z-index: -1;
    background-image: var(--background-image-default);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 1;
    transition: var(--transition-body-opacity);
    pointer-events: none;
}

body.solid-bg {
    background-image: none;
    transition: var(--transition-body-bg-color);
}

body.solid-bg::before {
    opacity: 0;
}

.layout {
    width: 100vw;
    max-width: 100%;
    box-sizing: border-box;
    padding: var(--padding-grid-item);
    padding-top: calc(var(--margin-pre) + var(--padding-grid-item));
}

.three-by-three-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    height: 100vh;
    position: relative;
    row-gap: var(--row-gap-grid);
    column-gap: var(--column-gap-grid);
}

.three-by-three-grid>div {
    display: flex;
    height: 100%;
    width: 100%;
}

.three-by-three-grid>div>a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: auto;
}

.three-by-three-grid img,
.three-by-three-grid iframe {
    height: 100%;
    width: auto;
    object-fit: contain;
    box-sizing: border-box;
}

/* top-left or left-top */
.grid-tl,
.grid-lt {
    grid-area: 1 / 1;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
}

/* top-center or center-top */
.grid-tc,
.grid-ct {
    grid-area: 1 / 2;
    align-items: flex-start;
    justify-content: center;
    text-align: center;
}

/* top-right or right-top */
.grid-tr,
.grid-rt {
    grid-area: 1 / 3;
    align-items: flex-start;
    justify-content: flex-end;
    text-align: right;
}

/* middle-left or left-middle */
.grid-cl,
.grid-lc {
    grid-area: 2 / 1;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
}

/* center-center */
.grid-cc {
    grid-area: 2 / 2;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* center-center (full-width) */
.grid-cc-wide {
    grid-area: 2 / 1 / 3 / 4;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 100%;
}

/* center-right or right-center */
.grid-cr,
.grid-rc {
    grid-area: 2 / 3;
    align-items: center;
    justify-content: flex-end;
    text-align: right;
}

/* bottom-left or left-bottom */
.grid-bl,
.grid-lb {
    grid-area: 3 / 1;
    align-items: flex-end;
    justify-content: flex-start;
    text-align: left;
}

/* bottom-center or center-bottom */
.grid-bc,
.grid-cb {
    grid-area: 3 / 2;
    align-items: flex-end;
    justify-content: center;
    text-align: center;
}

/* bottom-right or right-bottom */
.grid-br,
.grid-rb {
    grid-area: 3 / 3;
    align-items: flex-end;
    justify-content: flex-end;
    text-align: right;
}

.flex-column {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 4vh;
}

.flex-column pre {
    width: 100%;
    max-width: 90ch;
    text-align: left;
}

.uppercase {
    text-transform: uppercase;
}

a,
.back-button {
    color: var(--color-link);
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
}

a:hover,
.back-button:hover {
    color: var(--color-link-hover);
    text-transform: inherit;
    text-decoration: underline;
}

a img {
    animation: glow-pulse 2.5s ease-in-out infinite;
    transition: box-shadow 0.3s ease-in-out;
    border-radius: 4px;
}

a:hover img,
a:focus img,
a:active img {
    animation: none;
    box-shadow: 0 0 var(--glow-large) var(--glow-large) var(--color-title-hover);
}

.img-small {
    max-width: var(--max-width-img-small);
}

.img-medium {
    max-width: var(--max-width-img-medium);
}

.img-large {
    max-width: var(--max-width-img-large);
}

.grid-cc-wide.hover-active .centered-title {
    opacity: 0;
}

.grid-cc-wide.hover-active .hover-reveal-text {
    opacity: 1;
    pointer-events: auto;
}

.centered-title,
.hover-reveal-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 90%;
    text-align: center;
}

.centered-title {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: var(--font-size-centered-title);
    color: var(--color-text);
    text-transform: lowercase;
    text-align: center;
    z-index: var(--z-index-title);
    cursor: default;
    user-select: none;
    -webkit-user-select: none;
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
    margin: 0 auto;
    padding: var(--padding-title);
    width: 100%;
    max-width: none;
    overflow: visible;
}

.hover-reveal-text {
    display: block;
    text-align: left;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-in-out;
    z-index: calc(var(--z-index-title) + 1);
    width: 100%;
}

pre {
    font-family: var(--font-main);
    max-width: 90vw;
    box-sizing: border-box;
}

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

.pre-medium {
    font-size: var(--font-size-medium);
}

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

.back-button {
    position: absolute;
    top: var(--margin-pre);
    left: var(--margin-pre);
    background: none;
    border: none;
    font-family: var(--font-main);
    font-size: var(--font-size-medium);
    z-index: var(--z-index-back-button)
}

.webgl-embed iframe {
    border: none;
    width: 100%;
    height: 80vh;
}

/* Swap-container styles */

.swap-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.centered-title,
.hover-reveal-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 90%;
    text-align: center;
    transition: opacity 0.3s ease-in-out;
}

.centered-title {
    opacity: 1;
}

.hover-reveal-text {
    opacity: 0;
    pointer-events: none;
}

.swap-container:hover .centered-title {
    opacity: 0;
}

.swap-container:hover .hover-reveal-text {
    opacity: 1;
    pointer-events: auto;
}

@keyframes glow-pulse {

    0%,
    100% {
        box-shadow: 0 0 var(--glow-small) var(--glow-small) var(--color-title-hover);
    }

    50% {
        box-shadow: 0 0 var(--glow-large) var(--glow-large) var(--color-title-hover);
    }
}

@media (max-width: 768px) {
    .three-by-three-grid {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        height: auto;
        row-gap: var(--row-gap-grid-mobile);
        column-gap: var(--column-gap-grid-mobile);
        padding: var(--padding-grid-item-mobile);
        padding-top: calc(var(--margin-pre) + var(--padding-grid-item-mobile));
    }

    .three-by-three-grid>div {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        flex: none;
    }

    .three-by-three-grid img,
    .three-by-three-grid iframe {
        max-width: 60vw;
    }

    .centered-title {
        display: none;
    }

    .hover-reveal-text {
        opacity: 1 !important;
        pointer-events: auto;
        position: static;
        transform: none;
        text-align: left;
    }

    .img-small {
        max-width: var(--max-width-img-small-mobile);
    }

    .img-medium {
        max-width: var(--max-width-img-medium-mobile);
    }

    .img-large {
        max-width: var(--max-width-img-large-mobile);
    }

    h1 {
        font-size: var(--font-size-h1-mobile);
    }

    .back-button {
        font-size: var(--font-size-back-button-mobile);
    }

    pre {
        font-size: var(--font-size-pre-mobile);
    }

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

    .pre-medium {
        font-size: var(--font-size-medium-mobile);
    }

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

    .grid-item {
        padding: var(--padding-grid-item-mobile);
    }
}