:root {
    --bar-width: 50px;
    --bar-height: 5px;
    --hamburger-gap: 9px;
    --hamburger-margin: 30px;
    --animation-timing: 300ms ease-in-out;
    --hamburger-height: calc(var(--bar-height) * 3 + var(--hamburger-gap) * 2);
    --background-color: hsl(283, 14%, 10%);
    --cubeSize: 12vw;
    --halfCube: calc((var(--cubeSize)) / 2);
}
html {
    width: 100vw;
}
.site-container {
    width: 100vw;
    overflow-x: clip;
}
p {
    font-size: 1.2em;
    text-shadow: 2px 2px 5px rgba(22, 22, 22, 0.918);
}

div.was p {
    padding: 1rem;
    max-width: 70ch;
    min-width: 20ch;
    text-align: center;
}

.wrapper {
    display: inline-flex;
    margin-left: 1rem;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    font-family: 'Genos';
}

div.static {
    align-content: center;
    text-align: center;
    font-size: 2em;
    margin-left: 1rem;
    color: #5ed3db;
    z-index: 2;
    height: 2rem;
    line-height: 2rem;
    position: relative;
}

div.dynamic {
    align-content: center;
    text-align: right;
    height: 2rem;
    line-height: 2rem;
    overflow: hidden;
}

div.dyn_2 {
    text-align: left;
    margin-left: 1rem;
}

div.dynamic li {
    list-style: none;
    position: relative;
    font-size: 2em;
    top: 0;
    animation: slide 25s steps(5) infinite;
    display: block;
}

div.dynamic li span {
    position: relative;
}

div.dynamic li span:after {
    content: "";
    left: 0;
    position: absolute;
    height: 72%;
    width: 100%;
    border-left: 5px solid rgb(255, 207, 225);
    animation: typing 5s infinite cubic-bezier(.59, 0, .41, 1);
    background: var(--background-color);
}

div.dyn_2 li span:after {
    content: "";
    left: 0;
    position: absolute;
    height: 72%;
    width: 100%;
    border-left: 5px solid rgb(255, 207, 225);
    animation: typing_2 5s infinite cubic-bezier(.59, 0, .41, 1);
    background: var(--background-color);
}

@keyframes slide {
    100% {
        top: -10rem;
    }
}

@keyframes typing {
    0%, 95%, 100% {
        left: 0;
        border-left: 0px solid rgba(255, 207, 225, 0);
    }
    10%, 90% {
        border-left: 5px solid rgb(255, 207, 225);
    }
    50% {
        left: 100%;
        margin-left: 10px;
    }
}

@keyframes typing_2 {
    0%, 20%, 75%, 100% {
        left: 0;
        border-left: 0px solid rgba(255, 207, 225, 0);
    }
    25%, 75% {
        border-left: 5px solid rgb(255, 207, 225);
    }
    50% {
        left: 100%;
        margin-left: 10px;
    }
}

section.info {
    position: relative;
    width: 100%;
    height: fit-content;
    padding-block: 5rem;
    padding-inline: 2rem;
    margin-block: 3rem;
    text-align: center;
    line-height: 2em;
}

section.info::after {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    transform: skewY(-2deg);
    transition: .3s;
    background-image: linear-gradient(45deg, rgb(63, 47, 63), #477b8b, rgb(46, 24, 46));
    box-shadow: 0 0 1rem 0 rgb(124, 75, 112);
}


.cuby {
    width: 100%;
    height: 30rem;
    margin: 0 auto;
    position: relative;
    align-items: center;
    padding-top: 2rem;
    width: 100%;
}

.cuby::before {
    content: '';
    position: absolute;
    display: flex;
    width: 100%;
    min-height: 125%;
    height: auto;
    height: 1svh;
    transform: translateY(-9rem);
    background-image: linear-gradient(45deg, rgba(245, 139, 240, 0.247), 10%, var(--background-color), 90%, rgb(139, 215, 245));
    z-index: -2;
    overflow-y: hidden;
}

.textbox-left {
    display: inline-flex;
    position: absolute;
    height: 20vh;
    width: 50%;
    left: 0;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
    vertical-align: top;
}

.textbox-left p {
    display: block;
    max-width: 50ch;
    margin-top: 2rem;
    margin-inline: 2rem;
}

div.container3d {
    width: 50%;
    height: 20rem;
    right: 0;
    position: absolute;
    align-items: center;
    justify-content: center;
    display: inline-flex;
    perspective: 30rem;
    perspective-origin: 50% calc(50% - 11rem);
    pointer-events: none;
    vertical-align: top;
}

.scene {
    position: relative;
    transform-style: preserve-3d;
    animation: spin 12.5s infinite cubic-bezier(.59, 0, .41, 1);
}

@keyframes spin {
    0%, 100% {}
    50% {
        transform: rotateY(-360deg) rotateX(360deg);
    }
}

.cube {
    height: var(--cubeSize);
    width: var(--cubeSize);
    position: absolute;
    transform-style: preserve-3d;
    transform: translate(-50%, -50%);
}

.cube .left,
.cube .right,
.cube .front,
.cube .back,
.cube .top,
.cube .bottom {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(114, 80, 116, 0.507);
    box-shadow: 0 0 calc(var(--cubeSize) / 5) #000a inset;
}

.cube .front {
    transform: translateZ(var(--halfCube));
}

.cube .right {
    transform: rotateY(90deg) translateZ(var(--halfCube));
}

.cube .back {
    transform: rotateY(180deg) translateZ(var(--halfCube));
}

.cube .left {
    transform: rotateY(270deg) translateZ(var(--halfCube));
}

.cube .top {
    transform: translateY(-50%) rotateX(90deg);
}

.cube .bottom {
    transform: translateY(50%) rotateX(270deg);
}

.section-title {
    position: relative;
    margin: 2rem auto;
    max-width: 100vw;
    width: fit-content;
    height: fit-content;
    font-size: 7rem;
    padding-inline: 3rem;
    padding-block: .5rem;
    text-align: center;
    font-weight: 200;
    text-decoration: underline .3vh rgb(230, 183, 84);
    text-shadow: 5px -3px 20px rgba(233, 220, 31, 0.39);
    animation: section-title both;
    animation-timeline: view();
    animation-range-start: 30vh;
    animation-range-end: 60vh;
    

    &::after {
        content: "";
        position: absolute;
        max-width: 100vw;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        border-radius: 2rem 0 2rem 0;
        background-color: #ffffff28;
        background-image: linear-gradient(-5deg,#005577, #498d8a, #470a57);
        transform: rotate(1.5deg) skew(-10deg);
        z-index: -1;
        filter: drop-shadow(20px 5px 3px black);
        box-shadow: inset 20px -10px 50px #00000086;
        
    }
}

.showcase {
    width: 90vw;
    height: fit-content;
    position: relative;
    padding: 5rem;
    margin: 0 auto;
    border-radius: 5rem 5rem 0 0;
    /* outline: 5px solid red; */
    background-image: linear-gradient(20deg, #791d6d, rgb(47, 177, 209), #6d40a0);
    background-size: 150%;
    box-shadow: inset rgb(150, 20, 143) 0 0 3rem;
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 100%, transparent 0%); /* Maske erstellen */
    -webkit-mask-image: linear-gradient(20deg, #791d6d, rgb(47, 177, 209), #6d40a0);
    filter: drop-shadow(20px 10px 5px black);

    &::after {
        content: "";
        position: absolute;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: none;
        border-radius: 5rem 5rem 0 0;
        z-index: 0;
        box-shadow: inset black 0 0 5rem;
        outline: rgb(156, 0, 143) 15px dashed;
        outline-offset: -5px;
        filter: drop-shadow(-10px 10px 5px black);
        filter: blur(2px);
    }
    & .showcase-item {
        padding: 1rem;
        background-image: linear-gradient(#2a444b, #497480);
        position: relative;
        width: 70vw;
        margin-bottom: .5rem;
        margin-inline: auto;
        z-index: 1;
        box-shadow: inset -10px -3px 10px rgb(136, 192, 209);
        border-radius: 20px;
        outline: rgb(55, 5, 59) solid 2px;

        &:nth-of-type(2n) {
            background-image: linear-gradient(#1a3036, #2a515c);
            background-color: rgba(0, 0, 0, 0.596);
            animation: showcase-item-var1 both;
            animation-timeline: view();
            animation-range: 10vh 20vh;
        }
        &:nth-of-type(2n +1) {
            animation: showcase-item-var2 both;
            animation-timeline: view();
            animation-range: 10vh 20vh;
        }

        &::after {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: -2;
            background: inherit;
            outline: white 2px solid;
            outline-offset: 5px;
            filter: blur(20px);
        }
        

        & h3 {
            font-size: 2em;
            margin-bottom: 1rem;
            width: fit-content;
            padding-right: 3rem;
            padding-left: 1rem;
            position: relative;

            &::after {
                content: "";
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                background-image: linear-gradient(10deg, rgba(255, 0, 0, 0.671), rgba(128, 0, 128, 0.637));
                z-index: -1;
                transform: skew(20deg);
                filter: drop-shadow(10px 5px 3px black);

            }
        }

        & p {
            padding-inline: 4rem;
            font-size: 1.2em;
        }

        & a {
            color: #dbcf5e;
            text-decoration: none;
            font-size: 1.1em;
        }
    }
}

#showcase-focus {
    scale: 1.05;
    box-shadow: rgb(255, 255, 255) 10px -5px 30px;
    margin-bottom: 2rem;
    
}

@media screen and (max-width: 755px) {
    .wrapper {
        display: block;
        align-content: center;
    }

    .wrapper * {
        margin: 0 auto;
        text-align: center;
    }

    .dynamic li {
        line-height: 2rem;
        height: 2rem;
    }

    .dynamic li span {
        padding-bottom: 5px;
    }
}

@media screen and (max-width: 1000px) {

    h2.section-title {
        font-size: 3rem;
        animation: none;
    }
    .showcase {
        border-radius: 0;
        width: 100vw;
        padding: 1vw;
        overflow-x: clip;
        
        & .showcase-item {
            width: 95vw;
            margin: .25rem auto;
            animation: none;

            & p {
                padding-inline: 10px;
            }
            & h3 {
                text-align: center;
                &::after {
                    transform: skew(5deg);
                    color: black;
                }
            }
            &:nth-of-type(2n) {
                animation: none;
            }
            &:nth-of-type(2n +1) {
                animation: none;
            }
        }
    }
    #showcase-focus{
        scale: 1;
    }
}

@keyframes section-title {
    0% {transform: translate(100vw, 0vh); scale: .8; opacity: 0; filter: blur(30px); image-rendering: pixelated;}
    50% {transform: translate(-5vw, 0vh); scale: .8; opacity: .5;}
    100% {transform: translate(0, 0); scale: 1; opacity: 1; filter: blur(0px);}
}

@keyframes showcase-item-var1 {
    from { transform: translateX(100vw) skew(30deg); filter: blur(20px); opacity: .1;}
    to { transform: translateX(0vw) skew(0deg); filter: blur(0px); opacity: 1;}
    
}

@keyframes showcase-item-var2 {
    from { transform: translateX(-100vw) skew(-30deg); filter: blur(20px); opacity: .1;}
    to { transform: translateX(0vw) skew(0deg); filter: blur(0px); opacity: 1;}
}