/* Retro Theme */
:root {
    --bg-color: #c0c0c0;
    --text-color: #000000;
    --accent-color: #000080;
    --border-style: 2px outset #ffffff;
    --font-main: "Tahoma", sans-serif;
    --font-heading: "Tahoma", sans-serif;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-main);
}

h1 {
    background: var(--accent-color);
    color: white;
    padding: 0.2rem 0.5rem;
    display: inline-block;
}

.card {
    background: #c0c0c0;
    border: 2px outset #ffffff;
    padding: 1rem;
    box-shadow: 1px 1px 0px #000;
}

.tag {
    border: 1px solid #808080;
    background: #fff;
    padding: 2px 5px;
    font-size: 0.8rem;
}

img {
    border: 2px inset #ffffff;
}

/* UI Kit */
input,
select {
    box-shadow: inset 2px 2px 0 #000, inset -2px -2px 0 #fff;
    background: #fff;
    border: none;
    padding: 4px;
    width: 100%;
}

.btn {
    background: #c0c0c0;
    box-shadow: inset 2px 2px 0 #fff, inset -2px -2px 0 #000;
    border: none;
    padding: 4px 12px;
    cursor: pointer;
    font-family: inherit;
}

.btn:active {
    box-shadow: inset 2px 2px 0 #000, inset -2px -2px 0 #fff;
    padding: 5px 11px 3px 13px;
    /* Shift content */
}

.btn-primary {
    background: var(--accent-color);
    color: white;
}

.btn-primary:active {
    background: var(--accent-color);
}

.btn:disabled {
    color: #808080;
    text-shadow: 1px 1px 0 #fff;
    cursor: not-allowed;
}