body {
    font-family: Arial, sans-serif;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    width: 100vw;
    overflow-x: hidden;
}

nav {
    top: 0;
    position: absolute;
    z-index: 1;
    width: 100%;
    height: var(--nav-bar-em);
    --nav-bar-em: calc(5 * min(16px, 10px + 0.375vw));
    --bg: #02000f;
    background: var(--bg);
    transition: top var(--sit-time) var(--sit-delay);
    font-size: calc(min(1em, 0.836vw));
}

#black-transition {
    position: absolute;
    width: 100vw;
    height: 100vh;
    background: black;
    opacity: 0;
    transition: opacity 120ms ease-in;
    pointer-events: none;
    z-index: 1000;
}

nav.menu-visible {
    height: 100vh;
}

.menu-btn > .sign::before {
    content: '☰ Menu ☰'
}

nav.menu-visible .menu-btn > .sign::before {
    content: '— Menu —'
}

.hall-floor {
    position: absolute;
    background: linear-gradient(#080010 0%, #000 100%);
    height: 50vh;
    width: 100%;
    top: 31.5em;
}

.menu-visible .nav-wrapper {
    display: flex;
}

.nav-wrapper {
    display: none;
    top: calc(50% - 20em);
    transition: opacity 0.5s;
    position: relative;
    flex-wrap: wrap;
    justify-content: space-around;
    background: black;
    width: 100%;
    user-select: none;
}

a {
    user-select: none;
}

.red-light {
    top: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    box-shadow: 0 0.5em 1.2em rgb(255, 72, 72), 0 0 6em rgb(255, 72, 72),0 0 30em rgb(255, 72, 72);
    z-index: 1;
    pointer-events: none;
}

.red-light-2 {
    top: 100%;
    position: absolute;
    width: 100%;
    height: 3em;
    box-shadow: 0 -0.7em 0.7em rgba(255, 72, 72, 0.2);
    pointer-events: none;
}

.door {
    pointer-events: none;
    position: absolute;
    left: 50%;
    top: 4em;
}

.floor-light {
    z-index: 1;
    width: 0;
    height: 0;
    pointer-events: none;
    mix-blend-mode: lighten;
}

a {
    text-decoration: none;
    position: relative;
}

nav a .sign {
    --f: 0.125;
    color: white;
    text-transform: uppercase;
    font-weight: bold;
    padding: 0.625em 1.25em;
    margin: 0.8em 0.3em 1.05em 0.3em;
    transition: box-shadow 0.3s ease-in-out;
    text-shadow: 0 0 0.625em rgba(255, 191, 0, 0.8);
    background-color: black;
    border-radius: 0.3125em;
    box-shadow: 0 calc(var(--f)*1em) calc(var(--f)*2em) rgb(255, 255, 255), 0 calc(var(--f)*1.5em) calc(var(--f)*6em) rgb(255, 203, 0);
    font-size: calc(min(16px, 10px + 0.375vw));
    mix-blend-mode: plus-lighter;
}

.door, .floor-light, .glow, .alpha, .silhouette, .hall-floor {
    margin-top: calc(var(--nav-bar-em) - 4.4em);
}

div {
    --border-door: #402a1a;
}

nav a:hover .sign {
    --f: 0.25;
    text-shadow: 0 0 1em rgba(255, 255, 100, 1);
}

nav .menu-btn {
    z-index: 2;
    padding: 2em;
    width: 100vw;
    display: block;
    cursor: pointer;
    box-sizing: border-box;
    height: 100%;
    position: absolute;
}

nav.menu-visible .menu-btn {
    height: calc(50% - 20em);
}

.menu-btn .sign {
    --f: 0.04;
    width: fit-content;
    letter-spacing: 0.2em;
    margin: 0 auto;
    font-size: calc(min(30px, 10px + 0.5vw));
}

nav a .sign.download {
    background-color: #28ee45;
    box-shadow: 0 calc(var(--f)*1em) calc(var(--f)*3em) rgba(255, 255, 255, 0.78), 0 calc(var(--f)*2.5em) calc(var(--f)*20em) rgb(68, 255, 0), inset 0 -0.5px 0px 2px #fff7da;
    position: relative;
    z-index: 2;
}

.star-lights {
    position: absolute;
    background: black;
    z-index: 2;
}

a:hover .download {
    background-color: #00ff30;
}
.ligth {
    mix-blend-mode: plus-lighter;
}

@media (max-width: 768px) {
    nav a {
        flex: 1 1 calc(50% - 10px);
        margin: 5px;
        text-align: center;
    }

    nav a .download {
        flex-basis: 100%;
    }
}

@media (max-width: 480px) {
    nav a {
        flex: 1 1 100%;
    }
}

.door-frame {
    pointer-events: all;
    left: -50%; width: 12em; height: 25em; border-style: solid; border-color: var(--border-door); border-image: none; margin: 2em; border-width: 0.5em 0.5em 0; position: relative;box-shadow: 0 -1px 0 #e54141;
    background: black;
}
@property --black {
    syntax: '<color>';
    initial-value: rgba(0,0,0,0);
    inherits: false;
}
.door-shadow {
  z-index: 2;
  box-shadow: inset 0 5px 5px 1px black;
  border-right: solid black;
  border-right-width: 0;
  box-sizing: border-box;
}
.lighten-left .door-shadow {
    box-shadow: inset -7px 1px 7px 4px #000a;
}

.lighten-right .door-shadow {
    box-shadow: inset 5px 1px 5px 3px #000a;
}
.door-leaf, .door-shadow, .door-leaf-shadow, .door-leaf-shadow {
  top: 0;
  width: 100%;
  height: 100%;
  position: absolute;
}
.door-leaf {
  background: var(--bg);
}
.door-leaf-shadow {
  z-index: 2;
  --black: rgba(0,0,0,0);
  background: linear-gradient(90deg, rgba(0,0,0,0) 0%, var(--black) 100%);
}
.door-porthole {
    background: #ffad313b;
    width: 6em; height: 6em;
    border-radius: 100%;
    margin: 3em auto auto; position: relative;
    box-shadow: 0 -1px 0 #e54141;
    transition: inherit;
}
.door-porthole-glass {
    top: 0.5em;
    left: 3.5em;
    height: 5em;
    width: 5em;
    border-radius: 100%;background: black;position: absolute;
    box-shadow: inset 0px 0px 1px 5px #000, inset 0px 5px 10px #e54140;
    transition: inherit;
}
.door-porthole-wrap {
    z-index: 2;
    position: relative;
}

.door-porthole-wrap, .door-leaf, .door-leaf-shadow {
    transition: transform 0.5s ease-in-out, --black 0.5s ease-in-out;
    transform-origin: 0 0;
}
a:hover .door-porthole-wrap, a:hover .door-leaf, a:hover .door-leaf-shadow {
    transform: perspective(175em) rotateY(35deg);
}
a:hover .door-porthole, a:hover .door-porthole-glass {
    transform: rotateZ(-60deg);
}
a:hover .door-leaf-shadow {
  --black: rgba(0,0,0,0.6);
}
.alpha, .glow {
    user-select: none;
    pointer-events: none;
    position: absolute;
    z-index: 1;
    left: 52.5vw;
    top: 1.7em;
    max-width: 31.3em;
}
.glow {
    mix-blend-mode: plus-lighter;
}
.porthole-reflexion {
    position: absolute;
    border-radius: 100%;
    transform-origin: 0.4em 2.5em;
    left: 50%;
    top: 0.5em;
    transition: opacity 0.4s ease-in-out;
}
a:hover .porthole-reflexion {
    opacity: 0;
}
.silhouette {
    z-index: 4;
    position: absolute;
    user-select: none;
    pointer-events: none;
    background-repeat: no-repeat;
    height: 20em;
}
.wall-sign {
    position: relative;
    left: -50%;
    font-size: 7em;
    text-align: center;
    color: #6d84ff82;
    line-height: 4.15em;
    height: 0;
    padding-left: 0.4em;
    letter-spacing: 0.05em;
}
.spot {
    width: 15em;
    height: 28em;
    background: radial-gradient(ellipse at 50% 50%, #4563ff7a 12%, #4563ff00 65%) 16.67% -0.62% / 99.8% 152% no-repeat no-repeat;
    background-blend-mode: multiply;
    mask-image: conic-gradient(from 180deg at 50% 105%, #00000000 40%, #000000ff 47%,#000000ee 48%,#000000ff 50%,#000000ee 53%, #000000ff 54%, #00000000 60%);
    position: relative;
    top: 4em;
    left: -50%;
    border-bottom: 1px solid #8b9bff;
}