/* Global Variables */
/* Colors */
html[data-theme="1"] {
  --header-text-color: hsl(0, 0%, 100%);
  --screen-bg-color: hsl(222, 26%, 31%);
  --main-bg-color: hsl(223, 31%, 20%);
  --second-bg-color: hsl(224, 36%, 15%);
  --main-key-text-color: hsl(221, 14%, 31%);
  --second-key-text-color: hsl(0, 0%, 100%);
  --third-key-text-color: hsl(0, 0%, 100%);
  --main-key-bg-color: hsl(30, 25%, 89%);
  --main-key-shadow-color: hsl(28, 16%, 65%);
  --main-key-hover-color: hsl(0, 0%, 100%);
  --second-key-bg-color: hsl(225, 21%, 49%);
  --second-key-shadow-color: hsl(224, 28%, 35%);
  --second-key-hover-color: hsl(226, 51%, 77%);
  --third-key-bg-color: hsl(6, 63%, 50%);
  --third-key-shadow-color: hsl(6, 70%, 34%);
  --third-key-hover-color: hsl(7, 82%, 65%);
}

html[data-theme="2"] {
  --header-text-color: hsl(60, 10%, 19%);
  --screen-bg-color: hsl(0, 0%, 90%);
  --main-bg-color: hsl(0, 5%, 81%);
  --second-bg-color: hsl(0, 0%, 93%);
  --main-key-text-color: hsl(60, 10%, 19%);
  --second-key-text-color: hsl(0, 0%, 100%);
  --third-key-text-color: hsl(0, 0%, 100%);
  --main-key-bg-color: hsl(45, 7%, 89%);
  --main-key-shadow-color: hsl(35, 11%, 61%);
  --main-key-hover-color: hsl(0, 0%, 100%);
  --second-key-bg-color: hsl(185, 42%, 37%);
  --second-key-shadow-color: hsl(185, 58%, 25%);
  --second-key-hover-color: hsl(186, 37%, 59%);
  --third-key-bg-color: hsl(25, 98%, 40%);
  --third-key-shadow-color: hsl(25, 99%, 27%);
  --third-key-hover-color: hsl(27, 91%, 59%);
}

html[data-theme="3"] {
  --header-text-color: hsl(52, 100%, 62%);
  --screen-bg-color: hsl(268, 75%, 9%);
  --main-bg-color: hsl(268, 71%, 12%);
  --second-bg-color: hsl(268, 71%, 12%);
  --main-key-text-color: hsl(52, 100%, 62%);
  --second-key-text-color: hsl(0, 0%, 100%);
  --third-key-text-color: hsl(198, 20%, 13%);
  --main-key-bg-color: hsl(268, 47%, 21%);
  --main-key-shadow-color: hsl(290, 70%, 36%);
  --main-key-hover-color: hsl(266, 53%, 44%);
  --second-key-bg-color: hsl(281, 89%, 26%);
  --second-key-shadow-color: hsl(285, 91%, 52%);
  --second-key-hover-color: hsl(277, 55%, 45%);
  --third-key-bg-color: hsl(176, 100%, 44%);
  --third-key-shadow-color: hsl(177, 92%, 70%);
  --third-key-hover-color: hsl(176, 100%, 82%);
}

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0;
  padding: 0;
}
*:focus {
  outline: none;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  background-color: transparent;
}

img {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  border-style: none;
}

input,
select,
textarea,
button,
optgroup {
  font-size: inherit;
  font-family: inherit;
  color: inherit;
}

button {
  border: none;
  cursor: pointer;
  -webkit-transition: background-color transform 0.3s;
  transition: background-color transform 0.3s;
}

body {
  background-color: var(--screen-bg-color);
  font-size: 32px;
  font-family: "League Spartan", sans-serif;
}

html {
  scroll-behavior: smooth;
}

::-webkit-scrollbar {
  width: 15px;
}

::-webkit-scrollbar-track {
  background-color: var(--main-text-color);
}

::-webkit-scrollbar-thumb {
  cursor: pointer;
  border-radius: 6px;
}
::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb:hover {
  background-color: var(--main-bg-color);
}

main {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  padding: 20px;
  width: 450px;
}
@media (max-width: 768px) {
  main {
    padding: 5px;
    width: 350px;
  }
}
@media (max-width: 375px) {
  main {
    width: 100%;
    min-width: -webkit-fit-content;
    min-width: -moz-fit-content;
    min-width: fit-content;
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: translate(0, -50%);
            transform: translate(0, -50%);
  }
}

header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: var(--header-text-color);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
header h1 {
  font-size: 24px;
}
header > div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 20px;
  text-transform: uppercase;
  font-size: 12px;
}
header > div > span {
  letter-spacing: 0.5px;
  font-size: 10px;
}
header > div .theme-control {
  background-color: var(--main-bg-color);
  height: -webkit-min-content;
  height: -moz-min-content;
  height: min-content;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 5px;
  padding: 5px;
  border-radius: 20px;
}
header > div .theme-control button {
  height: 11px;
  width: 11px;
  border-radius: 50%;
  position: relative;
  counter-increment: theme;
  background-color: var(--third-key-bg-color);
  cursor: default;
}
header > div .theme-control button:hover {
  background-color: var(--third-key-hover-color);
}
header > div .theme-control button::before {
  content: counter(theme);
  position: absolute;
  left: 50%;
  top: -7px;
  -webkit-transform: translate(-50%, -100%);
          transform: translate(-50%, -100%);
  visibility: visible;
  cursor: pointer;
}
header > div .theme-control button:not(.active) {
  visibility: hidden;
}

section.keypad {
  height: 100px;
  padding: 0 25px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  background-color: var(--second-bg-color);
  color: var(--header-text-color);
  border-radius: 6px;
  margin: 25px 0 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 30px;
}
@media (max-width: 768px) {
  section.keypad {
    font-size: 27px;
  }
}
@media (max-width: 375px) {
  section.keypad {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    height: 60px;
    font-size: 7vmin;
  }
}

section.keys {
  background-color: var(--main-bg-color);
  border-radius: 6px;
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 20px;
}
section.keys .natural-numbers {
  grid-area: 1/1/4/4;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  direction: rtl;
}
section.keys button {
  color: var(--main-key-text-color);
  background-color: var(--main-key-bg-color);
  -webkit-box-shadow: inset 0 -4px 0px -1px var(--main-key-shadow-color);
          box-shadow: inset 0 -4px 0px -1px var(--main-key-shadow-color);
  border-radius: 6px;
  padding: 10px;
  position: relative;
  overflow: hidden;
}
section.keys button:hover {
  background-color: var(--main-key-hover-color);
}
@media (max-width: 375px) {
  section.keys button {
    padding: 3px;
    min-width: 30px;
  }
}
section.keys button:active {
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
}
section.keys button.delete::before {
  content: "del";
}
@media (max-width: 375px) {
  section.keys button.delete::before {
    content: "d";
  }
}
section.keys button.reset {
  grid-area: 5/1/6/3;
}
section.keys button.equal {
  color: var(--third-key-text-color);
  background-color: var(--third-key-bg-color);
  -webkit-box-shadow: inset 0 -4px 0px -1px var(--third-key-shadow-color);
          box-shadow: inset 0 -4px 0px -1px var(--third-key-shadow-color);
  grid-area: 5/3/6/5;
}
section.keys button.equal:hover {
  background-color: var(--third-key-hover-color);
}
section.keys button.btn-text {
  color: var(--second-key-text-color);
  background-color: var(--second-key-bg-color);
  -webkit-box-shadow: inset 0 -4px 0px -1px var(--second-key-shadow-color);
          box-shadow: inset 0 -4px 0px -1px var(--second-key-shadow-color);
  text-transform: uppercase;
  font-size: 22px;
}
section.keys button.btn-text:hover {
  background-color: var(--second-key-hover-color);
}
/*# sourceMappingURL=main.css.map */