@import url("https://use.typekit.net/rjy0nds.css");

/* Center the box horizontally & vertically */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "montserrat", sans-serif;
  font-weight: 900;
  font-style: normal;
  background: linear-gradient(to right, black 50%, white 50%);
}

:root {
  --color-left-base:  white;
  --color-right-base: black;
  --color-bottom-base: gray;
  --color-left-hover: #3AF2A6;
  --color-right-hover: #FF934F;
}

/* Box layout */
.box {
  display: inline-flex;
  flex-direction: column;
}

/* Top row */
.top {
  display: flex;
}

.top-left,
.top-right {
  flex: 1;
  white-space: nowrap;
  font-size: 9vw;
}

.top-left {
  text-align: left;
  padding-left: 0.055em;
  color: var(--color-left-base);
}

.top-right {
  text-align: right;
  color: var(--color-right-base);
}

.top a {
  text-decoration: none;
  font: inherit;
  color: inherit;
}

.bottom {
  white-space: nowrap;
  text-align: center;
  font-size: 18vw;
  line-height: 0.85;
  pointer-events: none;
  color: var(--color-bottom-base);
}

.bottom .small {
  font-size: 0.825em;
}

/* Smooth transitions for color */
.top a,
.bottom {
  transition: color 0.5s ease;
}

/* Hover left: left text + bottom both go left-hover color */
.top-left:hover a {
  color: var(--color-left-hover);
}
.box-inner:has(.top-left:hover) .bottom {
  color: var(--color-left-hover);
}

/* Hover right: right text + bottom both go right-hover color */
.top-right:hover a {
  color: var(--color-right-hover);
}
.box-inner:has(.top-right:hover) .bottom {
  color: var(--color-right-hover);
}

.footer-text {
  position: fixed;
  bottom: 1vh;          /* small offset from bottom */
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.08em;
  font-family: "roboto-mono", monospace;
  font-weight: 400;
  font-style: normal;
  background: linear-gradient(to right, white 50%, black 50%);
  -webkit-background-clip: text;
  color: transparent;
  pointer-events: none;
  user-select: none;
}


/* Touch devices OR narrow screens */
@media (hover: none) and (pointer: coarse),
       (max-width: 768px) {
  .top a {
    text-decoration: underline;
    text-underline-offset: 0.1em;
    text-decoration-thickness: 2px;
  }
}