/* utilities.css — small global rules + cursor behavior */

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  letter-spacing: var(--letter-spacing);
}

html {
  overflow: hidden;
  background: var(--c-bg);
}

body {
  height: 100%;
  overflow: hidden;
  
  color: var(--c-text);

  display: flex;
  min-width: 1000px;
  justify-content: center;
  align-items: center;

  isolation: isolate;


}

body::before {
  content: "";
  position: fixed;      /* covers viewport; doesn't scroll away */
  inset: 0;
  z-index: -1;

  background-image: url("../assets/background.png");
  background-repeat: no-repeat;
  background-position: center center; /* content stays in the “middle” of the image */
  background-size: cover;             /* fill screen without repeating */

  filter: blur(10px);
  transform: scale(1.08); /* prevents blurred edges from showing */
}

/* Optional: make foreground readable */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: rgba(0,0,0,0.25); /* subtle dark overlay */
}

/* Global link baseline (matches your current) */
a {
  color: inherit;
  text-decoration: none;
  text-shadow: 0 0 15px var(--c-accent);
  font-weight: bold;
}

a::selection {
  text-shadow: none;
}

/* Keep cursor consistent on “clickable” things */
a, button, [role="button"], input[type="submit"], input[type="button"] {
  cursor: var(--cursor-hand) !important;
}

/* cover common clickables */
label, summary, select, option {
  cursor: inherit !important;
}

.screen_container::selection {
  background-color: var(--c-accent);
  color: var(--c-ink);
  box-shadow: 0 0 10px var(--c-accent);
}