:root {
      --bg-color: #0d0d0d;
      --bg-color-light: #222222;
      --grey: #565656;
      --primary: #66ffcc;
      --accent1: #c792ea;
      --accent2: #ff77aa;
      --accent3: #e33074;
      --accent3-dark: #861E45;
      --distinct-text: #ffffff;
      --text: #dcdcdc;
    }

    body {

      margin: 0;
      padding: 0;
      font-family: 'Inter', 'Segoe UI', sans-serif;
      font-optical-sizing: auto;
      font-weight: 400;
      background: var(--bg-color);
      color: var(--distinct-text);
      display: flex;
      align-items: center;
      /* justify-content: center; */
      flex-direction: column;
      min-height: calc(100vh - 4rem);
      padding: 2rem;
    }

        h1.page-title {
            text-align: center;
            margin-bottom: 1.5rem;
            color: var(--primary);
        }

        a {
          color: var(--accent1);
          text-decoration: none;
        }

        .button {
          width: 100%;
          margin-top: 1rem;
          padding: 0.75rem;
          background-color: var(--accent2);
          color: var(--distinct-text);
          border: none;
          border-radius: 0.5rem;
          font-size: 1.2rem;
          text-align: center;
          cursor: pointer;
          transition: background 0.3s ease;
        }

    .footer {
      margin-top: 2rem;
      text-align: center;
      font-size: 0.8rem;
      color: #888;
    }