/* * {
    border: solid 1px red;
} */

@keyframes flicker {
    0% {
        opacity: 0.37861;
    }

    5% {
        opacity: 0.34769;
    }

    10% {
        opacity: 0.23604;
    }

    15% {
        opacity: 0.80626;
    }

    20% {
        opacity: 0.38128;
    }

    25% {
        opacity: 0.83891;
    }

    30% {
        opacity: 0.65583;
    }

    35% {
        opacity: 0.67807;
    }

    40% {
        opacity: 0.36559;
    }

    45% {
        opacity: 0.84693;
    }

    50% {
        opacity: 0.86019;
    }

    55% {
        opacity: 0.38594;
    }

    60% {
        opacity: 0.30313;
    }

    65% {
        opacity: 0.71988;
    }

    70% {
        opacity: 0.53455;
    }

    75% {
        opacity: 0.37288;
    }

    80% {
        opacity: 0.71428;
    }

    85% {
        opacity: 0.70419;
    }

    90% {
        opacity: 0.7003;
    }

    95% {
        opacity: 0.36108;
    }

    100% {
        opacity: 0.34387;
    }
}

.crt::before {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    z-index: 2;
    background-size: 100% 5px, 10px 100%;
    pointer-events: none;
    animation: flicker 0.05s infinite;
}

:root {
    --primary-color: #091629;
    --section-body-width: 1000px;
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--primary-color);
    /* background-color: black; */
    overflow-x: hidden;
    overflow-y: hidden;
    min-height: 100vh;
    min-width: 100vw;
    cursor: none;
}

/* Style the scrollbar to use a shade lighter than primary color for background, and the primary color for the nub */

::-webkit-scrollbar {
    width: 10px;
    background-color: #00000000;
}

::-webkit-scrollbar-thumb {
    background-color: #050e1b;
}

#filter {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 100;
    pointer-events: none;
}

.section {
    /* min-height: 100vh; */
    min-width: calc(100vw - 20px);
    position: relative;
    /* outline: 1px solid red; */
    outline-offset: -1px;
}

#part-1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    padding-bottom: 100px;
    height: calc(100vh - 100px);
}

#part-2 {
    min-height: 2300px;
}

h1 {
    font-size: 5rem;
}

.foreground {
    font-family: Arial, Helvetica, sans-serif;
    color: var(--primary-color);
    z-index: 10;
    user-select: none;
}

.ball {
    --background-color: rgb(60, 63, 210);
    --ball-size: 50px;
    width: var(--ball-size);
    height: var(--ball-size);
    border-radius: 50%;
    background-color: var(--background-color);
    position: absolute;
    animation: glowing 4s infinite;
    transition: animations 0.5s ease-in-out;
}

#ball-1 {
    width: calc(var(--ball-size) * 2);
    height: calc(var(--ball-size) * 2);
    z-index: 0;
}

.glow-orb-1 {
    --blur: 60px;
    filter: blur(var(--blur));
}

#ball-2 {
    --blur: 15px;
    width: calc(var(--ball-size) * 1.0);
    height: calc(var(--ball-size) * 1.0);
}

.glow-orb-2 {
    filter: blur(var(--blur));
    z-index: 1;
    border: solid 10px #274bee;
}

#ball-3 {
    --background-color: #8d4bf0;
    width: calc(var(--ball-size) * 0.3);
    height: calc(var(--ball-size) * 0.3);
    /* filter: hue-rotate(90deg); */
    filter: blur(10px);
    /* z-index: 100; */
    background-color: white;
    border: solid 10px var(--background-color);
}

.ui {
    position: absolute;
    font-family: 'Times New Roman', Times, serif;
    font-size: 1rem;
    color: white;
    background-color: #0000004a;
    padding: 0.5rem;
    z-index: 100;
}

#mouse-follow {
    bottom: 1rem;
    right: 1rem;
}

@keyframes glowing {
    0% {
        box-shadow: 0 0 0 var(--background-color);
    }

    50% {
        box-shadow: 0 0 50px var(--background-color);
    }

    100% {
        box-shadow: 0 0 0 var(--background-color);
    }
}

.hidden {
    display: none !important;
    visibility: hidden !important;
}

/* Too many things relied on the first hidden, so a second hidden may solve the problem */
.hidden-2 {
    display: none !important;
    visibility: hidden !important;
}

.hidden-3 {
    visibility: hidden !important;
}


.sign {
    color: var(--primary-color);
}

#first-sign {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 180px;
    text-align: center;
    transform: translate(-50%, -50%);
}

#end-sign {
    position: absolute;
    top: 0px;
    left: 320px;
    width: 180px;
    text-align: center;
}

#congrats {
    position: absolute;
    width: 1000px;
    text-align: center;
    left: calc((100vw - var(--section-body-width))/2);
    top: 2300px;
}

#congrats-text {
    z-index: 2;
    position: relative;
    top: 25px;
    font-size: 10rem;
}

.glow-orb {
    filter: blur(20px);
    border-radius: 50%;
    position: absolute;
    z-index: 0;
    background-attachment: local !important;
}

#go-1 {
    --orb-size: 150px;
    width: var(--orb-size);
    height: var(--orb-size);
    top: 50%;
    left: 450px;
    scale: 1.5;
    filter: blur(40px) hue-rotate(90deg);
}

#go-2 {
    --orb-size: 200px;
    width: var(--orb-size);
    height: var(--orb-size);
    top: 180px;
    left: 180px;
    scale: 1.5;
    filter: blur(50px) hue-rotate(32deg);
}

#go-3 {
    --orb-size: 150px;
    width: var(--orb-size);
    height: var(--orb-size);
    top: 290px;
    left: 705px;
    scale: 1.5;
    filter: blur(40px) hue-rotate(-90deg);
}

#go-4 {
    --orb-size: 150px;
    width: var(--orb-size);
    height: var(--orb-size);
    top: 130px;
    left: 570px;
    scale: 1.5;
    filter: blur(40px) hue-rotate(60deg);
}

#start-platformer-sign {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.section-body {
    position: relative;
    left: calc(((100vw - var(--section-body-width)) - 10px)/2);
    width: var(--section-body-width);
    height: 1000px;
    /* outline: 2px solid purple; */
    outline-offset: -1px;
}

.wall {
    --base-height: 0px;
    position: absolute;
    top: 0;
    z-index: 5;
    outline-offset: -1px;
    color: var(--primary-color);
    user-select: none;
}

.maze-wall {
    --base-height: 150px;
    top: var(--base-height);
    background-color: var(--primary-color);
}

.section-edge {
    width: calc(((100vw - var(--section-body-width)) - 10px)/2);
    height: calc(100% - var(--base-height));
    position: absolute;
}

.se-right {
    left: calc((((100vw - var(--section-body-width)) - 10px)/2) + var(--section-body-width));
}

#space-1 {
    background-color: #000003;
    background-image: url("../img/space-bg-2.gif");
}

#space-2 {
    background-color: #020a36;
    background-image: url("../img/dblue003.jpg");
}

#space-3 {
    background-color: #043fad;
    background-image: url("../img/clouds.png");
    background-size: cover;
    background-position: center;
}

#space-3>.section-body {
    height: 2000px;
}

#surface {
    display: inline-flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    position: relative;
    left: calc(((100vw - var(--section-body-width)) - 10px)/2);
}

#fake-padding {
    min-width: calc((((100vw - var(--section-body-width)) - 10px)/2) + 10px);
    height: 100%;
    background-color: var(--primary-color);
    position: relative;
}

.surface-section {
    position: relative;
    min-width: var(--section-body-width);
    /* outline: 2px solid purple; */
    outline-offset: -1px;
    height: 100vh;
    background-size: cover;
    background-position: center;
}

#ss-1 {
    background-image: url("../img/Nekkos\ Journey/1.jpg");
    background-position: center;
}

#ss-2 {
    background-image: url("../img/Nekkos\ Journey/2.jpg");
    background-position: center;
}

#ss-3 {
    background-image: url("../img/Nekkos\ Journey/3.jpg");
    background-position: center;
}

#ss-4 {
    background-image: url("../img/Nekkos\ Journey/4.jpg");
    background-position: center;
}

#ss-5 {
    background-image: url("../img/Nekkos\ Journey/5.jpg");
    background-position: center;
}

#ss-6 {
    background-image: url("../img/Nekkos\ Journey/6.jpg");
    background-position: center;
}

#ss-7 {
    background-image: url("../img/Nekkos\ Journey/7.jpg");
    background-position: center;
}

#ss-8 {
    background-image: url("../img/Nekkos\ Journey/8.jpg");
    background-position: center;
}

#ss-9 {
    background-image: url("../img/Nekkos\ Journey/9.jpg");
    background-position: center;
}

#ss-10 {
    background-image: url("../img/Nekkos\ Journey/10.jpg");
    background-position: center;
}

#ss-11 {
    background-image: url("../img/Nekkos\ Journey/11.jpg");
    background-position: center;
}

#ss-12 {
    background-image: url("../img/Nekkos\ Journey/12.jpg");
    background-position: center;
}

#ss-13 {
    background-image: url("../img/Nekkos\ Journey/13.jpg");
    background-position: center;
}

#ss-14 {
    background-image: url("../img/Nekkos\ Journey/14.jpg");
    background-position: center;
}

#ss-15 {
    background-image: url("../img/Nekkos\ Journey/15.jpg");
    background-position: center;
}

.pipe {
    --size: 100px;
    width: var(--size);
    height: var(--size);
    position: absolute;
    top: calc(100% - var(--size));
    right: 40px;
    background-image: url("../img/pipe.png");
    background-size: cover;
    background-position: center;
    image-rendering: pixelated;
}


.floor {
    --height: 5px;
    position: absolute;
    top: calc(100% - var(--height));
    left: 50%;
    transform: translateX(-50%);
    height: var(--height);
    width: 97%;
}

.ceiling {
    --height: 10px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: var(--height);
    width: 100%;
}

.scroll-edge {
    width: calc(((100vw - var(--section-body-width)) - 10px)/2);
    height: 100%;
    position: fixed;
    z-index: 100;
    top: 0;
    background-color: black;
}

#scroll-edge-left {
    left: 0;
}

#scroll-edge-right {
    left: calc((((100vw - var(--section-body-width)) - 10px)/2) + var(--section-body-width));
    width: calc(((100vw - var(--section-body-width)) - 10px)/2 + 10px);
}

#start-cap {
    position: absolute;
    top: 0;
    left: -5px;
    bottom: 0;
    width: 10px;
}

#end-cap {
    position: absolute;
    top: 0;
    right: -5px;
    bottom: 0;
    width: 10px;
}

/*  Start of walls ------------------------------ */

#wall-1 {
    width: 425px;
    height: 100px;
    left: 0px;
}

#wall-2 {
    --width: 425px;
    width: var(--width);
    height: 180px;
    right: 0;
}

#wall-3 {
    width: 315px;
    height: 180px;
    top: calc(var(--base-height) + 100px);
    left: 110px;
}

#wall-4 {
    --width: 175px;
    width: var(--width);
    height: 210px;
    right: 0;
    top: calc(var(--base-height) + 290px);
}

#wall-5 {
    --width: 590px;
    width: var(--width);
    height: 100px;
    left: 110px;
    top: calc(var(--base-height) + 400px);
}

#wall-6 {
    --width: 125px;
    width: var(--width);
    height: 100px;
    left: 575px;
    top: calc(var(--base-height) + 180px);
}

#wall-7 {
    --width: 125px;
    width: var(--width);
    height: 100px;
    left: 110px;
    top: calc(var(--base-height) + 500px);
}

#wall-8 {
    --width: 350px;
    width: var(--width);
    height: 100px;
    left: 0;
    top: calc(var(--base-height) + 720px);
}

#wall-9 {
    --width: 100px;
    width: var(--width);
    height: 320px;
    left: 350px;
    top: calc(var(--base-height) + 500px);
}

#wall-10 {
    --width: 440px;
    width: var(--width);
    height: 100px;
    right: 0;
    top: calc(var(--base-height) + 600px);
}

#wall-11 {
    --width: 110px;
    width: var(--width);
    height: 320px;
    left: 560px;
    top: calc(var(--base-height) + 700px);
}

#wall-12 {
    --width: 340px;
    width: var(--width);
    height: 100px;
    left: 110px;
    top: calc(var(--base-height) + 920px);
}

#wall-13 {
    --width: 110px;
    width: var(--width);
    height: 860px;
    left: 780px;
    top: calc(var(--base-height) + 810px);
}

#wall-14 {
    --width: 220px;
    width: var(--width);
    height: 100px;
    left: 560px;
    top: calc(var(--base-height) + 1150px);
}

#wall-15 {
    --width: 100px;
    width: var(--width);
    height: 440px;
    left: 350px;
    top: calc(var(--base-height) + 1020px);
}

#wall-16 {
    --width: 120px;
    width: var(--width);
    height: 320px;
    left: 110px;
    top: calc(var(--base-height) + 1140px);
}

#wall-17 {
    --width: 120px;
    width: var(--width);
    height: 100px;
    left: 230px;
    top: calc(var(--base-height) + 1240px);
}

#wall-18 {
    --width: 540px;
    width: var(--width);
    height: 100px;
    left: 240px;
    top: calc(var(--base-height) + 1570px);
}

#wall-19 {
    --width: 230px;
    width: var(--width);
    height: 100px;
    left: 450px;
    top: calc(var(--base-height) + 1360px);
}

#wall-20 {
    --width: 120px;
    width: var(--width);
    height: 100px;
    left: 0;
    top: calc(var(--base-height) + 1570px);
}

#wall-21 {
    --width: 240px;
    width: var(--width);
    height: 120px;
    left: 120px;
    top: calc(var(--base-height) + 1790px);
}

#wall-22 {
    --width: 120px;
    width: var(--width);
    height: 120px;
    left: 240px;
    top: calc(var(--base-height) + 1670px);
}

#wall-23 {
    --width: 360px;
    width: var(--width);
    height: 120px;
    left: 0px;
    top: calc(var(--base-height) + 2030px);
}

#wall-24 {
    --width: 120px;
    width: var(--width);
    height: 360px;
    left: 480px;
    top: calc(var(--base-height) + 1790px);
}

#wall-25 {
    --width: 280px;
    width: var(--width);
    height: 120px;
    right: 0px;
    top: calc(var(--base-height) + 1790px);
}

#wall-26 {
    --width: 400px;
    width: var(--width);
    height: 120px;
    right: 0px;
    top: calc(var(--base-height) + 2030px);
}

#wall-27 {
    --height: 50px;
    position: absolute;
    top: calc(100vh - var(--height));
    left: 0;
    right: 0;
    height: var(--height);
}