* {
    cursor: none !important;
    user-select: none;
    box-sizing: border-box;
}
html {
    background: #1e1e2e;
    font-family: "Jetbrains Mono", monospace, sans-serif;
    color: #cdd6f4;
    overflow: hidden;
    width: 100%;
    height: 100%;
}
body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
}
@font-face {
    font-family: "Jetbrains Mono";
    src: url("./JetBrainsMono.ttf") format("truetype");
}
h1 {
    position: fixed;
    left: 0;
    top: 30vh;
    margin: 0;
    font-size: 10vh;
    line-height: 20vh;
    width: 100vw;
    text-align: center;
    opacity: 0;
    filter: blur(50px);
}
h2 {
    position: fixed;
    left: 0;
    bottom: 30vh;
    margin: 0;
    font-size: 5vh;
    line-height: 10vh;
    width: 100vw;
    text-align: center;
    opacity: 0;
    filter: blur(50px);
}
#code {
    position: fixed;
    counter-reset: linenumber;
    left: 30vw;
    top: 100vh;
    font: inherit;
    background: #313244;
    padding: 10px;
    padding-left: calc(3.8em + 10px);
    border-radius: 10px;
    font-size: 1.5vh;
}
.line-numbers-rows {
    position: absolute;
    pointer-events: none;
    top: 0;
    font-size: 100%;
    left: 10px;
    width: 3em;
    padding-top: 10px;
}

.line-numbers-rows > span {
    display: block;
    counter-increment: linenumber;
    font-size: 1.5vh;
}

.line-numbers-rows > span:before {
    content: counter(linenumber);
    color: #bac2de;
    display: block;
    padding-right: 0.8em;
    text-align: right;
}
#code.scroll {
    transition: transform ease-in-out 6s;
    transform: translateY(calc(-100% - 200vh));
}
#robot {
    position: fixed;
    left: 20vw;
    top: 50vh;
    transform: translateY(-50%);
    width: 60vw;
    background: url(robot.jpg);
    background-size: contain;
    box-shadow: 0 0 15px 20px #1e1e2e inset;
    aspect-ratio: 2016/1512;
    filter: blur(20px);
    opacity: 0;
}
#robot.small {
    transition:
        width ease-in-out 1s,
        left ease-in-out 1s,
        opacity linear 0.8s;
    left: 2vw;
    width: 26vw;
}
#git {
    position: fixed;
    left: 50vw;
    top: 50vh;
    transform: translate(-50%, -50%);
    width: 60vw;
    filter: blur(20px);
    opacity: 0;
}
#git-example {
    position: fixed;
    left: 50vw;
    top: 50vh;
    transform: translate(-50%, -50%);
    width: 100vw;
    filter: blur(20px);
    opacity: 0;
}
#cavedash {
    position: fixed;
    left: 50vw;
    top: 0;
    transform: translateX(-50%);
    height: 50vh;
    filter: blur(20px);
    opacity: 0;
}
#planetdodge {
    position: fixed;
    left: 50vw;
    bottom: 0;
    transform: translateX(-50%);
    height: 50vh;
    filter: blur(20px);
    opacity: 0;
}
*.show {
    opacity: 1 !important;
    filter: blur(0px) !important;
    transition:
        filter linear 1.2s,
        opacity linear 0.8s;
}
*.goaway {
    opacity: 0 !important;
}
#non-fullscreen {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background: #1e1e2e;
    cursor: pointer !important;
    line-height: 100vh;
    text-align: center;
}
#non-fullscreen.ended {
    cursor: default !important;
}