html[data-theme="theme-1"] {
  --bg: hsl(222, 26%, 31%);
  --keyBack:  hsl(223, 31%, 20%);
  --screenBack:hsl(224, 36%, 15%);
  --keyFront: hsl(30, 25%, 89%);
  --keyShadow:hsl(28, 16%, 65%);
  --delResBack:hsl(225, 21%, 49%);
  --delResShadow:hsl(224, 28%, 35%);
  --equalBack: hsl(6, 63%, 50%) ;
  --equalShadow:hsl(6, 70%, 34%);
  --white:rgb(255, 255, 255) ;
  --textNum:  hsl(221, 14%, 31%);
  --headerText: rgb(255, 255, 255) ;
}

html[data-theme="theme-2"] {
  --bg: hsl(0, 0%, 90%);
  --keyBack:  hsl(0, 5%, 81%);
  --screenBack: hsl(0, 0%, 93%);
  --keyFront: hsl(45, 7%, 89%);
  --keyShadow:  hsl(35, 11%, 61%);
  --delResBack:hsl(185, 42%, 37%) ;
  --delResShadow: hsl(185, 58%, 25%);
  --equalBack: hsl(25, 98%, 40%);
  --equalShadow: hsl(25, 99%, 27%);
  --white: rgb(255, 255, 255);
  --textNum:hsl(60, 10%, 19%) ;
  --headerText: hsl(60, 10%, 19%) ;
}

html[data-theme="theme-3"] {
  --bg: hsl(268, 75%, 9%);
  --keyBack:  hsl(268, 71%, 12%);
  --screenBack: hsl(268, 71%, 12%) ;
  --keyFront: hsl(268, 47%, 21%) ;
  --keyShadow:hsl(290, 70%, 36%);
  --delResBack:hsl(281, 89%, 26%);
  --delResShadow: hsl(285, 91%, 52%);
  --equalBack: hsl(176, 100%, 44%);
  --equalShadow: hsl(177, 92%, 70%);
  --white:rgb(255, 255, 255) ;
  --textNum: hsl(52, 100%, 62%);
  --headerText: hsl(52, 100%, 62%);
}

body {
  font-family: 'Spartan', sans-serif;
  background-color: var(--bg);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 100%;
  height: auto;
}

.wrapper .calc {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 55%;
  height: auto;
}

.wrapper .calc .header, .wrapper .calc .current-operand {
  color: var(--headerText);
}

.wrapper .calc .header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  min-width: 300px;
}

.wrapper .calc .header .dumb {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.wrapper .calc .header .radiobar {
  margin-top: 20px;
  background-color: var(--keyBack);
  height: 20px;
  padding: 2px 5px 0px;
  border-radius: 50px;
}

.wrapper .calc .header .radiobar input {
  margin: 0%;
}

.wrapper .calc .current-operand {
  text-align: right;
  margin-bottom: 10px;
  height: 40px;
  background-color: var(--screenBack);
  border-radius: 10px;
  padding: 10px;
  font-size: 26px;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 300px;
}

.wrapper .calc .container {
  border-radius: 10px;
  padding: 10px;
  background-color: var(--keyBack);
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 50px 50px 50px 50px;
      grid-template-columns: 50px 50px 50px 50px;
  -ms-grid-rows: 50px auto 50px;
      grid-template-rows: 50px auto 50px;
  -webkit-column-gap: 10px;
          column-gap: 10px;
  row-gap: 15px;
  width: 60%;
  min-width: 300px;
  -ms-flex-pack: distribute;
      justify-content: space-around;
}

.wrapper .calc .digit {
  font-size: 32px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: var(--keyFront);
  width: 70px;
  height: 50px;
  border: none;
  border-bottom: 2px solid var(--keyShadow);
  border-radius: 10px;
  color: var(--textNum);
}

.wrapper .calc .del, .wrapper .calc .reset, .wrapper .calc .equals {
  color: var(--white);
  background-color: var(--delResBack);
  border-bottom: 4px solid var(--delResShadow);
  font-size: 1rem;
}

.wrapper .calc .footer {
  min-width: 150px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.wrapper .calc .reset, .wrapper .calc .equals {
  color: var(--white);
  border: none;
  border-radius: 10px;
  height: 3em;
  font-size: 1rem;
  margin-right: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.wrapper .calc .equals {
  background-color: var(--equalBack);
  border-bottom: 4px solid var(--equalShadow);
}
/*# sourceMappingURL=styles.css.map */