/* Universal Styles */
*,
*:before,
*:after,
html {
    margin: 0;
    font-family: Digiset, 'Arial', Helvetica, sans-serif;
    font-weight: 450;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

@font-face {
    font-family: "Digiset";
    src: url(/assets/DigisetGX.ttf);
}


*::selection {
    text-shadow: none;
}

h1::selection,
h2::selection,
h3::selection {
    text-shadow: 0.0em 0.0em 0.2em yellow;
}

:root {
    --base-font-size: 1px;
    /* Base font size for scaling */
}

h1,
h2,
h3 {
    height: auto;
    line-height: 1em;

}

.section-title {
    font-weight: 650;
}


h1 {
    font-size: calc(var(--base-font-size) * 3.2);
    line-height: 0.9em;
    padding-bottom: 0.3em;
}

h2 {
    font-size: calc(var(--base-font-size) * 0.8);

}

h3 {
    font-size: calc(var(--base-font-size) * 1.4);
    text-indent: 1.8em;
    line-height: 1.05em;
    padding-top: 0.15em;
}

.imprint {
    font-size: .2em;
    display: block;
    height: 30px;
}

div.project {
    padding: calc(var(--base-font-size)*0.1) calc(var(--base-font-size)*0.4) calc(var(--base-font-size)*3.5) calc(var(--base-font-size)*0.4);
}

.column {
    display: inline;
    padding-right: 1em;
    flex-basis: 33.3%;
}

/* Body Styles */
body {
    overflow: hidden;
}

/* Header Styles */
.header {
    height: 40px;
    /* Header height */
    background-color: white;
    /* Header background color */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.4em 1em;
    /* border-bottom: 0.05em solid black; */
    z-index: 20;
    /* Ensure header is above other content */
    position: relative;
}

.header-left,
.header-right {
    font-size: 1.5em;
}

/* Container Styles */
.container {
    display: flex;
    height: calc(100vh);
    /* Adjust height based on header height */
    position: fixed;
    /* this literally *fixed* my problem hahahha */
    overflow: hidden;
}

a {
    color: inherit;
    /* text-decoration: underline double rgb(201, 201, 201); */
    text-decoration: none;
    text-decoration-skip-ink: none;
}


a:hover,
#trigger:hover,
span[id^="span-"] {
    color: inherit;
    /* text-decoration: underline double rgb(0, 0, 0); */
    text-decoration: none;
    text-decoration-skip-ink: none;
    cursor: pointer;
}

a:hover::before {
    content: "→ ";
}

#trigger:hover::before {
    content: "→ ";
}

span[id^="span-"]:hover::before {
    content: "→ ";
}




/* Section Styles */
.left-section,
.right-section {
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 100px;
}

.left-section {
    width: 70%;
    background-color: white;
}

.white-bg {
    background: white;
}

.black-bg {
    background: black;
}

.right-section {
    width: 30%;
    background-color: white;
    font-size: 0px;
    text-align: left;
}

/* Divider Styles */
.divider {
    position: absolute;
    width: 3px;
    /* background-color: black; */
    cursor: ew-resize;
    position: relative;
    left: 0%;
    z-index: 1;
    touch-action: none;
    /* Prevent default touch actions */
}


.divider>svg {
    height: 70px;
    transform: translate(-50%, 50vh);

    fill: rgba(0, 0, 0, 0);
    backdrop-filter: invert(100%);
    border-radius: 50%;
}

video {
    content-visibility: auto;
    contain-intrinsic-size: 480px 270px;
    /* approximate placeholder */
}



/* Image Styles */
img,
video {
    width: 100%;
    /* Make images responsive */
    height: auto;
    /* Maintain aspect ratio */
    display: block;
    /* Remove extra spacing below images */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.section::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.section {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

/*_____________________ */

/* CSS class to apply the filter effect */
.filter-blur {
    filter: blur(12px) contrast(30%) brightness(150%) saturate(350%);
    transition: filter 300ms ease-in;
}

.filter-blur-about {
    filter: blur(12px) contrast(30%) brightness(150%) hue-rotate(270deg) saturate(350%);
    transition: filter 300ms ease-in;
}

/* Optional: Additional styles for the target div when the filter is applied */
.target-div {
    transition: filter 300ms ease-in;
    /* Smooth transition for filter changes */
}

.hidden {
    display: none;
}


.overlay,
.about {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
    background-color: rgb(0, 0, 0, 0);
    transition: filter 0.2s ease;
    /* Smooth transition for filter changes */
    text-align: center;
    width: 100%;
    height: 100%;

    align-content: center;
}

.overlay span,
.about span {
    background-color: rgb(0, 0, 0, 0);
    font-size: 1.7em;
    line-height: 1.25em;
    /* text-shadow: 0em 0em 0.2em white; */
}

/* Progressive image reveal */
img.progressive {
    display: block;
    width: 100%;
    height: auto;
}

img.is-loading {
    filter: blur(12px);
    transform: scale(1.02);
}

img.is-loaded {
    filter: none;
    transform: none;
    transition: filter .3s ease, transform .3s ease;
}


@media (max-width: 700px) {

    /* .no-mobile {
        display: none;
    } */

    .header {
        align-items: flex-start;
    }

    .divider>svg {
        height: 40px;
        transform: translate(-50%, 50vh);

        fill: rgba(0, 0, 0, 0);
        backdrop-filter: invert(100%);
        border-radius: 50%;
    }

}