*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transition: background-color .3s;

}
html {
  font-size: 62.5%;
}
.theme-0 {
  /*backgrounds*/
  --main-bg: hsl(222, 26%, 31%);
  --key-box-bg: hsl(223, 31%, 20%);
  --screen-bg: hsl(224, 36%, 15%);
  /*keys*/
  --key-bg-1: hsl(225, 21%, 49%);
  --key-shadow-1: hsl(224, 28%, 35%);
  --key-toggle: hsl(6, 63%, 50%);
  --key-toggle-shadow: hsl(6, 70%, 34%);
  --key-bg: hsl(30, 25%, 89%);
  --key-shadow: hsl(28, 16%, 65%);
  /*text*/
  --text-main: hsl(0, 0%, 100%);
  --text-keys: hsl(221, 14%, 31%);
  --text-del-reset: hsl(0, 0%, 100%);
  --text-equal: hsl(0, 0%, 100%);
  /*switch position (flex)*/
  --switch-position: flex-start;
}
.theme-1 {
  --main-bg: hsl(0, 0%, 90%);
  --key-box-bg: hsl(0, 5%, 81%);
  --screen-bg: hsl(0, 0%, 93%);
  --key-bg-1: hsl(185, 42%, 37%);
  --key-shadow-1: hsl(185, 58%, 25%);
  --key-toggle: hsl(25, 98%, 40%);
  --key-toggle-shadow: hsl(25, 99%, 27%);
  --key-bg: hsl(45, 7%, 89%);
  --key-shadow: hsl(35, 11%, 61%);

  --text-main: hsl(60, 10%, 19%);
  --text-keys: hsl(60, 10%, 19%);
  --text-del-reset: hsl(0, 0%, 100%);
  --text-equal: hsl(0, 0%, 100%);
  --switch-position: center;
}
.theme-2 {
  --main-bg: hsl(268, 75%, 9%);
  --key-box-bg: hsl(268, 71%, 12%);
  --screen-bg: hsl(268, 71%, 12%);
  --key-bg-1: hsl(281, 89%, 26%);
  --key-shadow-1: hsl(285, 91%, 52%);
  --key-toggle: hsl(176, 100%, 44%);
  --key-toggle-shadow: hsl(177, 92%, 70%);
  --key-bg: hsl(268, 47%, 21%);
  --key-shadow: hsl(290, 70%, 36%);

  --text-main: hsl(52, 100%, 62%);
  --text-keys: hsl(52, 100%, 62%);
  --text-del-reset: hsl(0, 0, 100%);
  --text-equal: hsl(198, 20%, 13%);
  --switch-position: flex-end;
}
.flex {
  display: flex;
}
body,
.container {
  font-family: "Spartan", sans-serif;
  font-weight: 700;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: var(--main-bg);
  color: var(--text-main);
}
.header {
  justify-content: space-between;
}
h1 {
  font-size: 3.2rem;
}
.calculator-box {
  height: 100%;
  padding: 2.8rem 2.4rem;
}
.toggler-box {
  justify-content: space-between;
}
.toggler-box p {
  margin-top: 2rem;
  margin-right: 1rem;
}
.toggler-states {
  width: 7rem;
  justify-content: space-around;
}
.toggler-switch {
  width: 7rem;
  height: 2.5rem;
  border-radius: 10rem;
  padding: 0.5rem;
  cursor: pointer;
  background-color: var(--key-box-bg);
  justify-content: var(--switch-position);
}
.toggler-btn {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 2rem;
  background-color: var(--key-toggle);
}
.screen {
  position: relative;
  margin-top: 2.8rem;
  margin-bottom: 2.4rem;
  border-radius: 1rem;
  width: 100%;
  height: 9rem;
  justify-content: flex-end;
  align-items: center;
  overflow: hidden;
  background-color: var(--screen-bg);
}
.result {
  margin-right: 2.4rem;
  font-size: 3.6rem;
}
.key-box {
  padding: 2.2rem 2.4rem;
  width: 100%;
  height: 60%;
  border-radius: 1rem;
  display: grid;
  column-gap: 1.3rem;
  row-gap: 1.8rem;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(5, 1fr);
  align-items: center;
  background-color: var(--key-box-bg);
}
.key {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 1rem;
  height: 100%;
  width: 100%;
  cursor: pointer;
  background-color: var(--key-bg);
  box-shadow: 0 0.4rem 0 var(--key-shadow);
}
.key h3 {
  color: var(--text-keys);
  font-size: 3.2rem;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}
.del h3,
.reset h3,
.equal h3 {
  font-size: 1.6rem;
  color: var(--text-del-reset);
}
.equal,
.reset {
  width: 100%;
}

.equal h3 {
  font-size: 3.2rem;
}
.del,
.reset {
  color: hsl(0, 0%, 100%);
  background-color: var(--key-bg-1);
  box-shadow: 0 0.4rem 0 var(--key-shadow-1);
}
.reset {
  grid-column: 1/3;
  grid-row: 5/6;
}
.equal {
  grid-column: 3/5;
  grid-row: 5/6;
  color: var(--text-equal);
  background-color: var(--key-toggle);
  box-shadow: 0 0.4rem 0 var(--key-toggle-shadow);
}
.attribution {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 240px;
  /* height: 100%; */
  flex-direction: column;
  justify-content: center;
  border-radius: 1rem;
  font-size: 11px;
}
.attribution span  {
  text-align: center;
}
.attribution span a {
  color: var(--key-toggle);
  margin: 0 2px;
}
@media screen and (max-width: 359px) {
  .attribution {
    bottom: 10px;
    font-size: 9px;
  }
  .key-box {
    padding: 1.6rem 1.8rem;
    column-gap: .8rem;
    row-gap: 1.2rem;
  }
  .key h3 {
    font-size: 2.2rem;
  }
  .del h3,
  .reset h3,
  .equal h3 {
    font-size: 1.4rem;
  }
}
@media screen and (min-width: 700px) {
  .attribution {
    bottom: -35px;
  }
  body {
    display: flex;
  }
  .calculator-box {
    margin: auto;
    width: 54rem;
    height: 64.5rem;
  }
  .key-box {
    height: 70%;
  }
}