:root {
  --accent: #E3F400;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Exo', sans-serif;
}

/* =========================
   Background
   ========================= */

.bg-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center bottom;
  opacity: 0;
  transition: opacity 2s ease-in-out;
}

.bg-slide.active {
  opacity: 1;
}

.top-accent {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(
    to right,
    rgba(227, 244, 0, 0.6),
    rgba(227, 244, 0, 0.25),
    transparent
  );
  z-index: 50;
  pointer-events: none;
}

.bottom-accent {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(
    to left,
    rgba(227, 244, 0, 0.6),
    rgba(227, 244, 0, 0.25),
    transparent
  );
  z-index: 50;
  pointer-events: none;
}

.corner-spot {
  position: fixed;
  top: 0;
  width: 35vw;
  height: 30vh;
  pointer-events: none;
  filter: blur(22px);
  z-index: 20;
}

.corner-spot.left {
  left: 0;
  background: linear-gradient(
    to bottom right,
    rgba(227, 244, 0, 0.18),
    rgba(227, 244, 0, 0.08),
    rgba(0, 0, 0, 0)
  );
}

.corner-spot.right {
  right: 0;
  background: linear-gradient(
    to bottom left,
    rgba(227, 244, 0, 0.18),
    rgba(227, 244, 0, 0.08),
    rgba(0, 0, 0, 0)
  );
}