* {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
  font-family: "League Spartan", sans-serif;
  font-size: 32px;
  background-color: var(--background-color);
}
main {
  height: 90vh;
  --transition-delay: 500ms;
  display: flex;
  justify-content: center;
  align-items: center;
}

body.theme-1 {
  --numkey-color: hsl(30, 25%, 89%);
  --numkey-hover-color: white;
  --numkey-text-color: hsl(221, 14%, 31%);
  --numkey-shadow-color: hsl(28, 16%, 65%);

  --keypad-background-color: hsl(223, 31%, 20%);
  --background-color: hsl(222, 26%, 31%);

  --text-color: white;

  --display-color: hsl(224, 36%, 15%);
  --display-text-color: white;

  --equals-key-color: hsl(6, 63%, 50%);
  --equals-key-hover-color: hsl(5, 67%, 59%);
  --equals-key-text-color: white;
  --equals-key-shadow-color: hsl(6, 70%, 34%);

  --del-key-color: hsl(225, 21%, 49%);
  --del-key-hover-color: hsl(225, 60%, 76%);
  --del-key-text-color: white;
  --del-key-shadow-color: hsl(224, 28%, 35%);
}
body.theme-2 {
  --numkey-color: hsl(45, 7%, 89%);
  --numkey-hover-color: hsl(30, 100%, 100%);
  --numkey-text-color: hsl(60, 10%, 19%);
  --numkey-shadow-color: hsl(35, 11%, 61%);

  --keypad-background-color: hsl(0, 5%, 81%);
  --background-color: hsl(0, 0%, 90%);

  --text-color: var(--numkey-text-color);

  --display-color: hsl(0, 0%, 93%);
  --display-text-color: var(--numkey-text-color);

  --equals-key-color: hsl(25, 98%, 40%);
  --equals-key-hover-color: hsl(25, 72%, 59%);
  --equals-key-text-color: white;
  --equals-key-shadow-color: hsl(25, 99%, 27%);

  --del-key-color: hsl(185, 42%, 37%);
  --del-key-hover-color: hsl(185, 51%, 58%);
  --del-key-text-color: white;
  --del-key-shadow-color: hsl(185, 58%, 25%);
}
body.theme-3 {
  --numkey-color: hsl(268, 47%, 21%);
  --numkey-hover-color: hsl(268, 48%, 45%);
  --numkey-text-color: hsl(52, 100%, 62%);
  --numkey-shadow-color: hsl(290, 70%, 36%);

  --keypad-background-color: hsl(268, 71%, 12%);
  --background-color: hsl(268, 75%, 9%);

  --text-color: var(--numkey-text-color);

  --display-color: var(--keypad-background-color);
  --display-text-color: var(--numkey-text-color);

  --equals-key-color: hsl(176, 100%, 44%);
  --equals-key-hover-color: hsl(176, 64%, 66%);
  --equals-key-text-color: hsl(198, 20%, 13%);
  --equals-key-shadow-color: hsl(177, 92%, 70%);

  --del-key-color: hsl(281, 89%, 26%);
  --del-key-hover-color: hsl(281, 51%, 53%);
  --del-key-text-color: white;
  --del-key-shadow-color: hsl(285, 91%, 52%);
}
#head {
  font-weight: 700;
}
#theme-container {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  font-size: 12px;
}
#header {
  margin-bottom: 20px;
  margin-top: 20px;
  align-items: flex-end;
  color: var(--text-color);
  transition: ease-out var(--transition-delay);
  justify-content: space-between;
  display: flex;
}
#keypad-container {
  padding: 20px;

  display: grid;
  grid-template-columns: 21% 21% 21% 21%;
  grid-template-rows: 50px 50px 50px 50px 50px;
  column-gap: 15px;
  row-gap: 20px;
  justify-content: center;
  background-color: var(--keypad-background-color);
  border-radius: 5px;
  transition: ease-out var(--transition-delay);
}
#display {
  background-color: var(--display-color);
  margin-bottom: 20px;
  padding: 20px;
  width: 100%;
  overflow: hidden;
  font-weight: 700;
  color: var(--display-text-color);
  text-align: right;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: flex-end;

  border-radius: 5px;
  transition: ease-out var(--transition-delay);
}

#calculator {
  min-width: 330px;
  width: 32vw;
}
#calculator > div {
}
button {
  transition: ease-out var(--transition-delay);
  border: none;
  background-color: var(--numkey-color);
  color: var(--numkey-text-color);
  box-shadow: inset 0px -5px 0px 0px var(--numkey-shadow-color);
  font-size: 0.8em;
  font-weight: 800;
  border-radius: 5px;
  cursor: pointer;
}
button:hover {
  transition: ease-in var(--transition-delay);
  background-color: var(--numkey-hover-color);
}
#reset:hover,
#del:hover {
  background-color: var(--del-key-hover-color);
  transition: ease-in var(--transition-delay);
}
#reset,
#del {
  font-size: 0.5em;
  background-color: var(--del-key-color);
  color: var(--del-key-text-color);
  box-shadow: inset 0px -5px 0px 0px var(--del-key-shadow-color);
  transition: ease-out var(--transition-delay);
}
#equal:hover {
  transition: ease-in var(--transition-delay);
  background-color: var(--equals-key-hover-color);
}
#equal {
  font-size: 0.5em;

  box-shadow: inset 0px -5px 0px 0px var(--equals-key-shadow-color);

  background-color: var(--equals-key-color);
  color: var(--equals-key-text-color);
  transition: ease-out var(--transition-delay);
}
.toggle-container {
  width: 75px;
  position: relative;
  height: 25px;
  background-color: var(--keypad-background-color);
  border-radius: 20px;
  cursor: pointer;
}
.toggle-button {
  transition: ease-out var(--transition-delay);

  position: absolute;
  margin: 4px;
  width: 17px;
  height: 17px;
  border-radius: 17px;
  background-color: var(--equals-key-color);
}
.attribution {
  color: var(--text-color);
  font-size: 15px;
  text-align: center;
}
.attribution a:hover {
  color: var(--equals-key-hover-color);
  transition: ease-in var(--transition-delay);
}
.attribution a {
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  color: var(--equals-key-color);
}