:root {
    /* Grid */
    --col-margin: 24px;
    --col-gutter: 16px;
    --col-total: 12;
    --row-margin: 24px;
    --row-gutter: 16px;
    --rows-total: 8;

    /* Column Widths */
    --col-1: calc((100vw - (var(--col-margin) * 2) - (var(--col-gutter) * (var(--col-total) - 1))) / var(--col-total));
    --col-2: calc(var(--col-1) * 2 + var(--col-gutter));
    --col-3: calc(var(--col-1) * 3 + var(--col-gutter) * 2);
    --col-4: calc(var(--col-1) * 4 + var(--col-gutter) * 3);
    --col-5: calc(var(--col-1) * 5 + var(--col-gutter) * 4);
    --col-6: calc(var(--col-1) * 6 + var(--col-gutter) * 5);
    --col-7: calc(var(--col-1) * 7 + var(--col-gutter) * 6);
    --col-8: calc(var(--col-1) * 8 + var(--col-gutter) * 7);
    --col-9: calc(var(--col-1) * 9 + var(--col-gutter) * 8);
    --col-10: calc(var(--col-1) * 10 + var(--col-gutter) * 9);
    --col-11: calc(var(--col-1) * 11 + var(--col-gutter) * 10);
    --col-12: calc(var(--col-1) * 12 + var(--col-gutter) * 11);

    /* Row Heights */
    --row-1: calc((100vh - (var(--row-margin) * 2) - (var(--row-gutter) * (var(--rows-total) - 1))) / var(--rows-total));
    --row-1: calc((100dvh - (var(--row-margin) * 2) - (var(--row-gutter) * (var(--rows-total) - 1))) / var(--rows-total));
    --row-2: calc(var(--row-1) * 2 + var(--row-gutter));
    --row-3: calc(var(--row-1) * 3 + var(--row-gutter) * 2);
    --row-4: calc(var(--row-1) * 4 + var(--row-gutter) * 3);
    --row-5: calc(var(--row-1) * 5 + var(--row-gutter) * 4);
    --row-6: calc(var(--row-1) * 6 + var(--row-gutter) * 5);
    --row-7: calc(var(--row-1) * 7 + var(--row-gutter) * 6);
    --row-8: calc(var(--row-1) * 8 + var(--row-gutter) * 7);

    /* Z-Index Variables */
    --z-background: -1;
    --z-base: 0;
    --z-content: 10;
    --z-dropdown: 20;
    --z-modal: 30;
    --z-toast: 40;
    --z-tooltip: 50;

    /* Colors & Fonts */
    --background-color: #0A0A0A;
    --text-color: #efe9ec;
    --font-size: 1.25rem;
    --line-height: 1.5rem;

    /* Button */
    --button-padding-top: 0.2rem;
    --button-padding-left: 0.9rem;
    --button-border-radius: 12px;

    /* Opacity */
    --lights-on: 1;
    --lights-up: 0.95;
    --lights-mid: 0.75;
    --lights-down: 0.1;
    --lights-off: 0;
}

/* Mobile Sizes */
/*@media (max-width: 1023px) {*/
@media (max-width: 767px) {

        :root{
    --col-margin: 18px;
    --col-gutter: 12px;
    --row-margin: 18px;
    --row-gutter: 12px;

    --font-size: 1rem;
    --line-height: 1.25rem;

    --button-padding-top: 0.166rem;
    --button-padding-left: 0.8rem;
     --button-border-radius: 10px;
    }
}
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    transition: 0.2s ease-in-out;
}

html,
body {
    width: 100%;
    height: 100%;
    background-color: var(--background-color);
    color: var(--text-color);
    font-family: 'Aspekta', 'Arial', sans-serif;
    z-index: var(--z-background);
}

div {
    display: flex;
    font-size: var(--font-size);
    line-height: var(--line-height);
    /*column-gap: var(--col-gutter);*/
    /*row-gap: var(--row-gutter);*/
}

p,
a {
    font-size: var(--font-size);
    line-height: var(--line-height);
    font-weight: 450;
}

.page-container {
    position: relative;
    width: 100vw;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* prevent tiny scrollbars from rounding issues */
    z-index: var(--z-base);
}

.background-container {
    position: fixed;
    width: 100%;
    height: 100%;
    /*z-index: -1; !* Position the background behind all content *!*/
}

.background-image {
    position:absolute;
    background-image: url('assets/background-images/517309617_10230064826059963_6652586662792897926_n.jpg');
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;

}

.background-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(60px); /* Blur effect */
    background-color: rgba(0, 0, 0, 0.8); /* Fallback for browsers that don't support backdrop-filter */
}

/* Studio Description */
.studio-description-container {
    position: absolute;
    /*width: var(--col-12);*/
    top: var(--col-margin);
    left: var(--col-margin);
    display: block;
    font-size: 1.25rem;
    line-height: 1.5rem;
    color: var(--text-color);
    opacity: var(--lights-mid);
    z-index: var(--z-dropdown);
    transition: opacity 180ms ease-in-out;
}

.studio-description-container:hover {
    opacity: var(--lights-up);
}

.studio-description {
    display: block;
    transition: opacity 180ms ease-in-out;
}

.studio-description:hover {
    opacity: var(--lights-up);
}

#typing-container {
    display: block;
    position: relative;
    max-height: calc(var(--line-height) * 3);
    overflow: hidden;
    transition: max-height 360ms cubic-bezier(.2, .9, .2, 1);
    contain: layout paint style;
}

#typing-text {
    display: block;
    width: 100%;
    font-size: var(--font-size);
    line-height: var(--line-height);
    transform: translateY(0) translateZ(0);
    transform-origin: top left;
    will-change: transform;
    transition: transform 360ms cubic-bezier(.2, .9, .2, 1);
    will-change: transform;
    opacity: var(--lights-mid);
}

#typing-text .parchment {
    display: block;
    width: 100%;
}

#typing-text .parchment .line {
    display: block;
    width: 100%;
    min-height: var(--line-height);
    white-space: pre-wrap;
    word-break: break-word;
    box-sizing: border-box;
    /*background-color: var(--background-color);*/
    /*border-radius: 3px;*/
}

#typing-text .char {
    display: inline-block;
    white-space: pre;
    line-height: inherit;
    opacity: 0;
    will-change: opacity;
    transition: opacity 40ms linear;
}

#typing-text .char.visible {
    opacity: 1;

}

.studio-description-container:hover #typing-container {
    /*max-height: calc(var(--line-height) * 20);*/
    background: none;
    padding: 0;
    z-index: 999;
}

/*@supports(selector(:has(.studio-description-container:hover))) {*/
/*    .page-container:has(.studio-description-container:hover) {*/
/*        --lights-mid: var(--lights-down);*/
/*    }*/
/*}*/
.studio-description-container:hover ~ .collaborators-container,
.studio-description-container:hover ~ .menu,
.studio-description-container:hover ~ .contact-container,
.studio-description-container:hover ~ .logo-container {
    opacity: var(--lights-down);
    filter: blur(4px); /* Blur effect */
}

.studio-description-container:hover ~ .background-overlay {
    background-color: rgba(0, 0, 0, 0.95)!important;

}

#typing-text .font-200 {
    font-weight: 200;
}

#typing-text .font-450 {
    font-weight: 450;
}

.studio-description-container:hover #typing-text > * {
    pointer-events: auto;
}

/* Collaborators */
.collaborators-container {
    position: absolute;
    top: var(--col-margin);
    right: calc(var(--col-margin) + var(--col-1) + var(--col-gutter));
    width: var(--col-4);
    font-size: 1.25rem;
    color: var(--text-color);
    opacity: var(--lights-mid);
    column-gap: var(--col-gutter);
    z-index: var(--z-content);
}

.collaborator {
    width: var(--col-2);
    flex-direction: column;
    font-weight: 450;
    opacity: var(--lights-mid);
    transition: opacity 180ms ease-in-out;
}

.collaborator:hover {
    opacity: var(--lights-up);
}

.collaborator .coordinates {
    font-weight: 200;
}

.collaborator .name {
    margin-top: calc(var(--row-2) - var(--line-height) + var(--row-gutter));
}

.collaborator .skills {
    font-weight: 200;
}

/* Menu */
.menu {
    position: absolute;
    bottom: 0;
    left: var(--col-margin);
    width: var(--col-3);
    font-size: 2.25rem;
    line-height: 5rem;
    font-weight: 300;
    z-index: var(--z-dropdown);
}

.menu ul {
    list-style: none;
}

.nav-item {
    display: inline-block;
    position: relative;
    margin: 0;
    padding-right: 3.5rem;
    color: var(--text-color);
    text-transform: uppercase;
    opacity: var(--lights-mid);
    overflow: visible;
    transition: 0.2s ease-in-out;
}

.nav-item.active {
    opacity: var(--lights-up);
}

.nav-item:hover {
    opacity: var(--lights-up);
}

.nav-item::after {
    content: '←';
    position: absolute;
    opacity: var(--lights-off);
    transform: translateX(2rem);
    transition: 0.2s ease-in-out;
}

.nav-item:hover::after {
    opacity: var(--lights-on);
    transform: translateX(0.5rem);
}

/* Contact */
.contact-container {
    position: fixed;
    bottom: var(--col-gutter);
    left: 50%;
    transform: translateX(-50%);
    transform-origin: center center;
    transition: 0.2s ease-in-out;
    z-index: var(--z-dropdown);
}

.email-button {
    display: inline-block;
    padding: var(--button-padding-top) var(--button-padding-left);
    border: 1px solid var(--text-color);
    border-radius: var(--button-border-radius);
    background-color: transparent;
    color: var(--text-color);
    font-weight: 300;
    opacity: var(--lights-mid);
    text-decoration: none;
    transition: opacity 0.2s ease-in;
}

.email-button-text {
    display: block;
    transform: translateY(0);
}

.email-button:hover {
    background-color: rgba(255, 255, 255, 0);
    color: #fff;
    opacity: var(--lights-up);
}

.email-button:active {
    opacity: var(--lights-on);
    transition: opacity 80ms ease-in-out;
}

/* Logo */
.logo-container {
    position: absolute;
    bottom: calc(var(--row-1) + var(--row-margin) + var(--row-gutter));
    left: 50%;
    transform: translate(-52%, 0%);
    opacity: var(--lights-up);
    transition: 0.2s ease-in-out;
    z-index: var(--z-content);
}

.logo-img {
    width: var(--col-6);
    height: auto;
    opacity: var(--lights-mid);
    transition: opacity 0.2s ease-in;
}

.logo-img:hover {
    opacity: var(--lights-up);
}

.logo-img:active {
    opacity: var(--lights-on);
    transition: opacity 80ms ease-in-out;
}


/* Vertical Styles */
@media (max-aspect-ratio: 1/1) {
    .studio-description-container {

    }

    .contact-container {
        justify-content: flex-start;
        position: fixed;
        bottom: auto;
        top: calc(var(--row-margin) + var(--row-1) + var(--row-gutter) - var(--button-padding-top));
        left: calc(var(--col-margin) - var(--button-padding-left));
        transform: none;
    }

    .collaborators-container {
        width: var(--col-12);
        top: calc(var(--row-margin) + var(--row-3) + var(--row-gutter));
        left: var(--col-margin);
    }

    .collaborator {
        width: var(--col-6);
        /*padding: var(--col-gutter);*/
        /*box-sizing: border-box;*/
    }
    .collaborator .name {
        margin-top: calc(var(--row-1) - var(--line-height) + var(--row-gutter));
    }

    .logo-container {
        position: fixed;
        bottom: calc(var(--row-margin));
        bottom: calc(var(--row-margin) + env(safe-area-inset-bottom, 0));
        left: 50%;
        transform: translateX(-50%);
    }

    .logo-img {
        width: var(--col-12);
    }

}