body{
    overflow-x: hidden !important;
}

.home_container{
    position: relative;
    top: 100vh;
    width: 100%;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    gap: min(5vw, 20px);
    display: flex;
    flex-direction: column;
    padding: 0 20px;
}

.footer{
    top: 100vh;
}

.block{
    width: 100%;
    transition: all 0.3s;
    margin-bottom: 3vh;
    transform: translateY(0);
}

.covered{
    filter: blur(5px) brightness(0.8);
    pointer-events: none;
    border: none;
    transform: translateY(5vh) !important;
}

h2{
    font-size: min(3rem, 6vw);
    font-weight: 700;
    text-align: center;
    width: 100%;
}



.button_container{
    background-color: transparent;
    display: flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    gap: min(2rem, 4vw);
    align-items: center;
    margin: 5vh 0 10vh;
    position: relative;
    & h2{
        color: var(--main-color);
        text-shadow: 4px 4px 8px black;
        transition: all 0.3s;
    }
    & a{
        color: #fff;
        display: block;
        border-radius: min(20px, 2vw);
        transition: all 0.3s;
        box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12), 0 1px 3px 0 rgba(0, 0, 0, .2);
        &:hover{
            box-shadow: 3px 8px 8px 3px rgba(0, 0, 0, .596);
        }
        color: #000;
        transition: all 0.3s;
        display: block;
        height: 100%;
        padding: 10px;
        font-size: min(2.5rem, 5vw);
        font-weight: 700;
        &::after{
            background-color: #fff;
        }
        &:hover{
            color: #fff;
        }
    }
    &.covered h2{
        text-shadow: none;
    }
}

.timeline_container{
    background: linear-gradient(45deg, var(--main-color) 50%, #28b071);
    height: fit-content;
    min-height: 40rem;
    width: 100%;
    border: none;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    padding: 2vh;
    margin-top: 8vh;
    position: relative;
    box-shadow: 1px 1px 20px 0px #000;
    &.covered{
        box-shadow: none;
        & h2{
            transform: translateX(-10%);
            opacity: 0;
            text-shadow: none;
        }
        & .timeline .timeblock{
            & .time{
                opacity: 0;
                transform: translateX(-50%) translateY(-20%);
            }
            & .item{
                opacity: 0;
                transform: translateX(-50%) translateY(20%);
            }
            &::before, &::after{
                opacity: 0;
            }
            &::before{
                transform: translateX(-50%) translateY(-60%)
            }
        }
        & .timeline .line{
            opacity: 0;
        }
    }
    & h2{
        color: #fff;
        margin: 1rem 0 !important;
        opacity: 1;
        transition: all 0.3s;
        text-shadow: 1px 1px black
    }
    & .timeline{
        width: 100%; 
        position: relative;
        height: max(570px,30vh);
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: left;
        align-items: center;
        gap: 0;
        cursor: grab;
        overflow: hidden;
        transition: all 0.3s;
        margin: 1rem 0;
        & .line{
            position: absolute;
            background-color: #fff;
            height: 5px;
            width: 100%;
            top: 20%;
            transform: translateY(-50%);
            opacity: 1;
            transition: all 0.3s;
        }
        & .timeblock{
            height: 100%;
            z-index: 10000;
            width: 30%;
            min-width: 220px;
            position: relative;
            &::after{
                content: "";
                background-color: #000;
                position: absolute;
                box-sizing: border-box;
                transform: translateX(-50%) translateY(-50%);
                height: 20px;
                width: 20px;
                top: 20%;
                left: 50%;
                border: #fff solid 5px;
                display: block;
                z-index: 3;
                border-radius: 50%;
                opacity: 1;
            }
            &::before{
                content: "";
                background-color: #fff;
                width: 3px;
                height: 20%;
                position: absolute;
                top: 20%;
                left: 50%;
                transform: translateX(-50%) translateY(-50%);
                z-index: 2;
                opacity: 1;
            }
            & .time{
                font-size: min(2.5rem, 4vw);
                font-weight: 700;
                color: #fff;
                position: absolute;
                top: 0;
                left: 50%;
                transform: translateX(-50%) translateY(0);
                margin: 0;
                transition: all 0.3s;
                opacity: 1;
            }
            & .item{
                color: #000;
                padding: 0 min(1.5rem, 3vw);
                width: 100%;
                white-space: wrap;
                display: flex;
                gap: min(1.5rem, 3vw);
                flex-direction: column;
                & section{
                    font-size: min(1.5rem, 3vw);
                    border-radius: min(1.5rem, 3vw);
                }
                & img{
                    width: 100%;
                }
                position: absolute;
                top: 33%;
                left: 50%;
                transform: translateX(-50%) translateY(0);
                transition: all 0.3s;
                opacity: 1;
            }
        }
    }    
}

.fixed_box{
    transform: translateY(0) !important;
}

.units{
    display: flex;
    flex-direction: column;
    gap: min(2.5rem, 5vw);
}

.unit{
    display: flex;
    flex-direction: row;
    gap: min(2rem, 4vw);
    justify-content: center;
    align-items: center;
    min-height: 220px;
    padding: min(1.5rem, 30vw);
    overflow: hidden;
    height: min(20vh, 200px);
    color: #fff;
    & .left,
    & .right{
        transition: all 0.3s;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    & section{
        font-size: min(1.5rem, 3vw);
    }
    & h2{
        font-size: min(2rem, 4vw);
        font-weight: 700;
        line-height: min(2rem, 4vw);
        text-shadow: 1px 1px black;
    }
    & img{
        height: 100%;
    }
    &.auto{
        height: auto !important;
    }
    &.s{
        height: min(20vh, 200px);
    }
    &.m{
        height: min(30vh, 300px);
    }
    &.l{
        height: min(40vh, 400px);
    }
    &.xl{
        height: min(45vh, 450px);
        min-height: 300px;
    }
    &.xxl{
        height: min(50vh, 500px);
    }
    & ul li{
        list-style: revert;
    }
}

@media all and (max-width: 1200px){
    .unit.xl img{
        display: none !important;
    }
}

@media all and (max-width: 1000px){
    .unit .img_box{
        display: none;
    }
}


.linear_gradient_right{
    background: linear-gradient(45deg, var(--box-color), transparent) !important;
}

.linear_gradient_left{
    background: linear-gradient(45deg, transparent, var(--box-color)) !important;
}

.from_both_sides{
    &.deactivated{
        & .left{
            opacity: 0;
            transform: translateX(-20%);
        }
        & .right{
            opacity: 0;
            transform: translateX(20%);
        }
    }
    background: linear-gradient(45deg, var(--main-color), transparent, var(--main-color));
}

.from_left{
    &.deactivated{
        & .left,
        & .right{
            opacity: 0;
            transform: translateX(-20%);
        }
    }
    background: linear-gradient(45deg, var(--main-color), transparent);
}

.from_right{
    &.deactivated{
        & .left,
        & .right{
            opacity: 0;
            transform: translateX(20%);
        }
    }
    background: linear-gradient(45deg, transparent, var(--main-color));
}


.line_box{
    padding: 0 min(2rem, 4vw);
    &.covered{
        &::before{
            height: 0;
        }
        &::after{
            height: 0;
        }
    }
    &::before{
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 8px;
        height: 100%;
        background-color: var(--main-color);
        transition: all 0.3s;
        transform: translateX(-100%);
    }
    &::after{
        content: "";
        position: absolute;
        right: 0;
        top: 0;
        width: 8px;
        height: 100%;
        background-color: var(--main-color);
        transition: all 0.3s;
        transform: translateX(100%);
    }
}

.line_box_up_and_down{
    padding: 0 min(2rem, 4vw);
    &.covered{
        &::before{
            width: 0;
        }
        &::after{
            width: 0;
        }
    }
    &::before{
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 8px;
        background-color: var(--main-color);
        transition: all 0.3s;
        transform: translateY(-100%);
    }
    &::after{
        content: "";
        position: absolute;
        right: 0;
        top: 100%;
        width: 100%;
        height: 8px;
        background-color: var(--main-color);
        transition: all 0.3s;
        transform: translateY(100%);
    }
}

.line_box_left{
    padding: 0 min(2rem, 4vw);
    &.covered{
        &::before{
            height: 0;
        }
    }
    &::before{
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 8px;
        height: 100%;
        background-color: var(--main-color);
        transition: all 0.3s;
        transform: translateX(-100%);
    }
}

.line_box_right{
    padding: 0 min(2rem, 4vw);
    &.covered{
        &::after{
            height: 0;
        }
    }
    &::after{
        content: "";
        position: absolute;
        right: 0;
        top: 0;
        width: 8px;
        height: 100%;
        background-color: var(--main-color);
        transition: all 0.3s;
        transform: translateX(100%);
    }
}

.curmino{
    font-size: min(15vh, 15vw);
    font-weight: 900;
    text-align: center;
    word-spacing: 100vw;
    overflow: hidden;
    background: linear-gradient(225deg, 
        var(--wet-lab-color) 0%, var(--wet-lab-color) 9%,
        transparent 9%, transparent 10%,
        var(--dry-lab-color) 10%, var(--dry-lab-color) 19%,
        transparent 19%, transparent 20%,
        var(--hp-color) 20%, var(--hp-color) 29%,
        transparent 29%, transparent 30%,
        var(--entrepreneurship-color) 30%, var(--entrepreneurship-color) 39%,
        transparent 39%, transparent 40%,
        var(--safety-color) 40%, var(--safety-color) 49%,
        transparent 49%, transparent 50%,
        var(--wet-lab-color) 50%, var(--wet-lab-color) 59%,
        transparent 59%, transparent 60%,
        var(--dry-lab-color) 60%, var(--dry-lab-color) 69%,
        transparent 69%, transparent 70%,
        var(--hp-color) 70%, var(--hp-color) 79%,
        transparent 79%, transparent 80%,
        var(--entrepreneurship-color) 80%, var(--entrepreneurship-color) 89%,
        transparent 89%, transparent 90%,
        var(--safety-color) 90%, var(--safety-color) 99%,
        transparent 99%, transparent 100%
    );
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 200%;
    animation: move 4s linear infinite;
    &.covered{
        animation: none !important;
    }
    width: min-content;
    text-transform: uppercase;
    line-height:  min(16vh, 16vw);
    font-family: 'minecraft';
}

@keyframes move {
    0% {
        background-position: 0% 100%;
    }
    100% {
        background-position: 100% 0%;
    }
}

.trapezoidal-right{
    clip-path: polygon(100% 12.5%, 100% 87.5%, 0 100%, 0 0);
    padding: max(8vh, 100px) max(3vh, 37.5px);
}

.trapezoidal-left{
    clip-path: polygon(0 12.5%, 0 87.5%, 100% 100%, 100% 0);
    padding: max(8vh, 100px) max(3vh, 37.5px);
}

.trapezoidal-down{
    clip-path: polygon(0 0, 0 87.5%, 100% 100%, 100% 0);
    padding: max(3vh, 37.5px) max(3vh, 37.5px) max(8vh, 100px);
}

.trapezoidal-up{

    clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 12.5%);
    padding: max(8vh, 100px) max(3vh, 37.5px) max(3vh, 37.5px);
}

.trapezoidal-right,
.trapezoidal-left,
.trapezoidal-down,
.trapezoidal-up{
    font-size: min(1.5rem, 3vw);
    height: max(45vh, 562.5px);
    color: #fff;
    box-sizing: border-box;
    gap: min(2rem, 4vh) !important;
    transition: all 0.3s ease;
    flex-direction: row !important;
    & h2{
        font-size: min(2rem, 4vw);
        font-weight: 700;
        text-shadow: 1px 1px #000;
    }
    & img{
        height: max(25vh, 312.5px) !important;
        border-radius: max(2vh, 25px);
        box-shadow:  1px 1px 20px black;
        transition: all 0.3s;
    }
    &.covered{
        color: transparent;
        & h2{
            color: transparent;
            text-shadow: none;
        }
        & img{
            opacity: 0;
            box-shadow: none;
        }
    }
}

@media all and (max-width: 1200px){
    .trapezoidal-right,
    .trapezoidal-left,
    .trapezoidal-down,
    .trapezoidal-up{
        & img{
            display: none;
        }
    }
}

.content_box{
    display: flex;
    flex-direction: column;
    gap: min(3rem, 6vw);
    justify-content: center;
    align-items: center;
    & img{
        height: 100%;
    }
    & .left{
        font-size: min(1.5rem, 3vw);
        color: #fff;
    }
    & .right{
        font-size: min(1.5rem, 3vw);
        color: #fff;
    }
}

.title_line{
    & h2{
        color: var(--main-color);
        text-shadow: 4px 4px 8px black;
        transition: all 0.3s;
        position: relative;
        width: max-content;
        &::before{
            content: "";
            background-color: var(--main-color);
            height: 8px;
            width: 100%;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateX(-110%) translateY(-50%);
            transition: all 0.3s;
        }
        &::after{
            content: "";
            background-color: var(--main-color);
            height: 8px;
            width: 100%;
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateX(110%) translateY(-50%);
            transition: all 0.3s;
        }
    }
    &.covered h2{
        text-shadow: none;
        &::before{
            width: 0;
        }
        &::after{
            width: 0;
        }
    }
}

.video{
    & iframe{
        border-radius: min(20px, 2vw);
        width: min(56vw, 1120px);
        min-width: 448px;
        height: min(31.5vw, 630px);
        min-height: 252px;
    }
    margin-top: 5vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: min(2rem, 4vw);
}

.game{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: min(2rem, 4vw);
    & .game_imgs{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        gap: min(2rem, 4vw);
        flex-wrap: wrap;
        transition: all 0.3s;
        & img{
            height: 100%;
            border-radius: min(20px, 2vw);
            box-shadow: 1px 1px 20px black;
            height: min(30vh, 30vw, 350px)
        }
    }
}

.transparent{
    background: transparent !important;
    color: white !important;
    & h2{
        text-shadow: 1px 1px black;
    }
    padding: 0 !important;
}

.banner{
    background: radial-gradient(circle at center, var(--main-color) 0, #28b071 100%) !important;
    & .main_title{
        width: min(80%, 2000px);
        animation: up_and_down 4s ease-in-out infinite;
    }
}

@keyframes up_and_down{
    0%{
        transform: translateY(0%);
    }
    50%{
        transform: translateY(-3%);
    }
    100%{
        transform: translateY(0%);
    }
}

@keyframes spin{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

span.yellow{
    color: #ced71b;
}

.body{
    & img{
        width: 100%;
    }
    position: relative;
    & .text_box{
        position: absolute;
        width: fit-content;
        background-color: #fff;
        transition: all 0.3s;
        border-radius: min(1.5rem, 3vw);
        box-shadow: 1px 1px 20px #000;
        &.covered{
            opacity: 0;
            transform: (-5vh, 0) !important;
        }
        transform: translate(0, 0);
        opacity: 1;
        color: #000;
        font-size: min(2.5rem, 2vw);
        & span.hl{
            font-size: inherit;
        }
        padding: min(2rem, 1.5vw);
        font-weight: 700;
    }
    & #text_1{
        top: 36%;
        left: 8%;
    }
    & #text_2{
        top: 55%;
        left: 60%;
    }
    & #text_3{
        top: 80%;
        left: 5%;
    }
}

span.hl{
    color: #f2beca;
    font-weight: 700;
    font-size: min(2rem, 4vw);
    text-shadow: 1px 1px #000;
}