body {
  height: 50vh;
  margin: 0;
  background: #f2f2f2;
  overflow-x: hidden;
}

.background {
    width: 50%;
    height: 50%;
}

.menu {
  position: fixed;
  z-index: 6;
  display: flex;
  justify-content: center;
  opacity: 0.9;
  font-style: italic;
}

.view {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 300px;
  background-color: #2f2b2a;
  opacity: 0.9;
  color: white;
  font-style: italic;
  font-family: VictorMono Nerd Font;
}

::-webkit-scrollbar {
  width: 5px;              /* scrollbar width */
  height: 12px;             /* horizontal scrollbar height (if any) */
}

::-webkit-scrollbar-track {
  background: #2f2b2a;      /* track (background) color */
}

::-webkit-scrollbar-thumb {
  background: rgba(63, 73, 105, 1); /* thumb color */
  border-radius: 6px;        /* round edges */
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #ffd200, #ff8800); /* on hover */
}

/* Give every layer a clear stacking order */
.base,
.night,
.ascii,
.sun,
.moon,
.top {
  position: fixed; /* ✅ everything fixed to viewport */
  top: 0;
  left: 0;
  width: 50%;
  height: 50%;
  background-size: cover;
  background-position: center;
}

/* z-index determines layering order */
.base { z-index: 0; }
.ascii { z-index: 2; mix-blend-mode: multiply; }
.sun { 
  z-index: 3;
  width: 360px;
  height: 360px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transform: translate(-50%, -50%);
  pointer-events: none;
  mix-blend-mode: soft-light;
}

.moon { 
  z-index: 4;
  width: 360px;
  height: 360px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transform: translate(-50%, -50%);
  mix-blend-mode: soft-light;
}
.top { z-index: 5; background-size: cover; }

.night { z-index: 7; mix-blend-mode: multiply; opacity: 0; }


/*
h1 {
  position: relative;
  font-family: "Poppins", sans-serif;
  font-size: 7rem;
  letter-spacing: -0.3rem;
  z-index: 1;
}
h1 span {
  margin: 0 auto;
  margin-left: 0.3em;
  display: inline-block;
  position: relative;
}
h1 span:before {
  content: "";
  position: absolute;
  top: -0.2em;
  left: -0.2em;
  width: 100%;
  height: 100%;
  padding: 0.2em;
  z-index: -1;
}
h1 span:nth-child(1) {
  font-family: "Proclamate Light", sans-serif;
  text-transform: lowercase;
  color: #ffc863;
}
h1 span:nth-child(1)::before {
  background: #332929;
  clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 83%);
}
h1 span:nth-child(2) {
  font-style: italic;
  font-family: "Playfair Display", serif;
  color: #023020;
  text-shadow: 0.02em 0.02em 0 #a52a2a, 0.03em 0.03em 0 #a52a2a;
}
h1 span:nth-child(2)::before {
  background: #f5deb3;
}
h1 span:nth-child(3) {
  font-family: "Satisfy", cursive;
  font-weight: 400;
  font-style: normal;
  color: #28282B;
}
h1 span:nth-child(3)::before {
  background: #a52a2a;
  clip-path: polygon(20% 0%, 99% 0, 100% 100%, 0% 100%);
}
h1 span:nth-child(4) {
  font-family: "Love Ya Like A Sister", cursive;
  color: #22232e;
}
h1 span:nth-child(4)::before {
  background-image: radial-gradient(rgba(0, 194, 203, 0.7) 3px, transparent 3px);
  background-color: #e0ffff;
  background-size: 10px 10px;
  clip-path: polygon(20% 0%, 99% 0, 100% 100%, 0% 100%);
}
h1 span:nth-child(5) {
  font-family: "Poppins", serif;
  color: #00c2cb;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 0.07em rgba(237, 10, 139, 0.7);
}
h1 span:nth-child(5)::before {
  background: rgba(0, 194, 203, 0.7);
  clip-path: polygon(0 24%, 100% 20%, 100% 86%, 0 82%);
}
*/