html{
    scroll-behavior: smooth;
    scroll-margin: 1rem;
    overflow-x: hidden;
    cursor: crosshair;
}

hr {
    margin-block: 20vh;
}

:root {
    --show_numbers_width: fit-content;
    --animation_number_height: 4rem;
}

.presentation {
    width: 100vw;
    height: fit-content;
    position: relative;
    background-image: linear-gradient(#1b161d, color-mix(in srgb, #1b161d 90%, #ff53f6));
}


.title {
    position: relative;
    height: fit-content;
    text-align: center;
    top: 0;
    text-shadow: 10px 10px 10px rgba(255, 255, 255, 0.158);
    transform: translateY(10vh);
}
h1.title {
    background: linear-gradient(30deg, #da98da, #138caa, white);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 20vw;
}
h2.title {
    background: linear-gradient(30deg, #da98dad3, #138caa, rgba(255, 255, 255, 0.603));
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 5vw;
}

.section-title {
    position: relative;
    height: fit-content;
    text-align: center;
    margin-bottom: 5vh;
    background: linear-gradient(30deg, #da98da, #138caa, white);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 9rem;
    filter: drop-shadow(5px 5px 5px black);
    text-decoration: underline rgba(135, 216, 226, 0.616) solid 5px;
    z-index: 1;
    animation: blend-in-out both;
    animation-timeline: view();
}

.section-title::after {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 0;
    background: rgba(0, 0, 0, 0.171);
    background-size: 300%;
    background-position: center;
    border: 7px rgba(250, 231, 247, 0.103) dashed;
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.11));
    scale: 1.1;
    transform: rotate(-1deg);
    transform-origin: center center;
    animation: rotating 30s ease-in-out infinite;
}

p.text{
    font-size: 1.3em;
}
h2.text{
    font-size: 2em;
}

.text {
    max-width: 95vw;
    width: fit-content;
    text-align: center;
    margin: 0 auto;
    padding: 1rem;
    margin-block: 1.5rem;
    border-radius: 20px;
    background-image: linear-gradient(60deg, rgba(44, 124, 124, 0.4), rgba(12, 50, 68, 0.4));
    filter: drop-shadow(3px 5px 7px rgb(99, 139, 155));
    box-shadow: inset 0 0 10px rgb(0, 78, 102);
    transition: .3s;
}

.vortrag-link {
    font-size: 3em;
    max-width: 95vw;
    width: fit-content;
    text-align: center;
    margin: 0 auto;
    padding: 1rem;
    margin-top: 10rem;
    background-image: linear-gradient(90deg, rgb(189, 120, 41), rgb(86, 33, 107));
    outline: white 3px solid;
    filter: drop-shadow(15px 10px 2px rgba(36, 36, 36, 0.651));


    label {
        color: rgb(233, 41, 223);
    }
}
.text:hover {
    padding-inline: 2rem;
    color: rgb(247, 247, 93);
    transition: .3s;
    font-size: 1.4em;
    box-shadow:  0 0 20px rgb(255, 255, 255);

}

.bad {
    outline: rgba(255, 0, 0, 0.8) solid 3px;
}

.good {
    outline: rgba(0, 255, 0, 0.8) solid 3px;
}

.bold {
    font-weight: bold;
    cursor: crosshair;
}
hr, .text, .demo, .code-container, .array-box {
    animation: fade-in-out both;
    animation-timeline: view();

}

section {
    min-height: 40vw;
    height: fit-content;
    width: 100vw;
    position: relative;
    padding-bottom: 3vh;
    /* outline: red 3px solid; */

    &.long {
    height: 400vh;
    }
    &#title {
        height: 56.25vw;
        animation: slow-out both;
        animation-timeline: view();
        animation-range-start: 50%;
        animation-range-end: 150%;
    }
}

.animation-number {
    position: sticky;
    width: 6rem;
    text-align: center;
    height: var(--animation_number_height);
    padding-inline: .5rem;
    border-radius: .3rem;
    font-size: 3.6rem;
    background-image: linear-gradient(120deg, #84a9ad, #517c81ad);
    margin-inline: auto;
    color: rgb(255, 238, 0);
    font-family: Genos;
    font-weight: 700;
    text-shadow: rgba(0, 0, 0, 0.651) 5px 0 10px;
    box-shadow: inset rgb(39, 248, 255) 0 0 10px;
    line-height: 4rem;
    z-index: 2;
}
.animation-number::after {
    content: "";
    width: 6rem;
    height: var(--animation_number_height);
    position: absolute;
    border-radius: inherit;
    top: 0;
    left: 0;
    box-shadow:  rgba(0, 204, 255, 0.733) 0 0 30px;
    z-index: 1;
}

.animation-ground {
    transform: translateY(15rem);
}
.animation-section {
    width: 10rem;
    height: .5rem;
    /* background-color: red; */
    gap: 5rem;
    display: inline-block;
    text-align: center;
    box-shadow: 0 0 30px rgb(255, 111, 111);
    font-family: Genos;
    
}

.central-animation {
    position: sticky;
    width: 98vw;
    height: 90vh;
    font-size: 2rem;
    top: 5%;
    left: 1vw;
    background-color: rgba(0, 0, 0, 0.301);
    background-image: linear-gradient(#1d181f, #392f3d, #1d181f);
    filter: drop-shadow(5px 5px 5px black);
    background-size: 300%;
    box-shadow:  -10px 0 30px rgba(255, 255, 255, 0.13);
    align-items: center;
    border-radius: 10vw;
    animation: fade-in-out both;
    animation-timeline: view();
    animation-range-end: 90%;
}


.code-container {
    background-color: #27282296;
    color: #f8f8f2;
    padding-right: 2vw;
    border-radius: 8px;
    width: fit-content;
    max-width: 100vw;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
    margin: 0 auto;
    animation-range-end: 70%;
}
.code-line {
    white-space: pre;
}
.keyword { color: #66d9ef; }
.function-name { color: #a6e22e; }
.brackets, .curly-braces, .operators, .punctuation { color: #f8f8f2; }
.number { color: #ae81ff; }
.variable { color: #f8f8f2; }


.demo {
    width: 90vw;
    min-height: 15rem;
    height: auto;
    /* background-image: linear-gradient(rgba(255, 0, 0, 0), 20%, rgba(255, 0, 0, 0.377)); */
    padding-inline: 5vw;
}

.control_panel {
    max-width: 90vw;
    width: fit-content;
    height: fit-content;
    background-image: linear-gradient(80deg, rgba(51, 143, 196, 0.555), 70%, #a321af00);
    padding: .5rem 1rem;
    overflow-x: hidden;
    filter: drop-shadow(5px 5px 10px #1b161d);

    
    input[type=text] {
        font-size: 1.1rem;
        height: 2rem;
        width: 20rem;
        border-radius: 10px;
        padding-inline: 1rem;
        margin-right: 1rem;
        filter: drop-shadow(5px 5px 10px #1b161d);
    }
    input[type=button] {
        font-size: 1.1rem;
        height: 2rem;
        border-radius: 10px;
        padding-inline: 1rem;
        background-image: radial-gradient(rgb(156, 156, 156), 80%, rgb(255, 255, 255));
    }
}

.show_numbers {
    min-width: 5rem;
    width: var(--show_numbers_width);
    height: fit-content;
    padding: 1rem;
    background-color: rgba(0, 0, 0, 0.541);
    display: inline-block;
    margin-right: -5px;
    filter: drop-shadow(5px 5px 10px #1b161d);

    p {
        text-align: right;
        white-space: nowrap;
    }

    h2 {
        padding-bottom: .5rem;
    }
    &#iteration_0 {
        background-color: #1b161d;
        border-radius: 0 0 0 20px;
    }
    &#iteration_1 {
        background-color: #100d11;
    }
    &#iteration_2 {
        background-color: #1b161d;
    }
    &#iteration_finish {
        background-color: #100d11;
        border-radius: 0 0 20px 0;
    }
}

#stats {
    position: absolute;
    right: 0;
    top: 0;
    width: fit-content;
    height: fit-content;
    padding: .5rem;
    border-radius: 10px;
    background-color: #138caa;
    box-shadow: inset 0 0 30px rgb(148, 255, 250);
    filter: drop-shadow(5px 5px 10px #1b161d);

    h3 {
        font-size: 1.8em;
        margin-bottom: .5rem;
        filter: drop-shadow(5px 5px 10px #1b161d);
    }
}
.array-box{
    position: absolute;
    width: fit-content;
    height: fit-content;
    right: 5vw;
    margin-top: -5rem;
    background-color: rgba(211, 36, 202, 0.342);
    background-image: radial-gradient( #24b0d38f, #24b0d3f3);
    box-shadow: inset black 0 0 20px;
    filter: drop-shadow(5px 5px 3px black);
    border-radius: 1rem;
    padding: 1rem 2rem 1rem 2rem;

    &:nth-of-type(2n) {
        background-image: radial-gradient( #d3b3248f, #d3aa24f3);
    }

    h3{
        margin-bottom: 1rem;
        font-size: 2em;
    }

    .info {
        position: absolute;
        right: 1rem;
        top: 1.6rem;
        color: rgb(224, 224, 224);
        font-size: 1.2em;
    }
}

table {
    width: 20vw;
    border-collapse: collapse;
    tr th,td {
        padding: 8px;
        text-align: center;
        background-color: #00000079;
        border-left: 1px black solid;
        border-right: 1px black solid;
    }
    /* tr th:nth-of-type(2n) {
        background-color: #1f4869ce;
    }
    tr td:nth-of-type(2n +1) {
        background-color: #00000085;
    } */
}

#end {
    height: 56.25vw;

}


@media screen and (max-width: 1700px) {
    section.long {
        display: none;
    }
    section#title {
        animation: none;
    }
    .section-title {
        font-size: 5rem;
    }
    
}

@media screen and (max-width: 1000px) {
    .text {
        margin-top: 1rem;
    }
    .text:hover {
        animation: none;
    }
    .array-box {
        position: relative;
        margin: 0 auto;
        right: 0;
        max-width: 100vw;
    }
    hr {
        margin-block: 5rem;
    }
    .section-title {
        font-size: 3rem;
    }
    hr, .section-title, .text, .demo, .code-container, .array-box {
        animation: none;
    }
    .code-container{
        overflow-x: scroll;
    }
    #stats {
        position: relative;
        display: block;
        margin-top: 3rem;
        width: 90vw;
        height: fit-content;
        padding: 5vw;

        table {
            width: 80vw;
        }

    }
    .show_numbers {
        min-width: 5rem;
        width: 90vw;
        height: fit-content;
        padding: 5vw;
        background-color: rgba(0, 0, 0, 0.541);
        display: block;
        margin-right: 0;
    
        p {
            text-align: right;
            white-space: nowrap;
        }
    
        h2 {
            padding-bottom: .5rem;
        }
        &#iteration_0 {
            background-color: #0000008a;
            border-radius: 0 0 0 0;
        }
        &#iteration_1 {
            background-color: #000000b7;
        }
        &#iteration_2 {
            background-color: #0000008a;
        }
        &#iteration_finish {
            background-color: #000000b7;
            border-radius: 0 0 0 0;
        }
        
    }
    #end {
        height: fit-content;
        font-size: .7em;
        margin-top: 0;
        padding-bottom: 5rem;
    }
}

#number-57{
    animation: animation-number-57 both;
    animation-timeline: view();
}
#number-24{
    animation: animation-number-24 both;
    animation-timeline: view();
}
#number-86{
    animation: animation-number-86 both;
    animation-timeline: view();
}
#number-05{
    animation: animation-number-05 both;
    animation-timeline: view();
}
#number-99{
    animation: animation-number-99 both;
    animation-timeline: view();
}
#number-42{
    animation: animation-number-42 both;
    animation-timeline: view();
}
#number-19{
    animation: animation-number-19 both;
    animation-timeline: view();
}

#sec-0{
    animation: animation-sec-0 both;
    animation-timeline: view();
}
#sec-1{
    animation: animation-sec-1 both;
    animation-timeline: view();
}
#sec-2{
    animation: animation-sec-2 both;
    animation-timeline: view();
}
#sec-3{
    animation: animation-sec-3 both;
    animation-timeline: view();
}
#sec-4{
    animation: animation-sec-4 both;
    animation-timeline: view();
}
#sec-5{
    animation: animation-sec-5 both;
    animation-timeline: view();
}
#sec-6{
    animation: animation-sec-6 both;
    animation-timeline: view();
}
#sec-7{
    animation: animation-sec-7 both;
    animation-timeline: view();
}
#sec-8{
    animation: animation-sec-8 both;
    animation-timeline: view();
}
#sec-9{
    animation: animation-sec-9 both;
    animation-timeline: view();
}

@keyframes animation-number-57 {
    25.2% { transform: translateY(0);}
    27% { transform: translateY(calc(var(--animation_number_height) * 0.5));}
    30%,37.5% { transform: translate(26.3rem, calc(var(--animation_number_height) * 9.5));}
    39.7% { transform: translate(26.3rem, calc(var(--animation_number_height) * 2));}
    42%,48% { transform: translate(0, calc(var(--animation_number_height) * 2));}
    
    49.2% { transform: translateY(calc(var(--animation_number_height) * 2.5));}
    52.2%,59.5% { transform: translate(5.2rem, calc(var(--animation_number_height) * 9.5));}
    
    61.7% { transform: translate(5.2rem, calc(var(--animation_number_height) * 2));}

    66.7%,100% { transform: translateY(calc(var(--animation_number_height) * 2));}
}
@keyframes animation-number-24 {
    22.8% { transform: translateY(0);}
    24% { transform: translateY(calc(var(--animation_number_height) * 0.5));}
    27%,32% { transform: translate(-5.2rem, calc(var(--animation_number_height) * 8.5));}
    34.2% { transform: translate(-5.2rem, calc(var(--animation_number_height) * 4));}
    36%,42.8% { transform: translate(0, calc(var(--animation_number_height) * 4));}
    44% { transform: translateY(calc(var(--animation_number_height) * 4.5));}
    47%,54.3% { transform: translate(-26.3rem, calc(var(--animation_number_height) * 8.5));}
    
    56.5% { transform: translate(-26.3rem, calc(var(--animation_number_height) * 3));}

    61.5%,100% { transform: translateY(calc(var(--animation_number_height) * 3));}
}
@keyframes animation-number-86 {
    19.2% { transform: translateY(0);}
    21% { transform: translateY(calc(var(--animation_number_height) * 0.5));}
    24%,33.1% { transform: translate(16rem, calc(var(--animation_number_height) * 7.5));}
    34.9% { transform: translate(16rem, calc(var(--animation_number_height) * 1));}
    36.6%,44% { transform: translate(0, calc(var(--animation_number_height) * 1));}
    45.2% { transform: translateY(calc(var(--animation_number_height) * 1.5));}
    48.2%,60% { transform: translate(36.8rem, calc(var(--animation_number_height) * 7.5));}
    62.2% { transform: translate(36.8rem, calc(var(--animation_number_height) * -1));}
    67.2%,100% { transform: translateY(calc(var(--animation_number_height) * -1));}
}
@keyframes animation-number-05 {
    16.8% { transform: translateY(0);}
    18% { transform: translateY(calc(var(--animation_number_height) * 0.5));}
    21%,30.3% { transform: translate(5.2rem, calc(var(--animation_number_height) * 6.5));}
    32.5% { transform: translate(5.2rem, calc(var(--animation_number_height) * 1));}
    34.8%,40.8% { transform: translate(0, calc(var(--animation_number_height) * 1));}
    42% { transform: translateY(calc(var(--animation_number_height) * 1.5));}
    45%,48.5% { transform: translate(-47.5rem, calc(var(--animation_number_height) * 6.5));}
    50.7% { transform: translate(-47.5rem, calc(var(--animation_number_height) * 3));}
    55.9%,100% { transform: translateY(calc(var(--animation_number_height) * 3));}
}
@keyframes animation-number-99 {
    13.2% { transform: translateY(0);}
    15% { transform: translateY(calc(var(--animation_number_height) * 0.5));}
    18%,33.18% { transform: translate(47.5rem, calc(var(--animation_number_height) * 4.5));}
    34.98% { transform: translate(47.5rem, calc(var(--animation_number_height) * -4));}
    36.18%,44% { transform: translate(0, calc(var(--animation_number_height) * -4));}
    45.2% { transform: translateY(calc(var(--animation_number_height) * -3.5));}
    48.1%,58% { transform: translate(47.5rem, calc(var(--animation_number_height) * 5.5));}
    60.2% { transform: translate(47.5rem, calc(var(--animation_number_height) * -4));}
    65.2%,100% { transform: translateY(calc(var(--animation_number_height) * -4));}
}
@keyframes animation-number-42 {
    0%,10.8% { transform: translateY(0);}
    12% { transform: translateY(calc(var(--animation_number_height) * 0.5));}
    15%,23.2% { transform: translate(-26.3rem, calc(var(--animation_number_height) * 4.5));}
    25.4% { transform: translate(-26.3rem, calc(var(--animation_number_height) * 1));}
    31.2%,34.8% { transform: translate(0, calc(var(--animation_number_height) * 1));}
    36% { transform: translateY(calc(var(--animation_number_height) * 1.5));}
    39%,50.5% { transform: translate(-5.2rem, calc(var(--animation_number_height) * 4.5));}
    52.7% { transform: translate(-5.2rem, calc(var(--animation_number_height) * -2));}
    57.7%,100% { transform: translateY(calc(var(--animation_number_height) * -2));}
}
@keyframes animation-number-19 {
    0%,7.8% { transform: translateY(0);}
    9% { transform: translateY(calc(var(--animation_number_height) * 0.5));}
    12%,30.03% { transform: translate(47.5rem, calc(var(--animation_number_height) * 3.5));}
    31.83% { transform: translate(47.5rem, calc(var(--animation_number_height) * -5));}
    33.03%,40% { transform: translate(0, calc(var(--animation_number_height) * -5));}
    41.2% { transform: translateY(calc(var(--animation_number_height) * -4.5));}
    43.2%,45.2% { transform: translate(-36.8rem, calc(var(--animation_number_height) * 3.5));}
    47.4% { transform: translate(-36.8rem, calc(var(--animation_number_height) * -1));}
    52.4%,100% { transform: translateY(calc(var(--animation_number_height) * -1));}
}

@keyframes animation-sec-0 {
    0%,18.0%,19.2%,42.9%,44.1%,100% {scale: 1; background-color: red; transform: translateY(0);}
    18.6%,43.5% {scale: 1.1; background-color: gold; transform: translateY(-.5rem);}
    10%,60% {opacity: 1;}
    0%,7%,70%,100% {opacity: 0;}
}

@keyframes animation-sec-1 {
    0%,19.2%,20.4%,44.1%,45.3%,100% {scale: 1; background-color: red; transform: translateY(0);}
    19.8%,44.7% {scale: 1.1; background-color: gold; transform: translateY(-.5rem);}
    10%,60% {opacity: 1;}
    0%,7%,70%,100% {opacity: 0;}
}

@keyframes animation-sec-2 {
    0%,20.4%,21.6%,45.3%,46.5%,100% {scale: 1; background-color: red; transform: translateY(0);}
    21.0%,45.9% {scale: 1.1; background-color: gold; transform: translateY(-.5rem);}
    10%,60% {opacity: 1;}
    0%,7%,70%,100% {opacity: 0;}
}

@keyframes animation-sec-3 {
    0%,21.6%,22.8%,46.5%,47.7%,100% {scale: 1; background-color: red; transform: translateY(0);}
    22.2%,47.1% {scale: 1.1; background-color: gold; transform: translateY(-.5rem);}
    10%,60% {opacity: 1;}
    0%,7%,70%,100% {opacity: 0;}
}

@keyframes animation-sec-4 {
    0%,22.8%,24.0%,47.7%,48.9%,100% {scale: 1; background-color: red; transform: translateY(0);}
    23.4%,48.3% {scale: 1.1; background-color: gold; transform: translateY(-.5rem);}
    10%,60% {opacity: 1;}
    0%,7%,70%,100% {opacity: 0;}
}

@keyframes animation-sec-5 {
    0%,24.0%,25.2%,48.9%,50.1%,100% {scale: 1; background-color: red; transform: translateY(0);}
    24.6%,49.5% {scale: 1.1; background-color: gold; transform: translateY(-.5rem);}
    10%,60% {opacity: 1;}
    0%,7%,70%,100% {opacity: 0;}
}

@keyframes animation-sec-6 {
    0%,25.2%,26.4%,50.1%,51.3%,100% {scale: 1; background-color: red; transform: translateY(0);}
    25.8%,50.7% {scale: 1.1; background-color: gold; transform: translateY(-.5rem);}
    10%,60% {opacity: 1;}
    0%,7%,70%,100% {opacity: 0;}
}

@keyframes animation-sec-7 {
    0%,26.4%,27.6%,51.3%,52.5%,100% {scale: 1; background-color: red; transform: translateY(0);}
    27.0%,51.9% {scale: 1.1; background-color: gold; transform: translateY(-.5rem);}
    10%,60% {opacity: 1;}
    0%,7%,70%,100% {opacity: 0;}
}

@keyframes animation-sec-8 {
    0%,27.6%,28.8%,52.5%,53.7%,100% {scale: 1; background-color: red; transform: translateY(0);}
    28.2%,53.1% {scale: 1.1; background-color: gold; transform: translateY(-.5rem);}
    10%,60% {opacity: 1;}
    0%,7%,70%,100% {opacity: 0;}
}

@keyframes animation-sec-9 {
    0%,28.8%,30.0%,53.7%,54.9%,100% {scale: 1; background-color: red; transform: translateY(0);}
    29.4%,54.3% {scale: 1.1; background-color: gold; transform: translateY(-.5rem);}
    10%,60% {opacity: 1;}
    0%,7%,70%,100% {opacity: 0;}
}


@keyframes fade-in-out {
    0%, 100% {opacity: 0; scale: 0; transform-origin: 50% 0%; filter: blur(10px);}
    20%, 80% {opacity: 1; scale: 1; filter: blur(0);}
}

@keyframes blend-in-out {
    0%, 100% {opacity: 0; filter: blur(10px); transform: rotate(-1deg);}
    30%, 90% {opacity: 1; filter: blur(0); transform: rotate(0deg);}
}

@keyframes slow-out {
    from {transform: translateY(0); filter: blur(0px); scale: 1;}
    to {transform: translateY(60vh); filter: blur(10px); scale: .8;}
}

@keyframes rotating {
    0%, 100%{transform: rotate(-1deg);}
    50% {transform: rotate(1deg);}
    
}

/* footer {
    height: 100px;
    width: 100%;
    position: absolute;
    background-image: linear-gradient(#1b161d, color-mix(in srgb, #1b161d 90%, #ff53f6));
    background-color: red;
    bottom: 0;
    display: block;
    font-family: 'Genos';
    text-decoration: none;
    border-top: 2px solid linear-gradient(#1b161d 90%, white);
    text-shadow: 0 0 .7em linear-gradient(rgb(34, 112, 143) 70%, white);
    box-shadow: 0 0 1rem 0.1rem linear-gradient(#1b161d 30%, rgb(255, 83, 246));
    overflow-y: hidden;
}

footer ul {
    text-align: center;
    margin-bottom: 20px;
}

footer ul li {
    line-height: 20px;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    list-style: none;
}

footer ul li a {
    color: white;
    text-decoration: none;
    font-size: 1.1em;
    font-weight: 1000;
    display: inline-block;
    text-transform: uppercase;
}

.footer_img {
    height: 90px;
    margin: 0;
    position: absolute;
    padding-top: 1em;
    padding-left: 1em;
    line-height: 80px;
    pointer-events: painted;
} */