:root {
    --color-background: #181a1b;
    --color-foreground: #e8e6e3;
    --color-border: #5d6164;
    --color-background-highlight: #292b2c;
    --color-foreground-highlight: #f8f7f4;
    --color-border-highlight: #6e7275;
}

body {
    display: flex;
    font-family: sans-serif;
    justify-content: center;
}

body, button, input, select {
    background-color: var(--color-background);
    color: var(--color-foreground);
}

button, input, select {
    border: 1px solid var(--color-border);
}

button:active, input:active, select:active,
button:focus, input:focus, select:focus,
button:hover, input:hover, select:hover {
    background-color: var(--color-background-highlight);
    border-color: var(--color-border-highlight);
    color: var(--color-foreground-highlight);
}

button.primary {
    background-color: #ffcc00;
    border-color: #eebb00;
    color: var(--color-background);
}

.content {
    width: 75%;
}

.content h1 {
    text-align: center;
}

.inputs-wrapper {
    display: grid;
    grid-row-gap: 1em;
    grid-template-columns: 0.5fr 1fr;
}