* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overflow: hidden;
}

.split {
  position: relative;
  width: 100vw;
  height: 100vh;
}

.half {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-decoration: none;
  transition: filter 0.15s ease;
}

.half:hover {
  filter: brightness(1.1);
}

/* The clip-path below cuts each .half down to a trapezoid, so its visual
   center isn't the box's center (50%) — it's offset toward the box's own
   side. These coordinates are that trapezoid's centroid, computed from the
   55%/45% clip-path split, so the text lands in the middle of the visible
   shape rather than the middle of the page. */
.half span {
  position: absolute;
  top: 50%;
  font-size: clamp(2.5rem, 8vw, 6rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}

.half--left {
  background: #1b1b2f;
  clip-path: polygon(0 0, 55% 0, 45% 100%, 0 100%);
}

.half--left span {
  left: 25%;
  color: #fff;
}

.half--right {
  background: #f5b700;
  clip-path: polygon(55% 0, 100% 0, 100% 100%, 45% 100%);
}

.half--right span {
  left: 75%;
  color: #3c1361;
}