.decision-card {
      margin: auto;
      box-sizing: border-box;


      max-width: 600px;
      background: var(--card-bg);
      width: 100%;
      border-radius: 16px;
      border: 1px solid var(--card-border);
      padding: 24px;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
      font-family: 'karla';
    }

    .decision-options :hover {
      border-radius: 16px;
      margin: 12px;
      box-shadow: 0 10px 25px var(--button-bg);

    }

    .decision-options {
      display: grid;
      gap: 12px;
      margin-top: 16px;
    }

    .decision-options button {
      padding: 12px;
      border: none;
      border-radius: 10px;
      cursor: pointer;
      font-size: 15px;
      background: var(--button-bg);
      transition: 0.2s;
      color: var(--button-text-color);
      border-radius: 16px;
      border: 1px solid var(--card-border);
    }

    .decision-options button:hover {
      background: var(--button-hover-color);
      border-radius: 16px;
      border: 1px solid var(--card-border);

    }

    .decision-result {
      background: var();
      border-radius: 16px;
      border: 1px solid var(--card-border);
      padding: 16px;
      border-radius: 12px;
      margin-top: 16px;
    }

    .decision-restart {
      margin-top: 20px;
      padding: 16px;
      border-radius: 12px;

      background: var(--background-color-highlight);
      color: var(--text-color);
    }

    .decision-link {
      display: inline-block;
      margin-top: 14px;
      padding: 12px;
      background: var(--button-bg);
      border-radius: 16px;
      border: 1px solid var(--card-border);
      color: var(--button-text-color);
      border-radius: 10px;
      text-decoration: none;
      font-weight: 500;
    }

    .decision-link:hover {
      opacity: 0.9;
    }

    .decision-card h2 {
      text-align: center;
    }