* {
    font-family: "League Spartan", sans-serif;
}

.theme1 {
    --main-background: hsl(222, 26%, 31%);
    --keypad-bg: hsl(223, 31%, 20%);
    --screen-bg: hsl(224, 36%, 15%);

    --key-special-bg: hsl(225, 21%, 49%);
    --key-special-shadow: hsl(224, 28%, 35%);

    --key-bg: hsl(30, 25%, 89%);
    --key-shadow: hsl(28, 16%, 65%);

    --compute-bg: hsl(6, 63%, 50%);
    --compute-shadow: hsl(6, 70%, 34%);

    --text-dark: hsl(221, 14%, 31%);
    --text-white: hsl(0, 0%, 100%);
}

.theme2 {
    --main-background: hsl(0, 0%, 90%);
    --keypad-bg: hsl(0, 5%, 81%);
    --screen-bg: hsl(0, 0%, 93%);

    --key-special-bg: hsl(185, 42%, 37%);
    --key-special-shadow: hsl(185, 58%, 25%);

    --key-bg: hsl(30, 25%, 89%);
    --key-shadow: hsl(28, 16%, 65%);

    --compute-bg: hsl(25, 98%, 40%);
    --compute-shadow: hsl(25, 99%, 27%);

    --text-dark: hsl(60, 10%, 19%);
    --text-white: hsl(0, 0%, 100%);
}

/*
### Theme 3

#### Backgrounds

- Very dark violet (main background): hsl(268, 75%, 9%)
- Very dark violet (toggle background, keypad background, screen background): hsl(268, 71%, 12%)

#### Keys

- Dark violet (key background): hsl(281, 89%, 26%)
- Vivid magenta (key shadow): hsl(285, 91%, 52%)

- Pure cyan (key background, toggle): hsl(176, 100%, 44%)
- Soft cyan (key shadow): hsl(177, 92%, 70%)

- Very dark violet (key background): hsl(268, 47%, 21%)
- Dark magenta (key shadow): hsl(290, 70%, 36%)

#### Text

- Light yellow: hsl(52, 100%, 62%)
- Very dark blue: hsl(198, 20%, 13%)
- White (text): hsl(0, 0%, 100%)

*/

.theme3 {
    --main-background: hsl(268, 75%, 9%);
    --keypad-bg: hsl(268, 71%, 12%);
    --screen-bg: hsl(268, 71%, 12%);

    --key-special-bg: hsl(281, 89%, 26%);
    --key-special-shadow: hsl(285, 91%, 52%);

    --key-bg: hsl(268, 47%, 21%);
    --key-shadow: hsl(290, 70%, 36%);

    --compute-bg: hsl(176, 100%, 44%);
    --compute-shadow: hsl(177, 92%, 70%);
    --text-dark: hsl(52, 100%, 62%);
    --text-white: hsl(0, 0%, 100%);

    --text-spcial: hsl(198, 20%, 13%);
}

body {
    min-height: 100vh;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: var(--main-background);
    font-size: 2rem;
    --padding: 1.2rem;
    --small-padding: calc(var(--padding) / 2);
    --extra-small-padding: calc(var(--padding) / 4);

    color: var(--text-white);
}

main {
    padding: var(--padding);
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header h1 {
    font-size: 0.9em;
}

.themes {
    display: flex;
    align-items: flex-end;
}

.themes p {
    margin: 0;
    padding-right: calc(var(--padding) * 1.5);
    text-transform: uppercase;
    font-size: 0.3em;
    letter-spacing: 0.15em;
    padding-bottom: 0.6em;
}

.themes ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    justify-content: space-between;
    font-size: 0.4em;
    padding-left: 0.7em;
    padding-right: 0.7em;
    padding-bottom: 0.5em;
}

.themes .switcher {
    width: 2em;
    background: var(--keypad-bg);
    height: 0.7em;
    border-radius: 0.5em;
    display: flex;
    align-items: center;
}

.themes .switcher div {
    height: 0.5em;
    width: 0.5em;
    border-radius: 50%;

    background-color: var(--compute-bg);
}

.theme1 .themes .switcher div {
    transform: translateX(0.15em);
}

.theme2 .themes .switcher div {
    transform: translateX(0.7em);
}

.theme3 .themes .switcher div {
    transform: translateX(1.35em);
}

.result,
.buttons {
    padding: var(--padding);
    border-radius: var(--small-padding);
}

.result {
    background-color: var(--screen-bg);
    margin-top: var(--padding);
}

.result h1 {
    text-align: right;
    font-size: 1.2em;
    width: 100%;

    margin: 0.2em 0;
}

.buttons {
    background-color: var(--keypad-bg);
    margin-top: var(--padding);
    padding: var(--small-padding);
}

table {
    width: 100%;
    border-spacing: var(--small-padding);
}

tr td:first-child {
    margin-left: calc(var(--small-padding) * -1);
}

button {
    width: 100%;
    height: 100%;
    font-size: 2rem;
    color: var(--text-dark);
    background-color: var(--key-bg);
    border: none;
    border-radius: var(--extra-small-padding);
    box-shadow: var(--key-shadow) 0px 3px;
    height: 4rem;
}

td {
    width: 25%;
    margin-right: var(--small-padding);
}

tr {
    position: relative;
    height: 2em;
}

.del,
.reset {
    font-size: 0.7em;
    color: var(--text-white);
    background: var(--key-special-bg);
    box-shadow: var(--key-special-shadow) 0px 3px;
}

.compute {
    font-size: 0.7em;
    color: var(--text-white);
    background: var(--compute-bg);
    box-shadow: var(--compute-shadow) 0px 3px;
}

.switcher:hover {
    cursor: pointer;
}

.switcher:hover div,
button:hover {
    filter: brightness(1.2);
    cursor: pointer;
}

.theme2 header,
.theme2 .result,
.theme2 .attribution {
    color: var(--text-dark);
}

.theme3 header,
.theme3 .result,
.theme3 .attribution {
    color: var(--text-dark);
}

.theme3 .compute {
    color: var(--text-spcial);
}

* {
    transition: color 0.2s ease-in-out;
    transition: transform 0.2s ease-in-out;
}

main {
    max-width: 18em;
    margin: auto;
}

@media screen and (min-width: 48rem) {
    body {
        display: flex;
        flex-direction: column;
    }
    main {
        width: 100%;
    }
    body {
        --padding: 2rem;
    }
}