:root {
  --MainBackground: hsl(222, 26%, 31%);
  --ToggleBackground: hsl(223, 31%, 20%);
  --ScreenBackground: hsl(224, 36%, 15%);
  --KeyBackground: hsl(225, 21%, 49%);
  --KeyShadow: hsl(224, 28%, 35%);
  --KeyToggle: hsl(6, 63%, 50%);
  --ThemeKeyShadow: hsl(6, 70%, 34%);
  --DarkKeyBackground: hsl(30, 25%, 89%);
  --DarkKeyShadow: hsl(28, 16%, 65%);
  --Text: hsl(221, 14%, 31%);
  --MainBackground2: hsl(0, 0%, 90%);
  --ToggleBackground2: hsl(0, 5%, 81%);
  --ScreenBackground2: hsl(0, 0%, 93%);
  --KeyBackground2: hsl(185, 42%, 37%);
  --KeyShadow2: hsl(185, 58%, 25%);
  --KeyToggle2: hsl(25, 98%, 40%);
  --ThemeKeyShadow2: hsl(25, 99%, 27%);
  --DarkKeyBackground2: hsl(45, 7%, 89%);
  --DarkKeyShadow2: hsl(35, 11%, 61%);
  --Text2: hsl(60, 10%, 19%);
  --MainBackground3: hsl(268, 75%, 9%);
  --ToggleBackground3: hsl(268, 71%, 12%);
  --ScreenBackground3: hsl(268, 71%, 12%);
  --KeyBackground3: hsl(281, 89%, 26%);
  --KeyShadow3: hsl(285, 91%, 52%);
  --KeyToggle3:hsl(176, 100%, 44%);
  --ThemeKeyShadow3: hsl(177, 92%, 70%);
  --DarkKeyBackground3: hsl(268, 47%, 21%);
  --DarkKeyShadow3: hsl(290, 70%, 36%);
  --Text3: hsl(52, 100%, 62%);
  --Text4: hsl(198, 20%, 13%);
}

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  font-family: 'Spartan', sans-serif;
  font-weight: 700;
  font-size: 32px;
  background-color: var(--MainBackground);
}

.calculator {
  margin: 0 auto;
  padding: 0;
  max-height: 100vh;
}

.calculator #logo-theme-select {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.calculator #logo-theme-select h1 {
  color: white;
  font-size: 32px;
  text-transform: lowercase;
}

#results {
  margin: 0 auto;
  width: 90%;
  background-color: var(--ScreenBackground);
  height: 5rem;
  border-radius: 10px;
}

#results #number-result {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: end;
  padding: 1.5rem;
  color: white;
}

#interface {

  background-color: var(--ToggleBackground);

  border-radius: 10px;
  margin: 2rem auto;
  padding: .5rem;
  width: 90%;
  min-height: 50vh;
}

#interface .row {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[4];
      grid-template-columns: repeat(4, 1fr);
  -ms-grid-rows: 5;
      grid-template-rows: 5;
}

#interface .btn {

  color: var(--Text);
  background-color: var(--DarkKeyBackground);

  padding: .5rem 1rem;
  border-radius: 5px;
  margin: .7rem;
  -webkit-box-shadow: 0 6px var(--DarkKeyShadow);
          box-shadow: 0 6px var(--DarkKeyShadow);
  cursor: pointer;
}

#interface .btn:active, #interface #del:active, #interface #reset:active, #interface #equal:active {
  -webkit-box-shadow: none;
          box-shadow: none;
  top: 6px;
}

#interface #del, #interface #reset {
  color: white;
  background-color: var(--KeyBackground);
  font-size: 16px;
  padding: 1rem;
  -webkit-box-shadow: 0 6px var(--KeyShadow);
          box-shadow: 0 6px var(--KeyShadow);
}

#interface #reset {
  padding: 1.5rem 3rem;
}

#interface #equal {
  font-size: 16px;
  padding: 1.5rem 3.7rem;
  color: white;
  background-color: var(--KeyToggle);
  -webkit-box-shadow: 0 6px var(--ThemeKeyShadow);
          box-shadow: 0 6px var(--ThemeKeyShadow);
}

.attribution {
  font-size: 11px;
  text-align: center;
}

.attribution a {
  color: #3e52a3;
}
/*# sourceMappingURL=style.css.map */