@import"css2-1.css";
@import"css2-2.css";
@import"css2-3.css";
@import"css2-4.css";

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    scroll-margin-top: 36px;
    -webkit-font-smoothing: antialiased
}

.preload *, .preload *:before, .preload *:after {
    -webkit-animation: none !important;
    -moz-animation: none !important;
    -o-animation: none !important;
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    -o-transition: none !important
}

.preloader {
    z-index: 9999;
    opacity: 1;
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    background: #222222;
    animation: preloader .4s .4s cubic-bezier(.68, 0, .39, .99) forwards
}

.preloader img {
    opacity: 1;
    width: 240px;
    aspect-ratio: 14/10;
    animation: image .4s cubic-bezier(.075, .82, .165, 1) forwards
}

@keyframes image {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

@keyframes preloader {
    0% {
        transform: translateY(0)
    }

    to {
        transform: translateY(-120%)
    }
}

@media screen and (max-width: 860px) {
    .preloader img {
        width: 160px
    }
}

:root {
    color-scheme: dark
}

body {
    font-family: Poppins, sans-serif;
    display: flex;
    flex-direction: column;
    background: #070731
}

body[overflow=hidden] {
    overflow: hidden
}

body[overflow=visible] {
    overflow: visible
}

.box {
    display: flex;
    width: 100%;
    justify-content: center
}

.container {
    display: flex;
    padding: 0 32px
}

a {
    text-decoration: none;
    color: #fff
}

li {
    list-style-type: none
}

.slideIn, .slideOut {
    z-index: 1111;
    top: 0;
    left: 0;
    position: fixed;
    width: 100vw;
    height: 100%;
    background: #222222;
    display: flex;
    align-items: center;
    justify-content: center
}

.slideIn img, .slideOut img {
    width: 240px;
    pointer-events: none;
    user-select: none
}

@media screen and (max-width: 860px) {
    .slideIn img, .slideOut img {
        width: 160px
    }
}

.screen-box {
    z-index: -4;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden
}

.blob-box {
    position: absolute;
    transition: 2s cubic-bezier(.13, .8, .33, 1.2)
}

.blob {
    transform: skew(5deg, 5deg);
    opacity: .15;
    width: 1000px;
    height: 1000px;
    border-radius: 9999px;
    animation: blobRotate 15s linear infinite
}

@keyframes blobRotate {
    0% {
        rotate: 0deg
    }

    to {
        rotate: 360deg
    }
}