@import url("https://fonts.googleapis.com/css2?family=Spartan:wght@700&display=swap");

/* 
### Theme 1

#### Backgrounds

- Very dark desaturated blue (main background): hsl(222, 26%, 31%)
- Very dark desaturated blue (toggle background, keypad background): hsl(223, 31%, 20%)
- Very dark desaturated blue (screen background): hsl(224, 36%, 15%)

#### Keys

- Desaturated dark blue (key background): hsl(225, 21%, 49%)
- Desaturated dark blue (key shadow): hsl(224, 28%, 35%)

- Red (key background, toggle): hsl(6, 63%, 50%)
- Dark red (key shadow): hsl(6, 70%, 34%)

- Light grayish orange (key background): hsl(30, 25%, 89%)
- Grayish orange (key shadow): hsl(28, 16%, 65%)

#### Text

- Very dark grayish blue: hsl(221, 14%, 31%)
- White: hsl(0, 0, 100%)

### Theme 2

#### Backgrounds

- Light gray (main background): hsl(0, 0%, 90%)
- Grayish red (toggle background, keypad background): hsl(0, 5%, 81%)
- Very light gray (screen background): hsl(0, 0%, 93%)

#### Keys

- Dark moderate cyan (key background): hsl(185, 42%, 37%)
- Very dark cyan (key shadow): hsl(185, 58%, 25%)

- Orange (key background, toggle): hsl(25, 98%, 40%)
- Dark orange (key shadow): hsl(25, 99%, 27%)

- Light grayish yellow (key background): hsl(45, 7%, 89%)
- Dark grayish orange (key shadow): hsl(35, 11%, 61%)

#### Text

- Very dark grayish yellow: hsl(60, 10%, 19%)
- White (text): 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%)
*/

html {
  font-size: 32px;
  font-family: "Spartan", sans-serif;
  font-weight: bold;
}

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

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

  --key-background-2-toggle: hsl(6, 63%, 50%);
  --key-shadow-2: hsl(6, 70%, 34%);

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

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

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

  --key-background-1: hsl(185, 42%, 37%);
  --key-shadow-1: hsl(185, 58%, 25%);

  --key-background-2-toggle: hsl(25, 98%, 40%);
  --key-shadow-2: hsl(25, 99%, 27%);

  --key-background-3: hsl(45, 7%, 89%);
  --key-shadow-3: hsl(35, 11%, 61%);

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

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

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

  --key-background-2-toggle: hsl(176, 100%, 44%);
  --key-shadow-2: hsl(177, 92%, 70%);

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

  --dark-text: hsl(52, 100%, 62%);
  --light-text: hsl(0, 0%, 100%);
  --equal-text: hsl(198, 20%, 13%);
}

body {
  color: var(--light-text);
  background-color: var(--main-background);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  user-select: none;
}

#screen {
  background-color: var(--screen-background);
  text-align: right;
}

#keyboard {
  background-color: var(--toggle-keypad-background);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

#screen,
#keyboard {
  padding: 0.75rem;
  border-radius: 0.4rem;
  margin: 0.5rem 0;
}

.key {
  width: 1rem;
  height: 1rem;
  text-align: center;
  padding: 0.5rem;
  margin: 0.2rem;
  border-radius: 0.2rem;
}

.key:hover,
#screen:hover {
  cursor: pointer;
}

.key:active,
#equal:active {
  box-shadow: none;
  transform: translateY(0.15rem);
}

.num,
.operator {
  color: var(--dark-text);
  background-color: var(--key-background-3);
  box-shadow: 0 0.15rem var(--key-shadow-3);
}

.func {
  background-color: var(--key-background-1);
  box-shadow: 0 0.15rem var(--key-shadow-1);
}

.text,
#backspace {
  font-size: 0.75rem;
}

#backspace .text {
  font-size: 0.5rem;
}

#equal {
  background-color: var(--key-background-2-toggle);
  box-shadow: 0 0.15rem var(--key-shadow-2);
  color: var(--equal-text);
}

.long {
  width: auto;
  height: auto;
  grid-column: span 2;
}

#header {
  display: flex;
  /* flex-direction: row; */
  justify-content: space-between;
}

.toggle-container {
  font-size: 0.4em;
}

.toggle-btn {
  margin-left: 1em;
  width: 6em;
  display: inline-block;
}

.theme-number {
  display: flex;
  justify-content: space-around;
  /* margin-bottom: .3px; */
}

.theme-choice {
  background-color: var(--toggle-keypad-background);
  border-radius: 0.4rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  /* width: 2em; */
  height: 2em;
  /* padding: .2em; */
}

.choice-ball {
  width: 1.2em;
  height: 1.2em;
  border-radius: 50%;
}

.choice-ball.active {
  background-color: #fff;
}