/* BACKGROUND */
body{
    background-color: var(--background-color-old);
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
}
.Background_Container{
    display: flex;
    position: fixed;
    overflow: hidden;
    z-index: -100;
    width: 100vw;
    height: 100vh;
}
.FullscreenAbsolute{ position: absolute; width: 100vw; height: 100vh; }
.BackgroundImage{
    object-position: center center;
    object-fit: cover;
    -o-object-position: center center;
    -o-object-fit: cover;
    filter: saturate(0) contrast(.4) sepia(25%) hue-rotate(180deg) blur(5px);
}
.CustomBackgroundStyle{
    background-color: var(--custom-color);
    mix-blend-mode: var(--blend-mode);
}
.GradientBackground {
    opacity: .075;
    background: linear-gradient(45deg, var(--highlight-color), rgba(255, 255, 255, 0));
    mix-blend-mode: hard-light;
}
/* GRID BACKGROUND DECORATION*/
.GridBackground{
    opacity: .05;
    background-image: url("../Assets/_Background/GridBackground.png");
    background-size: var(--square-size);
    background-position: center top;
}
.DashedBox_Container{
    position: absolute;
    width: var(--base-distance);
    height: var(--base-distance);
    left: calc(var(--width) * var(--base-distance) + var(--left-space));
    top: calc(var(--height) * var(--base-distance));
    animation: FlickerFade infinite 15s cubic-bezier(0.35, 0.28, 0.17, 1.68);
    opacity: 1;
}
.DashedBackground{
    width: 100%;
    height: 100%;
    opacity: .1;
    background: repeating-linear-gradient(-45deg, transparent, #ffffff 2px, transparent 2px, transparent 10px);
}
@keyframes FlickerFade {
    0% { opacity: 0; }
    20% { opacity: 0; }
    30% { opacity: 1; }
    40% { opacity: 1; }
    41% { opacity: 0; }
    42% { opacity: .75; }
    43% { opacity: 0; }
    44% { opacity: .5; }
    45% { opacity: 0; }
    100% { opacity: 0; }
}


/* FOREGROUND */
.Foreground_Container{
    display: flex;
    position: fixed;
    overflow: hidden;
    z-index: 500;
    width: 100vw;
    height: 100vh;
}
.ForegroundDarkGradient{
    display: flex;
    position: fixed;
    bottom: 0;
    opacity: 0.75;
    background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 100%);
}

/* BASE PAGE CONTAINER */
.Page{
    display: flex;
    position: absolute;
    width: 100vw;
    height: fit-content;
    pointer-events: none;
    opacity: 1;
    transition: opacity ease 1s;
}
.TextPage > *:not(.BaseGridLayout_Container){
    max-width: 728px;
    margin-left: auto;
    margin-right: auto;
}
.Page_Container{
    pointer-events: auto;
    position: relative;
    width: calc(var(--base-distance) * 18);
    height: fit-content;
    margin: 0 auto;
}
/* FULL PAGE HEIGHT */
.Page:has(.FullPageHeight_Container){ top: 0; }
.FullPageHeight_Container{
    display: flex;
    position: relative;
    height: 100vh;
}
/* HIDDEN PAGE */
.HiddenPage{
    pointer-events: none;
    opacity: 0;
    overflow: hidden;
}
.HiddenPage *{ pointer-events: none; }
@media screen and (max-width: 1400px), (max-height: 900px) {
    .Page{ will-change: transform; }
    .Page_Container{
        max-width: calc(var(--base-distance) * 9);
    }
}
@media screen and (max-width: 1100px) {
    .Page:has(.FullPageHeight_Container){ top: 120px; }
    .FullPageHeight_Container{ height: fit-content; }
}
@media screen and (max-width: 768px) {
    .Page_Container{
        max-width: 85%;
        width: 85%;
    }
}



/* PROJECT PAGE CONTAINER */
.ProjectPage{
    position: fixed;
    inset: 0;
    z-index: 100;
    background-color: var(--background-project);
    backdrop-filter: blur(30px);
    opacity: 0;
    pointer-events: none;
    scroll-behavior: smooth;
}
.ProjectData_Container{
    position: relative;
    width: 70%;
    max-width: 728px;
    height: fit-content;
    margin: auto;
    overflow: hidden;
}
.OpenProjectPage{
    opacity: 1;
    pointer-events: auto;
    overflow: auto;
}
@media screen and (max-width: 768px) {
    .ProjectPage{ will-change: transform; }
    .ProjectData_Container{
        max-width: 85%;
        width: 85%;
    }
}


/* GRID LAYOUT */
.BaseGridLayout_Container{
    --row-amount: 1;
    --height: calc(var(--base-distance) * 5.75);
    display: grid;
    position: relative;
    width: 100%;
    margin: 0 auto 24px auto;

    grid-template-columns: repeat(4, minmax(0, 3fr));
    grid-template-rows: repeat(var(--row-amount), var(--height));
    gap: 24px;
}
.SecondRowLayout{ --row-amount: 2;}
.BaseGridElement{ position: relative; grid-row: span 1; grid-column: span 1; }
@media screen and (max-width: 1400px), (max-height: 900px) {
    .BaseGridLayout_Container{
        --row-amount: 2;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .SecondRowLayout{ --row-amount: 4;}
}
@media screen and (max-width: 768px) {
    .BaseGridLayout_Container{
        --row-amount: 4;
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    .SecondRowLayout{ --row-amount: 8;}
}