:root {
    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
    line-height: 1.5;
    font-weight: 400;
    color-scheme: light dark;
    color: #ffffffde;
    background-color: #242424;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%
}

a {
    font-weight: 500;
    color: #646cff;
    text-decoration: inherit
}

a:hover {
    color: #535bf2
}

body {
    margin: 0;
    display: flex;
    place-items: center;
    min-width: 320px;
    min-height: 100vh;
    height: 100%;
    width: 100%;
    overflow: hidden;
    cursor: url(../OP/T_Mouse.png), default
}

h1 {
    font-size: 3.2em;
    line-height: 1.1
}

button {
    border-radius: 8px;
    border: 1px solid transparent;
    padding: .6em 1.2em;
    font-size: 1em;
    font-weight: 500;
    font-family: inherit;
    background-color: #1a1a1a;
    cursor: pointer;
    transition: border-color .25s
}

button:hover {
    border-color: #646cff
}

button:focus,
button:focus-visible {
    outline: 4px auto -webkit-focus-ring-color
}

@media (prefers-color-scheme: light) {
    :root {
        color: #213547;
        background-color: #fff
    }

    a:hover {
        color: #747bff
    }

    button {
        background-color: #f9f9f9
    }
}

#root {
    margin: 0;
    padding: 0;
    text-align: center;
    height: 100%;
    width: 100%;
    position: absolute
}

.logo {
    height: 6em;
    padding: 1.5em;
    will-change: filter;
    transition: filter .3s
}

.logo:hover {
    filter: drop-shadow(0 0 2em #646cffaa)
}

.logo.react:hover {
    filter: drop-shadow(0 0 2em #61dafbaa)
}

@keyframes logo-spin {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

@media (prefers-reduced-motion: no-preference) {
    a:nth-of-type(2) .logo {
        animation: logo-spin infinite 20s linear
    }
}

.card {
    padding: 2em
}

.read-the-docs {
    color: #888
}

.webgl-wrapper {
    z-index: 0;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    overflow: clip;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    contain: strict
}

.webgl-canvas {
    outline: none
}

.menu-container {
    height: 100%;
    width: 100%;
    position: absolute;
    display: flex;
    flex-direction: column-reverse;
    pointer-events: none
}

.menu-container .menu-12 {
    height: 7vmax;
    width: 7vmax;
    top: 6vmin;
    right: 4%;
    background-image: url(../OP/Tex_0096.png);
    background-size: 100% 100%;
    position: absolute;
    transition: opacity 1s ease
}

.menu-container .menu-login {
    height: 100%;
    width: 100%;
    position: absolute;
    display: flex;
    flex-direction: column-reverse;
    transition: opacity 1s ease
}

.menu-container .menu-login .background {
    height: 20%;
    width: 100%;
    position: absolute;
    background: linear-gradient(to top, #2727279f, #00000000)
}

.menu-container .menu-login .menu-description {
    height: 20%;
    width: 100%;
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end
}

.menu-container .menu-login .menu-description .description {
    padding-bottom: 1vmin;
    padding-left: 1vw;
    text-align: left;
    width: 30%;
    float: left
}

.menu-container .menu-login .menu-description .description p {
    color: #232323e2;
    font-size: .4rem
}

.menu-container .menu-login .ClickMe {
    padding: 0%;
    margin: 0%;
    pointer-events: all;
    height: 4vmax;
    width: 4vmax;
    right: 4%;
    bottom: 6vmin;
    position: absolute;
    float: right;
    background-image: url(../OP/ClickMe.png);
    background-size: 100% 100%;
    background-color: #0000;
    border: none;
    transition: all .2s;
    outline: none;
    cursor: url(../OP/T_Mouse.png), default
}

.menu-container .menu-login .ClickMe:hover {
    transform: scale(1.1)
}

.menu-container .menu-login .ClickMe:active {
    transform: scale(.9);
    transition: all .1s
}

.menu-container .menu-login .continue::-moz-focus-inner {
    border: none
}

.menu-container .menu-doorCreate-content {
    height: 100%;
    width: 100%;
    position: absolute;
    display: flex;
    flex-direction: column-reverse;
    transition: opacity .5s ease
}

.menu-container .menu-doorCreate-content .menu-doorCreate {
    left: 2%;
    bottom: 4vmin;
    height: 4.5vmin;
    width: 96%;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .482) 50%, rgba(0, 0, 0, 0) 100%);
    animation: doorCreate-background .5s ease-in-out forwards
}

.menu-container .menu-doorCreate-content .menu-doorCreate .entry {
    height: 2.5vmin;
    width: 11.25vmin;
    background-image: url(../OP/Entry.png);
    background-size: 100% 100%;
    animation: doorCreate-entry .8s ease-in-out forwards
}

@keyframes doorCreate-background {
    0% {
        opacity: 0;
        transform: scaleY(.1)
    }

    10% {
        opacity: 1;
        transform: scaleY(.1)
    }

    to {
        transform: scaleY(1)
    }
}

@keyframes doorCreate-entry {
    0% {
        opacity: 0
    }

    62.5% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.progress-container {
    height: 100%;
    width: 100%;
    position: absolute;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    background-size: 2vmin, 1vmin;
    transition: opacity 1.5s ease 1s
}

.progress-container .progress-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    animation: fadeIn 1.5s ease-in-out forwards
}

.progress-container .OP {
    width: 45vmin;
    height: 35vmin;
    margin-bottom: 5vmin;
    transition: opacity 1s ease 1.2s
}

.progress-container .LoadingBar {
    width: 40vmin;
    height: 1.2vmin;
    border-radius: .7vmin;
    transition: opacity 1s ease 1.2s
}

.progress-container .LoadingBar .ball {
    z-index: auto;
    top: -1.2vmin;
    width: 1.2vmin;
    height: 1.2vmin;
    position: relative;
    background-color: #303030;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)
}

.progress-container .LoadingBar .progress-bar {
    width: 41vmin;
    margin-left: -.5vmin;
    height: 100%;
    background-color: #c2c2c2;
    clip-path: polygon(.5vmin 0, 40.5vmin 0, 100% 50%, 40.5vmin 100%, .5vmin 100%, 0 50%)
}

.progress-container .LoadingBar .progress-bar .progress {
    width: 50%;
    height: 100%;
    background-color: #303030
}

.bird {
    float: right;
    position: relative;
    top: -32px;
    right: -20px
}

#front_wings,
#back_wings {
    transform-origin: bottom;
    animation: flap 1s linear infinite alternate
}

@keyframes flap {
    50% {
        transform: scaleY(.3)
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}