input {
    display: block;
    width: 10em;
    padding: 10px;

    border: 0.1em solid var(--menu-font-color-muted);
    border-radius: var(--border-radius);

    transition: border 200ms, color 200ms;

    outline-style: none;

    background-color: var(--menu-primary-color);
    color: var(--menu-font-color-muted);
    
    font-family: 'medieval-letter';
    font-size: 22pt;
}

input::placeholder {
    color: var(--menu-font-color-muted);
    opacity: 0.6;
}

input:focus {
    border-color: var(--menu-font-color);
    color: var(--menu-font-color);
}

button {
    padding: 10px;
    width: 5em;

    border: 0.1em solid var(--menu-font-color-muted);
    border-radius: var(--border-radius);

    transition: border 200ms, color 200ms;

    outline-style: none;

    background-color: var(--menu-primary-color);
    color: var(--menu-font-color-muted);
    
    font-family: 'medieval-letter';
    font-size: 22pt;
}

button:active, button:focus {
    border-color: var(--menu-font-color);
    color: var(--menu-font-color);
}