* {
  margin: 0;
  padding: 0;
  font-family: 'Spartan', sans-serif;
}

body {
  background-color: var(--mainBackground);
  color: var(--whiteText);
  overflow: hidden;
}

html[data-theme="dark"] {
  --mainBackground: hsl(222, 26%, 31%);
  --keypadBackground: hsl(223, 31%, 20%);
  --screenBackground: hsl(224, 36%, 15%);
  --keyDeleteBackground: hsl(225, 21%, 49%);
  --keyDeleteShadow: hsl(224, 28%, 35%);
  --red: hsl(6, 63%, 50%);
  --darkRed: hsl(6, 70%, 34%);
  --keyBackground: hsl(30, 25%, 89%);
  --keyShadow: hsl(28, 16%, 65%);
  --darkText: hsl(221, 14%, 31%);
  --whiteText: hsl(0, 0%, 100%);
  --whiteButtons: hsl(0, 0%, 100%);
}

html[data-theme="light"] {
  --mainBackground: hsl(0, 0%, 90%);
  --keypadBackground: hsl(0, 5%, 81%);
  --screenBackground: hsl(0, 0%, 93%);
  --keyDeleteBackground: hsl(185, 42%, 37%);
  --keyDeleteShadow: hsl(185, 58%, 25%);
  --red: hsl(25, 98%, 40%);
  --darkRed: hsl(25, 99%, 27%);
  --keyBackground: hsl(45, 7%, 89%);
  --keyShadow: hsl(35, 11%, 61%);
  --darkText: hsl(60, 10%, 19%);
  --whiteText: hsl(60, 10%, 19%);
  --whiteButtons: hsl(0, 0%, 100%);
}

html[data-theme="purple"] {
  --mainBackground: hsl(268, 75%, 9%);
  --keypadBackground: hsl(268, 71%, 12%);
  --screenBackground: hsl(268, 71%, 12%);
  --keyDeleteBackground: hsl(281, 89%, 26%);
  --keyDeleteShadow: hsl(281, 89%, 26%);
  --red: hsl(176, 100%, 44%);
  --darkRed: hsl(177, 92%, 70%);
  --keyBackground: hsl(268, 47%, 21%);
  --keyShadow: hsl(290, 70%, 36%);
  --darkText: hsl(52, 100%, 62%);
  --whiteText: hsl(52, 100%, 62%);
  --whiteButtons: hsl(0, 0%, 100%);
}

.container {
  width: 100vw;
  height: 100vh;
  max-width: 550px;
  margin: 0 auto;
  padding: 2em;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.container-header {
  background-color: transparent;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 2em;
}

.container-header-switch .switch {
  width: 100%;
  height: 30px;
  border-radius: 50px;
  border: none;
  background: var(--keypadBackground);
}

.container-operation {
  background-color: var(--screenBackground);
  height: 32px;
  padding: 1.2em;
  border-radius: 20px;
  margin: 0 0 20px 0;
  border: none;
  border-top: 1px solid var(--mainBackground);
  text-align: end;
  font-size: 32px;
}

.container-keyboard {
  background-color: var(--keypadBackground);
  padding: 2em;
  border-radius: 20px;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[4];
      grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.container-keyboard .math-symbol {
  width: 100%;
  height: 70px;
  font-size: 32px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: var(--keyBackground);
  color: var(--darkText);
  border: none;
  border-radius: 10px;
  border-bottom: 5px solid var(--keyShadow);
  cursor: pointer;
}

.container-keyboard .del, .container-keyboard .reset {
  background-color: var(--keyDeleteBackground);
  color: var(--whiteButtons);
  text-transform: uppercase;
  font-size: 24px;
  border-bottom: 5px solid var(--keyDeleteShadow);
}

.container-keyboard .reset {
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-column: 1/3;
}

.container-keyboard .button-equal {
  background-color: var(--red);
  -ms-grid-column: 3;
  -ms-grid-column-span: 2;
  grid-column: 3/5;
  border-bottom: 5px solid var(--darkRed);
}

.container .application__header {
  width: 100%;
  left: 7.3rem;
  margin: 40px 0;
  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;
}

.container .application__header .header__title {
  color: var(--whiteText);
  font-size: 3rem;
  -ms-flex-item-align: start;
      align-self: flex-start;
}

.container .application__header .header__themes {
  height: 80%;
  min-width: 20%;
}

.container .application__header .header__themes .themes__position {
  position: relative;
  left: 7.5rem;
}

.container .application__header .header__themes .themes__position .position {
  display: inline-block;
  padding: 0 5px;
}

.container .application__header .header__themes .themes__slider {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.container .application__header .header__themes .themes__slider .slider {
  width: 5rem;
  height: 2rem;
  -webkit-appearance: none;
  outline: none;
  background-color: var(--keypadBackground);
  border-radius: 30px;
  padding: 0 3px;
  -webkit-transition: all 1.5s;
  transition: all 1.5s;
}

.container .application__header .header__themes .themes__slider .slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--red);
  -webkit-filter: drop-shadow(0 0 1px var(--red));
          filter: drop-shadow(0 0 1px var(--red));
  cursor: pointer;
}

.container .application__header .header__themes .themes__slider .slider__label {
  display: inline-block;
  font-size: 1rem;
  letter-spacing: 1px;
  padding-right: 2.5rem;
}

.container .application__header .header__themes .position, .container .application__header .header__themes .slider__label {
  color: var(--whiteText);
}
/*# sourceMappingURL=style.css.map */