* {
    margin: 0;
    padding: 0;
}

html,
body {
    overflow: hidden;
}

.webgl {
    position: fixed;
    top: 0;
    left: 0;
    outline: none;
}

.jitter {
    animation-duration: 0.3s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: jittery;
    z-index: -10;
}

.interface-wrapper {
    width: 100%;
    top: 64px;
    left: 64px;
}

.icon-control-container {
    height: 26.5px;
    width: 26.5px;
}

@media only screen and (max-width: 768px) {
    .interface-wrapper {
        width: 100%;
        top: 24px;
        left: 24px;
    }

    .icon-control-container {
        height: 19.5px;
        width: 19.5px;
    }
}

@keyframes jittery {
    10% {
        transform: translate(-0.1px, -0.15px) scale(1, 1);
    }

    20% {
        transform: translate(0.15px, 0.1px) scale(1, 1);
    }

    30% {
        transform: translate(-0.2px, -0.25px) scale(1, 1);
    }

    40% {
        transform: translate(0.05px, 0.1px) scale(1, 1);
    }

    50% {
        transform: translate(-0.025px, -0.05px) scale(1, 1);
    }

    60% {
        transform: translate(0px, 0.075px) scale(1, 1);
    }

    70% {
        transform: translate(-0.075px, -0.1px) scale(1, 1);
    }

    80% {
        transform: translate(0.075px, 0.125px) scale(1, 1);
    }

    90% {
        transform: translate(-0.125px, -0.075px) scale(1, 1);
    }

    100% {
        transform: translate(0.075px, 0.025px) scale(1, 1);
    }
}

h1,
h2,
h3,
h4,
h5,
p {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 400;
    font-style: normal;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 0.02em;
    line-height: 1.6;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.15);
    /* mobile friendly font size */
    font-size: 16px;
}

body {
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.02em;
    line-height: 1.6;
    font-weight: 300;
}

/* if on mobile */
@media only screen and (max-width: 768px) {
    h1,
    h2,
    h3,
    h4,
    h5,
    p {
        font-size: 10px;
    }
}

br {
    padding-top: 8px;
    padding-bottom: 8px;
    height: 16px;
}

.loading::after {
    display: inline-block;
    animation: dotty steps(1, end) 1s infinite;
    content: '';
}

@keyframes dotty {
    0% {
        content: '   ';
    }
    25% {
        content: '. ';
    }
    50% {
        content: '.. ';
    }
    75% {
        content: '...';
    }
    100% {
        content: '   ';
    }
}
.blinking-cursor {
    background-color: #fff;
    width: 0.8em;
    height: 0.15em;
    -webkit-animation: 0.65s blink step-end infinite;
    -moz-animation: 0.65s blink step-end infinite;
    -ms-animation: 0.65s blink step-end infinite;
    -o-animation: 0.65s blink step-end infinite;
    animation: 0.65s blink step-end infinite;
}

@keyframes blink {
    from,
    to {
        background-color: transparent;
    }
    50% {
        background-color: white;
    }
}

@-moz-keyframes blink {
    from,
    to {
        background-color: transparent;
    }
    50% {
        background-color: white;
    }
}

@-webkit-keyframes blink {
    from,
    to {
        background-color: transparent;
    }
    50% {
        background-color: white;
    }
}

@-ms-keyframes blink {
    from,
    to {
        background-color: transparent;
    }
    50% {
        background-color: white;
    }
}

@-o-keyframes blink {
    from,
    to {
        background-color: transparent;
    }
    50% {
        background-color: white;
    }
}

.bios-start-button {
    background-color: #000;
    border: 4px solid #fff;
    border-width: 4px 3px 4px 3px;
}

.bios-start-button p {
    box-sizing: border-box;
    padding: 8px;
}

.bios-start-button:hover p {
    background-color: #fff;
    cursor: pointer;
    color: #000;
}

.loading-screen-header {
    padding: 48px;
}

.loading-screen-body {
    padding-left: 48px;
    padding-right: 48px;
}

.loading-screen-footer {
    padding: 48px;
    padding-bottom: 64px;
}

.info-wrapper {
    top: 64px;
    left: 64px;
}

.loading-terminal-content,
.loading-terminal-content p,
.loading-terminal-content span,
.loading-terminal-content b {
    color: #33ff33 !important;
}

.loading-terminal-input {
    color: #33ff33 !important;
}

.loading-terminal-input::placeholder {
    color: rgba(51, 255, 51, 0.72) !important;
}

.loading-terminal-line {
    opacity: 0.95;
}

.loading-terminal-log {
    opacity: 0.8;
}

.loading-terminal-warning {
    animation: terminal-warning-flicker 1.9s steps(2, end) infinite;
}

.loading-terminal-creepy {
    animation: terminal-creepy-glitch 4.5s linear infinite;
}

.loading-terminal-caret {
    display: inline-block;
    width: 0.7em;
    text-align: left;
    animation: terminal-caret-blink 0.85s steps(1, end) infinite;
}

@keyframes terminal-caret-blink {
    0%,
    49% {
        opacity: 1;
    }
    50%,
    100% {
        opacity: 0;
    }
}

@keyframes terminal-warning-flicker {
    0%,
    100% {
        opacity: 0.95;
    }
    20% {
        opacity: 0.65;
    }
    22% {
        opacity: 0.9;
    }
    60% {
        opacity: 0.75;
    }
}

@keyframes terminal-creepy-glitch {
    0%,
    100% {
        opacity: 0.95;
        transform: translateX(0);
    }
    44% {
        opacity: 0.75;
        transform: translateX(0);
    }
    45% {
        opacity: 0.95;
        transform: translateX(1px);
    }
    46% {
        opacity: 0.8;
        transform: translateX(-1px);
    }
    47% {
        opacity: 0.95;
        transform: translateX(0);
    }
}

/* if on mobile make all loading screen elements have a padding of 16 */
@media only screen and (max-width: 768px) {
    .loading-screen-header {
        padding: 16px;
    }

    .info-wrapper {
        top: 16px;
        left: 16px;
    }

    .blinking-cursor {
        background-color: #fff;
        width: 0.4em;
        height: 0.08em;
        -webkit-animation: 0.65s blink step-end infinite;
        -moz-animation: 0.65s blink step-end infinite;
        -ms-animation: 0.65s blink step-end infinite;
        -o-animation: 0.65s blink step-end infinite;
        animation: 0.65s blink step-end infinite;
    }
    
    .loading-screen-body {
        padding-left: 16px;
        padding-right: 16px;
    }

    .loading-screen-footer {
        padding: 16px;
        padding-bottom: 32px;
    }
}

.experience-start-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    box-sizing: border-box;
    padding: 0;
    overflow: hidden;
    background: #05070a;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 300;
    color: rgba(182, 198, 182, 0.82);
    letter-spacing: 0.015em;
    line-height: 1.5;
    text-shadow: 0 0 4px rgba(170, 196, 170, 0.12);
}

.experience-start-overlay,
.experience-start-overlay * {
    font-family: 'JetBrains Mono', monospace !important;
    font-style: normal !important;
    font-size: clamp(11px, 0.92vw, 13px) !important;
}

.experience-start-terminal-line {
    word-break: break-word;
}

.experience-start-space-layer {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background: #05070a;
}

.experience-start-star-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.experience-start-space-layer::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 4;
    opacity: 0.05;
    mix-blend-mode: overlay;
    background-image: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.28) 0.4px, transparent 0.9px),
        radial-gradient(circle at 75% 65%, rgba(255, 255, 255, 0.22) 0.35px, transparent 0.85px);
    background-size: 3px 3px, 4px 4px;
    animation: experience-start-grain-drift 34s linear infinite;
}

.experience-start-space-layer::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    background: radial-gradient(circle at center, rgba(10, 12, 18, 0) 26%, rgba(5, 7, 10, 0.28) 100%);
}

.experience-start-galaxy-band {
    position: absolute;
    top: 26%;
    left: -20%;
    width: 140%;
    height: 48vh;
    min-height: 260px;
    max-height: 520px;
    z-index: 1;
    border-radius: 999px;
    transform: rotate(-7deg);
    filter: blur(34px);
    opacity: 0.33;
    mix-blend-mode: screen;
    filter: blur(32px) saturate(0.92);
    background:
        radial-gradient(65% 80% at 26% 48%, rgba(214, 226, 255, 0.22), rgba(214, 226, 255, 0) 72%),
        radial-gradient(52% 64% at 46% 50%, rgba(145, 174, 255, 0.24), rgba(145, 174, 255, 0) 76%),
        radial-gradient(46% 60% at 64% 52%, rgba(95, 112, 186, 0.19), rgba(95, 112, 186, 0) 78%),
        radial-gradient(30% 52% at 84% 46%, rgba(215, 151, 84, 0.17), rgba(215, 151, 84, 0) 80%),
        linear-gradient(
            90deg,
            rgba(7, 10, 16, 0) 0%,
            rgba(32, 44, 72, 0.18) 18%,
            rgba(40, 64, 116, 0.21) 52%,
            rgba(18, 22, 38, 0.16) 78%,
            rgba(7, 10, 16, 0) 100%
        );
    animation: experience-start-galaxy-drift 48s ease-in-out infinite alternate;
}

.experience-start-galaxy-band::before {
    content: '';
    position: absolute;
    inset: 8% 4%;
    border-radius: inherit;
    mix-blend-mode: multiply;
    opacity: 0.42;
    background:
        radial-gradient(35% 50% at 34% 54%, rgba(5, 7, 10, 0.75), rgba(5, 7, 10, 0) 72%),
        radial-gradient(26% 44% at 58% 42%, rgba(7, 9, 14, 0.8), rgba(7, 9, 14, 0) 75%),
        radial-gradient(22% 40% at 72% 62%, rgba(7, 10, 16, 0.68), rgba(7, 10, 16, 0) 78%);
}

.experience-start-galaxy-band::after {
    content: '';
    position: absolute;
    inset: -8% -4%;
    border-radius: inherit;
    opacity: 0.22;
    mix-blend-mode: screen;
    background:
        radial-gradient(36% 52% at 40% 45%, rgba(178, 204, 255, 0.18), rgba(178, 204, 255, 0) 72%),
        radial-gradient(30% 48% at 68% 58%, rgba(127, 126, 196, 0.15), rgba(127, 126, 196, 0) 78%);
}

.experience-start-purple-bloom {
    position: absolute;
    top: 10%;
    right: 14%;
    width: 40vw;
    height: 38vw;
    max-width: 540px;
    max-height: 500px;
    z-index: 2;
    border-radius: 50%;
    mix-blend-mode: screen;
    opacity: 0.16;
    filter: blur(92px) saturate(0.9);
    background:
        radial-gradient(circle at 44% 48%, rgba(120, 96, 176, 0.26), rgba(120, 96, 176, 0) 72%),
        radial-gradient(circle at 62% 56%, rgba(86, 74, 148, 0.22), rgba(86, 74, 148, 0) 76%);
    animation: experience-start-purple-bloom-drift 56s ease-in-out infinite alternate;
}

.experience-start-green-cracks {
    position: absolute;
    left: -12%;
    bottom: -18%;
    width: 68vw;
    height: 60vh;
    min-height: 280px;
    max-height: 540px;
    z-index: 2;
    opacity: 0.2;
    mix-blend-mode: screen;
    filter: blur(22px) saturate(0.88);
    transform: rotate(-18deg);
    background:
        linear-gradient(
            118deg,
            rgba(31, 83, 56, 0) 8%,
            rgba(46, 116, 78, 0.24) 26%,
            rgba(52, 138, 88, 0.36) 38%,
            rgba(38, 98, 67, 0.2) 51%,
            rgba(31, 83, 56, 0) 66%
        ),
        radial-gradient(42% 36% at 58% 48%, rgba(48, 144, 92, 0.24), rgba(48, 144, 92, 0) 78%);
    mask-image: repeating-linear-gradient(
        100deg,
        rgba(255, 255, 255, 0) 0 7%,
        rgba(255, 255, 255, 0.75) 7.4% 8.2%,
        rgba(255, 255, 255, 0) 8.7% 16%
    );
    animation: experience-start-green-cracks-drift 52s ease-in-out infinite alternate;
}

.experience-start-shooting-stars {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    overflow: hidden;
}

.experience-start-shooting-star {
    position: absolute;
    height: 1.6px;
    border-radius: 999px;
    transform-origin: 100% 50%;
    transform: translate3d(0, 0, 0) rotate(var(--meteor-angle, 32deg));
    background: linear-gradient(
        90deg,
        rgba(150, 188, 255, 0) 0%,
        rgba(182, 208, 255, 0.18) 42%,
        rgba(214, 231, 255, 0.92) 100%
    );
    filter: blur(0.45px);
    box-shadow: 0 0 8px rgba(166, 199, 255, 0.24);
    animation: experience-start-shooting-star var(--meteor-cycle, 8.8s) var(--meteor-delay, 0s) ease-out infinite;
    will-change: transform, opacity;
}

.experience-start-shooting-star::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -1px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    transform: translateY(-50%);
    background: rgba(225, 238, 255, 0.96);
    box-shadow: 0 0 10px rgba(186, 214, 255, 0.64);
}

.experience-start-nebula {
    position: absolute;
    border-radius: 50%;
    z-index: 2;
    filter: blur(138px);
    opacity: 0.12;
    transform: translate3d(0, 0, 0);
    mix-blend-mode: screen;
    animation: experience-start-nebula-drift var(--nebula-duration, 42s) ease-in-out infinite alternate;
}

.experience-start-nebula--green {
    top: -8%;
    left: -6%;
    width: 56vw;
    height: 46vw;
    max-width: 720px;
    max-height: 580px;
    background: radial-gradient(circle at 52% 48%, rgba(31, 61, 43, 0.14), rgba(31, 61, 43, 0) 74%);
    --nebula-duration: 54s;
}

.experience-start-nebula--blue {
    top: 16%;
    left: 48%;
    width: 54vw;
    height: 44vw;
    max-width: 760px;
    max-height: 620px;
    background: radial-gradient(circle at 50% 50%, rgba(26, 42, 74, 0.16), rgba(26, 42, 74, 0) 76%);
    animation-direction: alternate-reverse;
    --nebula-duration: 46s;
}

.experience-start-nebula--purple {
    top: 62%;
    left: 18%;
    width: 48vw;
    height: 38vw;
    max-width: 660px;
    max-height: 500px;
    background: radial-gradient(circle at 50% 50%, rgba(42, 31, 61, 0.13), rgba(42, 31, 61, 0) 78%);
    --nebula-duration: 60s;
}

.experience-start-floating-area {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 1;
}

.experience-start-floating-block {
    position: absolute;
    top: 0;
    left: 0;
    width: max-content;
    max-width: min(72vw, 76ch);
    will-change: transform;
    pointer-events: none;
    font-weight: 300;
    color: #93a9da;
    opacity: 0.5;
}

.experience-start-company {
    display: grid;
    row-gap: 2px;
    white-space: pre-line;
    color: inherit;
}

.experience-start-description {
    max-width: 70ch;
    color: inherit;
}

.experience-start-system-data {
    display: grid;
    row-gap: 2px;
    font-size: inherit !important;
    color: inherit;
}

.experience-start-contact {
    white-space: nowrap;
    font-size: inherit !important;
    color: inherit;
}

.experience-start-button {
    position: fixed;
    top: 50vh;
    left: 50vw;
    z-index: 3;
    margin: 0;
    transform: translate(-50%, -50%);
    min-width: 120px;
    padding: 8px 14px;
    border: 1px solid #ffffff;
    border-radius: 0;
    background: transparent;
    color: #ffffff;
    font-family: 'JetBrains Mono', monospace;
    font-size: clamp(14px, 1.2vw, 18px) !important;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition:
        color 120ms ease,
        border-color 120ms ease,
        background-color 120ms ease;
    box-shadow: none;
}

.experience-start-button:hover:not(.is-disabled) {
    color: #ffffff;
    border-color: #ffffff;
    background-color: rgba(255, 255, 255, 0.1);
}

.experience-start-button.is-disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.experience-start-cursor {
    position: fixed;
    top: calc(50vh + 20px);
    left: calc(50vw + 32px);
    z-index: 2;
    color: rgba(182, 198, 182, 0.82);
    font-size: clamp(11px, 0.92vw, 13px) !important;
    line-height: 1;
    animation: experience-start-cursor-blink 0.95s steps(1, end) infinite;
    pointer-events: none;
}

@keyframes experience-start-cursor-blink {
    0%,
    49% {
        opacity: 1;
    }
    50%,
    100% {
        opacity: 0;
    }
}

@keyframes experience-start-nebula-drift {
    0% {
        transform: translate3d(-1.4%, -1.1%, 0) scale(1);
        opacity: 0.09;
    }
    50% {
        opacity: 0.17;
    }
    100% {
        transform: translate3d(1.8%, 1.3%, 0) scale(1.06);
        opacity: 0.1;
    }
}

@keyframes experience-start-grain-drift {
    0% {
        transform: translate3d(0, 0, 0);
    }
    50% {
        transform: translate3d(-1.5%, 1%, 0);
    }
    100% {
        transform: translate3d(1%, -1.5%, 0);
    }
}

@keyframes experience-start-galaxy-drift {
    0% {
        transform: rotate(-7deg) translate3d(-2.4%, -1%, 0) scale(1);
        opacity: 0.3;
    }
    50% {
        opacity: 0.38;
    }
    100% {
        transform: rotate(-6deg) translate3d(2.2%, 1.4%, 0) scale(1.04);
        opacity: 0.34;
    }
}

@keyframes experience-start-purple-bloom-drift {
    0% {
        transform: translate3d(-1.2%, -1%, 0) scale(0.98);
        opacity: 0.08;
    }
    50% {
        opacity: 0.12;
    }
    100% {
        transform: translate3d(1.6%, 1.1%, 0) scale(1.04);
        opacity: 0.1;
    }
}

@keyframes experience-start-green-cracks-drift {
    0% {
        transform: rotate(-18deg) translate3d(-1.2%, 0.8%, 0) scale(1);
        opacity: 0.12;
    }
    50% {
        opacity: 0.17;
    }
    100% {
        transform: rotate(-16.5deg) translate3d(1.4%, -1%, 0) scale(1.03);
        opacity: 0.13;
    }
}

@keyframes experience-start-shooting-star {
    0% {
        opacity: 0;
        transform: translate3d(0, 0, 0) rotate(var(--meteor-angle, 32deg)) scaleX(0.76);
    }
    3% {
        opacity: var(--meteor-opacity, 0.52);
    }
    22% {
        opacity: 0;
        transform: translate3d(var(--meteor-travel-x, 480px), var(--meteor-travel-y, 300px), 0)
            rotate(var(--meteor-angle, 32deg)) scaleX(1);
    }
    100% {
        opacity: 0;
        transform: translate3d(var(--meteor-travel-x, 480px), var(--meteor-travel-y, 300px), 0)
            rotate(var(--meteor-angle, 32deg)) scaleX(1);
    }
}

@media only screen and (max-width: 768px) {
    .experience-start-overlay {
        padding: 0;
    }

    .experience-start-floating-block {
        max-width: min(88vw, 64ch);
    }

    .experience-start-nebula {
        filter: blur(92px);
    }

    .experience-start-description {
        max-width: 100%;
    }

    .experience-start-cursor {
        top: calc(50vh + 18px);
        left: calc(50vw + 24px);
    }
}


/*# sourceMappingURL=main.css.map*/