:root {
    --dark-brown: #4a2e1f;
    --brown: #8b5a3c;
    --light-brown: #e8d8c4;
    --cream: #f7f1e8;
    --text: #ffffff;
    --bg_color: #f7f1e8;
    --border: #d7c3ac;
    --surface: #fffdfa;
    --red: #B10909;
    --blue: #130580;
    --green: #058015;
}

body {
    background-color: var(--bg_color);
    color: var(--dark-brown);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    line-height: 1.4;
}

button {
    background-color: var(--brown);
    color: var(--cream);
    border: 1px solid var(--dark-brown);
    border-radius: 6px;
    padding: .5rem 1rem;
    font: inherit;
    font-weight: 600;
}

button {
    transition: background-color 150ms ease, transform 160ms ease-out;
}

button:active {
    transform: scale(0.97);
}

@media (hover: hover) and (pointer: fine) {
    button:hover {
        background-color: var(--dark-brown);
    }
}

@media (prefers-reduced-motion: reduce) {
    button:active {
        transform: none;
    }
}

input {
    background-color: white;
    border: 1px solid var(--brown);
    border-radius: 6px;
    padding: .55rem .7rem;
    color: var(--dark-brown);
    font: inherit;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

input:focus {
    outline: none;
    border-color: var(--dark-brown);
    box-shadow: 0 0 0 3px rgba(139, 90, 60, 0.2);
}

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

a:hover {
    text-decoration: underline;
}

.flex-center {
    display: flex;
    justify-self: center;
}

.block-center {
    display: block;
    justify-self: center;
}

.text-center {
    text-align: center;
}

.text-large {
    font-size: 30px;
}

.text-medium {
    font-size: 20px;
}

.logo {
    width: 50px;
    height: 50px;
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    margin-top: 3rem;
}

.header-content h1 {
    margin: 0;
}

.big-name-text {
    font-size: 60px;
}

.hidden {
    visibility: hidden;
    opacity: 0;
}

.no-display {
    visibility: hidden;
    display: none;
}

.input-nodesign {
    border: none;
    field-sizing: content;
    padding: 10px;
}

.button-nodesign {
    border: none;
    border-radius: 0;
    padding: 0;
}