body {
  --color-bg: #f9f7f6;
  --color-primary: #127aca; --color-primary-hover: #0f65b5;
  --color-gray2: hsl(0, 0%, 75%); --color-gray: hsl(0, 0%, 92%); --color-white: hsl(0, 0%, 100%);
  --color-text: hsl(0, 0%, 16%); --color-text-bold: hsl(0, 0%, 20%);
  --max-width: 1000px;
}

body {
    font-family: Arial, sans-serif;
    background-color: var(--color-bg); color: var(--color-text);
    margin: 0; padding: 0;
    min-height: 100vh;
}

main {
    min-height: 100vh;
    flex-direction: column;
    align-content: center;
}

.center {
    width: 80%; max-width: var(--max-width);
    margin: 0 auto;
}

button {
    background-color: var(--color-gray); color: var(--color-text-bold);
    padding: 8px 16px;
    border: 1px solid var(--color-gray2); border-radius: 5px;
    cursor: pointer;
    transition: all 0.12s ease;
}
button:hover { background-color: var(--color-white); }

.primary-button { background-color: var(--color-primary); color: var(--color-white); border: none; padding: 10px 18px;}
.primary-button:hover { background-color: var(--color-primary-hover); }

h1 { color: var(--color-text); margin-top: 20px; margin-bottom: 10px; }
.title { font-size: 2.6rem; }