/* VARIABLES */
@media (min-width: 0px) {
    :root {
        --debugColor: rgba(255, 255, 255, 0.1);
        --debugColor: rgba(255, 255, 255, 0.0);


        --backgroundColor: rgb(15, 15, 15);
        --headerColor: var(--backgroundColor);
        --footerColor: var(--backgroundColor);
        --gradient: 20px;
        --borderColor: rgba(255, 255, 255, 0.2);

        --transitionOver: 0.3s;
        --transitionAway: 0.6s;
        --backgroundDarkener: rgba(0, 0, 0, 0.1);
        --backgroundBrightener: rgb(255, 255, 255, 0.03);

        --imageDarkener: rgba(0, 0, 0, 0.5);

        --firstHighlight: rgb(255, 166, 0);
        --firstHighlightCSS: brightness(0) saturate(100%) invert(68%) sepia(25%) saturate(5254%) hue-rotate(1deg) brightness(106%) contrast(104%);
        --secondHighlight: #c20ee6;
        --secondHighlightCSS: brightness(0) saturate(100%) invert(46%) sepia(89%) saturate(6962%) hue-rotate(279deg) brightness(89%) contrast(122%);

        --red: rgb(204, 7, 30);
        --green: rgb(88, 214, 83);

        --buttonBakckground: var(--firstHighlight);
        --buttonText: rgb(0, 0, 0);
        --buttonHover: var(--secondHighlight);
        --buttonTextHover: var(--buttonText);

        --inputBG: var(--backgroundColor);
        --normalTextAndOutlines: rgb(220, 220, 220);
        --boldNormalText: rgb(255, 255, 255);
        --dimText: rgba(255, 255, 255, 0.3);

        --backgroundScrollbar: var(--backgroundColor);
        --backgroundScrollbarThumb: rgb(255, 255, 255, 0.2);
        --backgroundScrollbarThumbHover: rgba(255, 255, 255, 0.4);

        --heightHeader: 40px;
        --heightFooter: 20px;

        --font-family: 'Inter';
        --fontWeightHigh: 800;
        --fontWeightMid: 600;
        --fontWeightLow: 400;

        --gradient:
            radial-gradient(circle at 130% 15%, rgb(51, 33, 33) 0%, rgb(39, 24, 41) 30%, rgb(19, 20, 24) 100%);
        --backgroundGradient:
            radial-gradient(2px 2px at 5% 35%, rgba(255, 255, 255, 1.0), transparent 45%),
            radial-gradient(2px 2px at 10% 55%, rgba(255, 255, 255, 1.0), transparent 45%),
            radial-gradient(2px 2px at 15% 10%, rgba(255, 255, 255, 1.0), transparent 45%),
            radial-gradient(2px 2px at 20% 80%, rgba(255, 255, 255, 1.0), transparent 45%),
            radial-gradient(2px 2px at 25% 50%, rgba(255, 255, 255, 1.0), transparent 45%),
            radial-gradient(2px 2px at 30% 75%, rgba(255, 255, 255, 1.0), transparent 45%),
            radial-gradient(2px 2px at 35% 15%, rgba(255, 255, 255, 1.0), transparent 45%),
            radial-gradient(2px 2px at 40% 30%, rgba(255, 255, 255, 1.0), transparent 45%),
            radial-gradient(2px 2px at 45% 70%, rgba(255, 255, 255, 1.0), transparent 45%),
            radial-gradient(2px 2px at 50% 25%, rgba(255, 255, 255, 1.0), transparent 45%),
            radial-gradient(2px 2px at 55% 85%, rgba(255, 255, 255, 1.0), transparent 45%),
            radial-gradient(2px 2px at 60% 45%, rgba(255, 255, 255, 1.0), transparent 45%),
            radial-gradient(2px 2px at 65% 95%, rgba(255, 255, 255, 1.0), transparent 45%),
            radial-gradient(2px 2px at 70% 5%, rgba(255, 255, 255, 1.0), transparent 45%),
            radial-gradient(2px 2px at 75% 60%, rgba(255, 255, 255, 1.0), transparent 45%),
            radial-gradient(2px 2px at 80% 90%, rgba(255, 255, 255, 1.0), transparent 45%),
            radial-gradient(2px 2px at 85% 65%, rgba(255, 255, 255, 1.0), transparent 45%),
            radial-gradient(2px 2px at 90% 40%, rgba(255, 255, 255, 1.0), transparent 45%),
            radial-gradient(2px 2px at 95% 20%, rgba(255, 255, 255, 1.0), transparent 45%),

            radial-gradient(3px 3px at 20% 60%, rgba(255, 255, 255, 1.0), transparent 45%),
            radial-gradient(3px 3px at 40% 80%, rgba(255, 255, 255, 1.0), transparent 45%),
            radial-gradient(3px 3px at 60% 40%, rgba(255, 255, 255, 1.0), transparent 45%),
            radial-gradient(3px 3px at 80% 20%, rgba(255, 255, 255, 1.0), transparent 45%),

            radial-gradient(4px 4px at 25% 75%, rgba(255, 255, 255, 1.0), transparent 45%),
            radial-gradient(4px 4px at 75% 30%, rgba(255, 255, 255, 1.0), transparent 45%),

            var(--gradient);
        --bgS1: 700px;
        --bgS2: 500px;
        --bgS3: 600px;
        --backgroundGradientSize:
            var(--bgS1) var(--bgS2), var(--bgS3) var(--bgS1), var(--bgS2) var(--bgS3), var(--bgS1) var(--bgS2),
            var(--bgS3) var(--bgS1), var(--bgS2) var(--bgS2), var(--bgS3) var(--bgS1), var(--bgS2) var(--bgS3),
            var(--bgS1) var(--bgS2), var(--bgS3) var(--bgS1), var(--bgS2) var(--bgS3), var(--bgS1) var(--bgS2),
            var(--bgS3) var(--bgS1), var(--bgS2) var(--bgS2), var(--bgS3) var(--bgS1), var(--bgS2) var(--bgS3),
            var(--bgS1) var(--bgS2), var(--bgS3) var(--bgS1), var(--bgS2) var(--bgS3),
            var(--bgS1) var(--bgS2), var(--bgS3) var(--bgS1), var(--bgS2) var(--bgS3), var(--bgS1) var(--bgS2),
            var(--bgS1) var(--bgS2), var(--bgS3) var(--bgS1),
            auto, auto;

        --backgroundGradientMobile:
            var(--gradient);
        --bgS1: 700px;
        --bgS2: 500px;
        --bgS3: 600px;
        --backgroundGradientSizeMobile: auto, auto;
    }

    .cRed {
        color: var(--red);
    }

    .cGreen {
        color: var(--green);
    }

    .cWhite {
        color: var(--secondHighlight)
    }
}


/* FONTS */
@media (min-width: 0px) {
    /* @font-face {
        font-family: 'UnitRounded';
        font-style: normal;
        font-weight: 700;
        font-display: swap;
        src: url('./fonts/Unit-Rounded-Custom-Medi.woff2') format('woff2');
    } */

    * {
        font-family: var(--font-family), 'Courier New', Courier, monospace;
        font-weight: var(--fontWeightLow);
        text-decoration: none;
        font-size: clamp(12px, 1.4vw, 16px);
        color: var(--normalTextAndOutlines);
    }

    h1 {
        font-size: clamp(40px, 8vw, 80px);
        font-weight: var(--fontWeightHigh);
    }

    h2 {
        font-size: clamp(20px, 4vw, 40px);
        font-weight: var(--fontWeightHigh);
    }

    h3 {
        font-size: clamp(15px, 3vw, 30px);
        font-weight: var(--fontWeightHigh);
    }

    h4 {
        font-size: clamp(14px, 1.8vw, 18px);
        font-weight: var(--fontWeightMid);
        padding-top: 10px;
    }

    .buton {
        font-weight: var(--fontWeightHigh);
    }

    .button p {
        font-weight: var(--fontWeightMid);
    }

    .tBold {
        font-weight: var(--fontWeightHigh);
        color: var(--secondHighlight);
    }

    .tSmall {
        font-size: clamp(10px, 1.3vw, 13px);
    }


    /* ICONS */

    .icon {
        font-family: 'Material Symbols Rounded';
        display: flex;
        justify-content: center;
        align-items: center;
        font-variation-settings:
            'FILL' 1,
            'wght' 700,
            'GRAD' 0,
            'opsz' 48
    }
}


/* STANDARDS */
@media (min-width: 0px) {

    *,
    *:before,
    *:after {
        padding: 0px;
        margin: 0px;
        box-sizing: border-box;
        background-color: var(--debugColor);
        hyphens: auto;
    }

    html {
        height: 100%;
        background-color: var(--backgroundColor);
        overflow-x: hidden;
        overflow-y: scroll;
    }

    body {
        position: relative;
        width: 100%;
        min-height: 100%;
        min-height: 100vh;
        min-height: 100svh;
    }

    .tooltip {
        padding: 8px 15px 7px 12px;
        color: var(--boldNormalText);

        background-color: rgba(0, 0, 0, 0.2);
        background-color: rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(2px);

        border: none;
        border-top: 1px solid rgba(255, 255, 255, 0.5);
        border-bottom: 1px solid rgba(0, 0, 0, 0.5);
        border-radius: 5px;

        font-size: 16px;

        box-sizing: content-box;
        white-space: nowrap;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .imgContain {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: 50% 50%;
    }

    .imgCover {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 50% 50%;
    }

    .imgFill {
        width: 100%;
        height: 100%;
        object-fit: fill;
        object-position: 50% 50%;
    }

    .imgAbsolute {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: 50% 50%;
        /* transform: scale(1.1);
        transition: 0.3s; */
    }

    /* Gesamte Scrollbar */
    ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }

    /* Hintergrund (Track) */
    ::-webkit-scrollbar-track {
        background: var(--backgroundScrollbar);
    }

    /* Griff (Thumb) */
    ::-webkit-scrollbar-thumb {
        background: var(--backgroundScrollbarThumb);
        border-radius: 4px;
    }

    /* Hover-Effekt */
    ::-webkit-scrollbar-thumb:hover {
        background: var(--backgroundScrollbarThumbHover);
    }
}


/* BUTTONS */
@media (min-width: 0px) {
    .buttonContainer {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: stretch;
        z-index: 5000;
    }

    .button {
        width: 100%;
        height: 100%;
        border: none;
        border-radius: 3px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        background-color: var(--buttonBakckground);
        transition: 0.05s;
        gap: 15px;
        padding: 5px 25px 5px 15px;
        z-index: 5000;
    }

    .buttonS {
        padding: 5px 10px;
    }

    .buttonFetch {
        padding: 5px 10px;
        min-width: 150px;
    }

    .button:hover {
        cursor: pointer;
        transform: scale(1.02, 1.04);
        background-color: var(--buttonHover);
    }

    .button .icon {
        font-size: 25px;
        color: var(--buttonText);
        pointer-events: none;
    }

    .button p {
        font-size: 15px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: var(--buttonText);
        pointer-events: none;
    }

    .button:hover p {
        color: var(--buttonTextHover);
    }

    .button:hover .icon {
        color: var(--buttonTextHover);
    }
}


/* INPUTS */
@media (min-width: 0px) {
    .inputContainer {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-end;
        flex-wrap: wrap;
        gap: 20px;
    }

    .inputFieldContainer {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .inputFieldContainer label {
        color: white;
    }

    .inputFieldContainer p {
        padding: 0px 10px;
    }

    .inputField {
        width: 100%;
        min-height: 30px;
        height: 30px;
        max-height: 90px;

        resize: none;
        overflow-y: auto;

        font-size: 15px;
        margin: 0px 0px -2px 0px;
        padding: 4px 4px;
        border: none;
        border-radius: 3px;
        background-color: var(--inputBG);
        color: var(--normalTextAndOutlines);
    }

    .hiddenInputField {
        position: absolute;
        height: auto;
        overflow: hidden;

        white-space: pre-wrap;
        word-break: break-word;
        overflow-wrap: break-word;
        word-wrap: break-word;

        z-index: -10;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    .inputField:focus {
        outline-color: var(--firstHighlight);
        outline-style: solid;
        outline-width: 3px;
        outline-offset: 0px;
    }

    .inputField::placeholder {
        color: var(--dimText);
        opacity: 1;
    }

    .inputDropdown {
        padding: 2px 4px;
        margin: 7px 0px 7px 0px;
        background-color: var(--inputBG);
        color: var(--secondHighlight);
        border: 1px solid var(--normalTextAndOutlines);
        outline: none;
        text-align: left;
    }
}


/* SITE */
@media (min-width: 0px) {
    #siteCenterer {
        position: relative;
        width: 100%;
        min-height: 100%;
        min-height: 100vh;
        min-height: 100svh;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
    }

    #headerContainer {
        position: fixed;
        width: 100%;
        top: 0px;
        left: 0px;
        background-color: var(--headerColor);
        height: var(--heightHeader);
        z-index: 100;

        box-shadow: 0px calc(-1 * (var(--gradient)*2)) var(--gradient) calc(-1 * (var(--gradient))) var(--backgroundBrightener) inset;
    }

    #footerContainer {
        position: absolute;
        bottom: 1px;
        width: 100%;
        background-color: var(--footerColor);
        height: var(--heightFooter);

        box-shadow: 0px calc(var(--gradient)*2) var(--gradient) calc(-1 * (var(--gradient))) var(--backgroundBrightener) inset;
    }

    /* Content */

    #backgrounds {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0px;
        top: 0px;
        overflow: hidden;
    }

    #siteBGmobile {
        display: none;
        position: absolute;
        width: 100%;
        height: 100%;
        background-image: var(--backgroundGradientMobile);
        background-size: var(--backgroundGradientSizeMobile);
    }

    #siteBG {
        position: absolute;
        width: 100%;
        height: 100%;
        background-image: var(--backgroundGradient);
        background-size: var(--backgroundGradientSize);
    }

    #siteBGpattern {
        position: absolute;
        width: 200%;
        height: 200%;
        left: -50%;
        top: -50%;
        background-image: url(./images/PatternMichaverseLarge.webp);
        background-size: 400px 400px;
        background-repeat: repeat;
        opacity: 0.02;
        transform: rotate(-8deg);
    }

    #bodyContainer {
        width: 90%;
        max-width: 1400px;
        overflow: hidden;
        margin: 150px 0px;

        border-radius: 35px;
        background: var(--backgroundDarkener);
        border-top: 1px solid var(--borderColor);
        border-right: 2px solid var(--borderColor);

        box-shadow: -120px 60px 120px 0px rgba(0, 0, 0, 1.0);
    }

    #siteContainer {
        width: 100%;
        max-width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }

    #siteContent {
        width: 100%;
        min-height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
    }

    @media (hover: none) and (pointer: coarse) {
        #siteBGmobile {
            display: inherit;
        }

        #siteBG {
            background: none;
        }

        #siteBGpattern {
            background: none;
        }

        #bodyContainer {
            width: 100%;
            margin: var(--heightHeader) 0px 0px 0px;

            border-radius: 0px;
            background: var(--backgroundDarkener);
            border-top: none;
            border-right: none;

            box-shadow: none;
        }
    }
}


/* HEADER */
@media (min-width: 0px) {
    #header {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 0px 40px;
    }

    #logoContainer {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        text-decoration: none;
        gap: 10px;
    }

    #logo {
        width: 30px;
        height: 30px;
        object-position: 50% 100%;
    }

    #logoText {
        font-size: 23px;
        font-weight: var(--fontWeightMid);
    }

    #navmenu nav {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        gap: 15px;
        text-transform: uppercase;
    }

    .navLink {
        font-size: 20px;
        font-weight: 500;
        color: var(--normalTextAndOutlines);
        text-decoration: none;
        transition: 2s;
    }

    .navLink:hover {
        color: var(--firstHighlight);
        transition: 0s;
    }

    .navActive {
        color: var(--secondHighlight);
    }

    @media (hover: none) and (pointer: coarse) {
        #header {
            padding: 0px 10px;
        }

        #logoContainer {
            gap: 10px;
        }

        #logo {
            width: 30px;
            height: 30px;
            object-position: 50% 100%;
        }

        #logoText {
            display: none;
        }

        #navmenu nav {
            gap: 10px;
        }

        .navLink {
            font-size: min(4.3vw, 17px);
        }
    }
}


/* FOOTER */
@media (min-width: 0px) {
    #footer {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        padding: 0px 10px;
    }

    .footerLink,
    .footerText {
        padding: 0px 10px;
    }

    .footerLink {
        color: var(--normalTextAndOutlines);
        text-decoration: none;
    }

    .footerLink:hover {
        color: var(--firstHighlight);
    }

    .footerText {
        color: var(--dimText);
    }
}


/* CONTENT SITE */
@media (min-width: 0px) {
    .loaded {
        width: 100%;
        min-height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 140px;
        padding-bottom: 200px;
    }

    .siteContentBlock {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        gap: 60px;
    }

    /* Hero */

    .heroContainer {
        position: relative;
        width: 100%;
    }

    .hero {
        width: 100%;
        height: 70%;
        height: 70vh;
        height: 70svh;
        overflow: hidden;
    }

    .darkenHero {
        position: absolute;
        width: 50%;
        height: 100%;
        top: 0px;
        left: 0px;
        background-color: var(--imageDarkener);
    }

    .heroTextContainer {
        position: absolute;
        width: 50%;
        height: 100%;
        top: 0px;
        left: 0px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-end;
        padding: 30px 30px 30px 50px;
    }

    .heroTextContainer p {
        text-align: right;
    }

    h1 {
        text-align: right;
    }

    /* No Hero */

    .noHeroContainer {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
    }

    .noHeroTextContainer {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        padding: 30px 0px 0px;
    }

    .noHeroTextContainer h1 {
        text-align: center;
    }

    .noHeroTextContainer p {
        text-align: center;
    }

    /* Content */

    .innerContent {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        gap: 50px;
        padding: 0px 50px;
    }

    .textContainer {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
    }

    .siteSplitContainer {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        gap: 50px;
    }

    .splitContainer1 {
        flex: 1;
        position: relative;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 50px;
    }

    .splitContainer2 {
        flex: 1;
        position: relative;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 50px;
    }

    .segment,
    .segmentIndentContainer,
    .segmentSub {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .segment,
    .segmentSub {
        position: relative;
        overflow: hidden;
        gap: 30px;
        padding: 40px 0px;

        border-radius: 35px;
        border-right: 2px solid var(--borderColor);
        border-top: 1px solid var(--borderColor);
        border-left: 2px solid rgba(0, 0, 0, 0);
        border-bottom: 1px solid rgba(0, 0, 0, 0);

        box-shadow: -4px 2px 4px 0px rgba(0, 0, 0, 1);
        transition: var(--transitionAway);
        z-index: 50;

        background-image: var(--backgroundGradientMobile);
    }

    .segment:hover {
        box-shadow: -20px 10px 20px 0px rgba(0, 0, 0, 1);
        /* transform: scale(1.01); */
        transition: var(--transitionOver);
    }

    .segmentIndentContainer {
        gap: 5px;
        padding: 0px 30px;
    }

    .segmentImg {
        width: 100%;
        height: 200px;
    }

    .segmentImg img {
        object-position: 100% 55%;
    }

    .segmentImgLarge {
        height: 350px;
    }

    .segmentImgLarge img {
        object-position: 100% 65%;
    }

    .segmentVideo {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 20px;
        margin: 20px;
    }

    video {
        border-radius: 20px;
        border: 3px solid var(--firstHighlight);
        box-shadow: -4px 2px 4px 0px rgba(0, 0, 0, 1);
        transition: var(--transitionAway);
    }

    video:hover {
        /* border-radius: 0px; */
        box-shadow: -20px 10px 20px 0px rgba(0, 0, 0, 0.5);
        transition: var(--transitionOver);
    }

    .socialIndentContainer {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 10px;
        padding: 0px 30px;
    }

    .segmentArrow {
        position: absolute;
        right: 40px;
        bottom: 20px;
        cursor: pointer;
    }

    .segmentArrow p {
        font-size: 50px;
    }

    .segmentArrow p:hover {
        color: var(--firstHighlight);
    }

    .segmentSub {
        overflow: hidden;

        width: 98%;
        margin: -110px 0px 0px 1%;
        padding: 20px 0px;

        z-index: 40;
    }

    .socialContainer {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: 15px;
        padding: 0px 0px;
    }

    .socialContainer:hover {
        transform-origin: 0% 100%;
        filter: var(--secondHighlightCSS);
    }

    .socialContainerText {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 10px;
        padding: 0px 0px;
    }

    .socialImg {
        width: 25px;
        height: 25px;
    }

    .segmentImgProfile {
        width: 200px;
        height: 200px;
        margin: 0px 0px 0px 30px;
    }

    .profilePic {
        border: 15px solid var(--firstHighlight);
        border-radius: 50%;
        transition: 0.5s;
    }

    .profilePic:hover {
        border: 5px solid var(--firstHighlight);
        transform: scale(1.1);
    }

    /* Further Links */

    .furtherLinksContainer {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 20px;
    }

    .furtherLinksSplitter {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 20px;
    }

    .furtherLinksL {
        align-items: flex-end;
    }

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

    @media (hover: none) and (pointer: coarse) {
        .loaded {
            gap: 60px;
            padding-bottom: 120px;
        }

        .siteContentBlock {
            gap: 40px;
        }

        .innerContent {
            gap: 50px;
            padding: 0px 20px;
        }

        .hero {
            height: calc(100% - var(--heightHeader));
            height: calc(100vh - var(--heightHeader));
            height: calc(100svh - var(--heightHeader));
        }

        .segment,
        .segmentSub {
            background-image: var(--backgroundGradientMobile);
        }

        .furtherLinksSplitter {
            flex-direction: column;
        }

        .furtherLinksL {
            align-items: center;
        }

        .furtherLinksR {
            align-items: center;
        }
    }
}


/* HOME */
@media (min-width: 0px) {
    .loaded.home .sideSplitContainer {
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        gap: 50px;
    }

    .loaded.home .splitContainer1 {
        flex: 2;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 50px;
    }

    .loaded.home .splitContainer2 {
        flex: 1;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 50px;
    }

    .loaded.home .segment {
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 30px;
        padding: 40px 0px;
    }

    .loaded.home .segmentIndentContainer {
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 5px;
        padding: 0px 30px;
    }

    @media (hover: none) and (pointer: coarse) {

        .loaded.home .siteSplitContainer {
            flex-direction: column;
            gap: 50px;
        }

        .loaded.home .segmentIndentContainer {
            gap: 5px;
            padding: 0px 15px;
        }
    }
}


/* DEVELOPMENT */
@media (min-width: 0px) {
    .loaded.dev .innerContent {
        gap: 80px;
    }

    .loaded.dev .segment {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 0px 0px;
        overflow: inherit;
    }

    .loaded.dev .segmentSub {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        overflow: inherit;
    }

    .loaded.dev .siteSplitContainer {
        flex-direction: row;
        justify-content: flex-start;
        align-items: stretch;
        gap: 30px;
    }

    .loaded.dev .shift {
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
    }

    .loaded.dev .splitContainer1 {
        flex: 1 0;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 5px;
    }

    .loaded.dev .splitContainer2 {
        flex: 0 1 400px;
        flex-direction: row;
        justify-content: center;
        align-items: stretch;
        gap: 0px;
    }

    .loaded.dev .segmentIndentContainer {
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 30px;
        padding: 30px 30px;
    }

    .loaded.dev .segmentImg {
        width: 100%;
        min-height: 100%;
        /* background-color: white; */
        transform: scale(0.9);
        transform-origin: 50% 50%;
        transition: 0.3s;
        transition: var(--transitionAway);
    }

    .loaded.dev .segment:hover .segmentImg {
        transform: translateY(-20px) scale(1.2) rotate(-3deg);
        transition: var(--transitionOver);
    }

    .loaded.dev .segmentImg img {
        object-position: 50% 50%;
        filter: drop-shadow(-5px 40px 50px rgba(0, 0, 0, 0.7));
    }

    @media (hover: none) and (pointer: coarse) {
        .loaded.dev .innerContent {
            gap: 50px;
            padding: 0px 20px;
        }

        .loaded.dev .siteSplitContainer {
            gap: 50px;
        }

        .loaded.dev .segmentIndentContainer {
            gap: 5px;
            padding: 0px 15px;
        }
    }
}


/* BANNER */
@media (min-width: 0px) {
    .loaded.banner .innerContent {
        gap: 80px;
    }

    .loaded.banner .segment {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 0px 0px;
        overflow: inherit;
    }

    .loaded.banner .segmentSub {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        overflow: inherit;
    }

    .loaded.banner .segment:hover .segmentImg {
        /* transform: scale(1.1); */
        transform-origin: 50% 50%;
    }

    .loaded.banner .siteSplitContainer {
        flex-direction: row;
        justify-content: flex-start;
        align-items: stretch;
        gap: 30px;
    }

    .loaded.banner .splitContainer1 {
        flex: 1 0;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 5px;
    }

    .loaded.banner .splitContainer2 {
        flex: 0 1 400px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0px;
    }

    .loaded.banner .siteSplitContainerCode {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 20px;
    }

    .loaded.banner .splitContainer1Code {
        flex: auto;
        min-width: 300px;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 5px;
    }

    .loaded.banner .bannerContainer {
        flex: auto 70%;

        width: 60%;
        max-height: 900px;

        margin: 35px 0px 35px 30px;
    }

    .loaded.banner .splitContainer2Code {
        position: relative;
        flex: auto;

        width: 320px;
        height: 480px;
        min-width: 180px;
        min-height: 250px;
        max-width: 100%;
        max-height: 900px;

        overflow: hidden;
        resize: both;

        border-radius: 10px;
        box-shadow: 0px 0px 0px 5px rgb(255, 255, 255);
    }

    .loaded.banner .adblocker {
        position: absolute;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        width: 100%;
        height: 100%;
        text-align: center;

        font-size: 24px;
        background-color: black;
    }

    .loaded.banner .adblocker p {
        width: 100%;
        text-align: center;

        font-size: 24px;
    }

    .loaded.banner .adblocker p .adBlockerBold {
        font-size: 40px;
        font-weight: 900;
    }

    .loaded.banner iframe,
    embed {
        position: absolute;
        width: 100%;
        height: 100%;
    }

    .loaded.banner .segmentIndentContainer {
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 30px;
        padding: 30px 30px;
    }

    .loaded.banner .segmentImg {
        width: 400px;
        height: 400px;
        /* background-color: white; */
        transition: 0.3s;
    }

    .loaded.banner .imgAbsolute {
        transition: 0.3s;
    }

    .loaded.banner .imgAbsolute:hover {
        filter: saturate(1.4);
    }

    @media (hover: none) and (pointer: coarse) {}
}


/* MORE */
@media (min-width: 0px) {
    .samplesContainer {
        max-width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
        gap: 30px;
        padding: 0px 50px;
    }

    .sample {
        position: relative;
        width: 100%;
        height: 400px;
        border-radius: 12px;
        overflow: hidden;

        transition: 0.5s;
        transform: scale(1.0) rotate(0deg);
        filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 1));
        z-index: 60;
    }

    .sample:hover {
        transition: 0.2s;
        transform: scale(1.05) rotate(2deg);
        filter: drop-shadow(0px 0px 30px rgba(0, 0, 0, 1));
        z-index: 60;
    }
}



@media (hover: none) and (pointer: coarse) {
    html {
        overflow-y: inherit;
    }

    #siteBGmobile {
        filter: contrast(1.0) brightness(2.0);
    }

    #siteCenterer {
        filter: contrast(1.0) brightness(1.1);
    }
}