:root {
      --ink: #020817;
      --navy: #03142d;
      --navy-2: #062b59;
      --blue: #006dff;
      --blue-2: #00a8ff;
      --cyan: #54e8ff;
      --ice: #eafaff;
      --muted: #9fc9e5;
      --green: #6fffc8;
      --yellow: #ffe36a;
      --danger: #ff6b91;
      --ease: cubic-bezier(.16, .88, .25, 1);
      --mouse-x: 75%;
      --mouse-y: 25%;
    }

    * {
      box-sizing: border-box;
    }

    html {
      overflow-x: hidden;
      background: var(--ink);
      scroll-behavior: smooth;
    }

    body {
      min-height: 100vh;
      margin: 0;
      overflow-x: hidden;
      color: var(--ice);
      background:
        radial-gradient(circle at var(--mouse-x) var(--mouse-y),
          rgba(41, 206, 255, .22), transparent 25rem),
        linear-gradient(145deg, #010713, #031a3a 58%, #062e5c);
      font-family: "Chakra Petch", sans-serif;
    }

    html.locked,
    body.locked {
      overflow: hidden !important;
    }

    button,
    input,
    select {
      font: inherit;
    }

    button {
      color: inherit;
    }

    ::selection {
      color: var(--navy);
      background: var(--cyan);
    }