html {
    --bg-color-one: #2f114d;
    --bg-color-two: #2d083c;
    --bg-color-three: #16225d;
    --bg-color-four: #320d41;
    --moon-color-one: #f7cc18;
    --moon-color-two: #f72771;
    --building-shadow: #16081b;
    --building-light: #77e3f6;
    --billboard-neon: #e94f75;
    --billboard: #1d050b;
    
}
body {
    background-color: var(--bg-color-four);
}
#container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100dvw;
    height: 100dvh;
    background: radial-gradient(ellipse at 0% 65%, var(--bg-color-one), var(--bg-color-one) 20%, transparent 44%),
    radial-gradient(ellipse at top, var(--bg-color-two), transparent),
    radial-gradient(circle at 50% bottom, var(--moon-color-one), transparent),
    radial-gradient(circle at 30% 30%, var(--moon-color-two), var(--bg-color-four) 20%, transparent 40%, transparent 100%);
}
#moon {
    position: absolute;
    bottom: calc(20% - 1em);
    left: calc(50% - 10em);
    width: 20em;
    height: 20em;
    clip-path: circle(50%);
    cursor: pointer;
}
#topmoon {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, var(--moon-color-one), var(--moon-color-two) 100%);
    clip-path: polygon(0 0, 100% 0, 100% 55%, 0 55%);
}
#midmoon {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, var(--moon-color-one), var(--moon-color-two) 100%);
    clip-path: polygon(0 56%, 100% 56%, 100% 61%, 0 61%);
}
#lowmoon {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, var(--moon-color-one), var(--moon-color-two) 100%);
    clip-path: polygon(0 63%, 100% 63%, 100% 68%, 0 68%);
}
#lowmoon2 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, var(--moon-color-one), var(--moon-color-two) 100%);
    clip-path: polygon(0 71%, 100% 71%, 100% 76%, 0 76%);
}
#lowmoon3 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, var(--moon-color-one), var(--moon-color-two) 100%);
    clip-path: polygon(0 80%, 100% 80%, 100% 85%, 0 85%);
}
#lowmoon4 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, var(--moon-color-one), var(--moon-color-two) 100%);
    clip-path: polygon(0 90%, 100% 90%, 100% 95%, 0 95%);
}
#neon-sign {
    position: absolute;
    bottom: 40%;
    left: 10%;
    font-family: "Ryga";
    text-shadow: 0 0 20px #f771f7;
    color: #ffffff;
    font-size: 4em;
    text-transform: uppercase;
    animation: 5s infinite glow-change;
    pointer-events: none;
    background-color: var(--billboard);
    box-shadow: inset 0 0 20px var(--billboard-neon), inset 0 0 10px var(--billboard-neon);
    outline: 2px solid white;
    outline-offset: -4px;
    padding: 0.2em;
    transform: perspective(1000px) rotateX(0) rotateY(54deg) rotatez(0) scalex(1.4) scaley(2.0);
    z-index: 2;
}
#sign-post {
    width: 1%;
    background-color: var(--billboard);
    position: absolute;
    left: 17%;
    bottom: 10%;
    height: 30%;
    clip-path: polygon(0 0, 100% 0, 100% 97%, 0 100%);
    z-index: 1;
}
#subtitle {
    font-size: 0.4em;
    text-align: right;
    font-family: "Unsteady Oversteer";
    animation: none;
    text-shadow: 0 0 5px #78b136;
    color: white;
}
@keyframes glow-change {
  0%, 35%, 37%, 42%, 46%, 64%, 100% {
    text-shadow: 0 0 20px #f771f7;
    color: #ffffffee;
  }
  10%, 40%, 45%, 67%, 75% {
    text-shadow: 0 0 2px #f771f7;
    color: #ffffff77;
  }
  4%, 11%, 49%, 54%, 95% {
    text-shadow: 0 0 6px #f771f7;
    color: #ffffffaa;
  }
  27%, 38%, 59%, 77% {
    text-shadow: 0 0 30px #f771f7;
    color: #ffffffff;
  }
}
#horizon {
    position: absolute;
    height: 20%;
    width: 100dvw;
    border-top: 1px solid var(--moon-color-two);
    top: 80%;
    left: 0;
    background-color: var(--bg-color-four);
    background: radial-gradient(ellipse at 0% 65%, var(--bg-color-one), var(--bg-color-one) 10%, transparent 34%),
    radial-gradient(circle at top, var(--bg-color-three), transparent),
    radial-gradient(ellipse at bottom, var(--moon-color-two), transparent);
    z-index: 0;
}
#horizon::before {
    position: absolute;
    content: "After";
    width: 100%;
    height: 100%;
    background-color: #0f0c1d;
    clip-path: polygon(50% 0, 80% 100%, 20% 100%);
}
#horizon::after {
    position: absolute;
    content: "After";
    width: 100%;
    height: 100%;
    background-color: var(--moon-color-two);
    clip-path: polygon(calc(50% - 1px) 0, calc(50% + 1px) 0, calc(80% + 4px) 100%, calc(20% - 4px) 100%);
    z-index: -1;
}
#index {
    font-family: "Unsteady Oversteer";
    color: "green";
    font-size: 2em;
    writing-mode: sideways-rl;
    text-transform: uppercase;
    background-color: var(--building-shadow);
    position: absolute;
    cursor: default;
    box-shadow: inset 3px 3px 6px var(--moon-color-two), inset 0 0 10px var(--bg-color-one);
    color: var(--building-light);
    bottom: 20%;
    left: 10%;
    z-index: 0;
    clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 100%);
}
a {
    color: var(--moon-color-one);
    text-decoration: none;
}
a:hover {
    color: var(--moon-color-two);
}