@import url("https://fonts.googleapis.com/css2?family=League+Spartan:wght@700&display=swap");
* {
  font-family: "League Spartan", sans-serif;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: #384664;
}

body.active1 {
  background-color: hsl(0, 0%, 90%);
}
body.active1 .header h1 {
  color: #1b1f32;
}
body.active1 .header p {
  color: #1b1f32;
}
body.active1 .header .switch-button {
  background-color: hsl(0, 5%, 81%);
}
body.active1 .display {
  background-color: hsl(0, 0%, 98%);
  color: #1b1f32;
}
body.active1 .botones {
  background-color: hsl(0, 5%, 81%);
}
body.active1 .botones .btn-number {
  background-color: hsl(45, 7%, 89%);
  border-bottom: 2px solid hsl(35, 11%, 61%);
}
body.active1 .botones .btn-number:hover {
  background-color: hsl(40, 20%, 97%);
}
body.active1 .botones #clear {
  background-color: hsl(185, 42%, 37%);
  border-bottom: 2px solid hsl(185, 58%, 25%);
}
body.active1 .botones #clear:hover {
  background-color: hsl(185, 50%, 53%);
}
body.active1 .botones .next-buttom {
  background-color: hsl(0, 5%, 81%);
}
body.active1 .botones .next-buttom .reset {
  background-color: hsl(185, 42%, 37%);
  border-bottom: 2px solid hsl(185, 58%, 25%);
}
body.active1 .botones .next-buttom .reset:hover {
  background-color: hsl(185, 50%, 53%);
}
body.active1 .botones .next-buttom .igual {
  background-color: hsl(25, 98%, 40%);
  border-bottom: 2px solid hsl(25, 99%, 27%);
}
body.active1 .botones .next-buttom .igual:hover {
  background-color: hsl(25, 83%, 54%);
}

body.active2 {
  background-color: hsl(268, 75%, 9%);
}
body.active2 .header h1 {
  color: hsl(52, 100%, 62%);
}
body.active2 .header p {
  color: hsl(52, 100%, 62%);
}
body.active2 .header .switch-button {
  background-color: hsl(268, 47%, 21%);
}
body.active2 .display {
  background-color: hsl(268, 47%, 21%);
  color: hsl(52, 100%, 62%);
}
body.active2 .botones {
  background-color: hsl(268, 47%, 21%);
}
body.active2 .botones .btn-number {
  background-color: hsl(281, 89%, 26%);
  border-bottom: 2px solid hsl(285, 91%, 52%);
  color: hsl(52, 100%, 62%);
}
body.active2 .botones .btn-number:hover {
  background-color: hsl(281, 86%, 41%);
}
body.active2 .botones #clear {
  background-color: hsl(290, 70%, 36%);
  border-bottom: 2px solid hsl(285, 91%, 52%);
}
body.active2 .botones #clear:hover {
  background-color: hsl(290, 69%, 44%);
}
body.active2 .botones .next-buttom {
  background-color: hsl(268, 47%, 21%);
}
body.active2 .botones .next-buttom .reset {
  background-color: hsl(290, 70%, 36%);
  border-bottom: 2px solid hsl(285, 91%, 52%);
}
body.active2 .botones .next-buttom .reset:hover {
  background-color: hsl(290, 69%, 44%);
}
body.active2 .botones .next-buttom .igual {
  background-color: hsl(176, 100%, 44%);
  border-bottom: 2px solid hsl(177, 92%, 70%);
}
body.active2 .botones .next-buttom .igual:hover {
  background-color: hsl(176, 100%, 73%);
}

.header {
  padding: 1rem 0;
  padding-bottom: 0.3rem;
}
.header h1 {
  font-weight: 700;
  color: #fff;
}

.toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.boton {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.boton p {
  float: right;
  font-weight: 700;
  color: #fff;
  margin-right: 0.5rem;
}
.boton .switch-button {
  padding: 0.7rem 0.3rem;
  background-color: #252d44;
  border-radius: 30px;
  display: flex;
  width: 4em;
  height: 100%;
  position: relative;
}
.boton .switch-button #circle {
  background-color: #d13f3d;
  position: absolute;
  top: 3.1px;
  left: 4px;
  padding: 0.5rem;
  border-radius: 30px;
  display: flex;
  justify-content: flex-start;
  z-index: 1;
}

.num {
  display: flex;
  justify-content: flex-end;
}
.num p {
  margin: 0 7px;
  color: #fff;
  cursor: pointer;
}

.display {
  background-color: #1b1f32;
  padding: 20px;
  margin: 20px 0;
  border-radius: 10px;
  color: #fff;
  font-weight: 800;
  font-size: 2rem;
  display: flex;
  justify-content: flex-end;
}

.botones {
  background: #252d44;
  padding: 20px;
  border-radius: 3%;
}
.botones .btn-number {
  background: #f1f1f1;
  padding: 0.7rem 1.5rem;
  border: none;
  border-bottom: 2px solid #555;
  border-radius: 5px;
  color: #555;
  font-size: 1.3rem;
  font-weight: 700;
  width: 70px;
  margin: 0.3rem;
  cursor: pointer;
}
.botones .btn-number:hover {
  background-color: #fff;
}
.botones #clear {
  background: #647299;
  border-bottom: 2px solid #3e4a6b;
  color: #fff;
  cursor: pointer;
}
.botones #clear:hover {
  background-color: #94a2ca;
}
.botones .next-buttom {
  background-color: #252d44;
  display: inline-flex;
  width: 100%;
}
.botones .next-buttom .reset {
  width: 47%;
  background: hsl(225, 21%, 49%);
  padding: 0.8rem 1.5rem;
  border: none;
  border-bottom: 2px solid hsl(224, 28%, 35%);
  border-radius: 5px;
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  margin: 0.3rem;
  cursor: pointer;
}
.botones .next-buttom .reset:hover {
  background-color: #94a2ca;
}
.botones .next-buttom .igual {
  width: 50%;
  background: #d13f3d;
  padding: 0.8rem 1.5rem;
  border: none;
  border-bottom: 2px solid #b6251e;
  border-radius: 5px;
  color: #fff;
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0.3rem;
  cursor: pointer;
}
.botones .next-buttom .igual:hover {
  background-color: #d06563;
}

@media (max-width: 500px) {
  body.active1 .botones .btn-number {
    border-bottom: 4px solid hsl(35, 11%, 61%);
  }
  body.active1 .botones #clear {
    border-bottom: 4px solid hsl(185, 58%, 25%);
  }
  body.active1 .botones .next-buttom .reset {
    border-bottom: 4px solid hsl(185, 58%, 25%);
  }
  body.active1 .botones .next-buttom .igual {
    border-bottom: 4px solid hsl(25, 99%, 27%);
  }
  body.active2 .botones .btn-number {
    border-bottom: 4px solid hsl(290, 70%, 36%);
  }
  body.active2 .botones #clear {
    border-bottom: 4px solid hsl(285, 91%, 52%);
  }
  body.active2 .botones .next-buttom .reset {
    border-bottom: 4px solid hsl(285, 91%, 52%);
  }
  body.active2 .botones .next-buttom .igual {
    border-bottom: 4px solid hsl(177, 92%, 70%);
  }
  .display {
    padding: 40px 20px;
    margin: 40px 0;
    font-size: 3rem;
  }
  .botones {
    width: 80vw;
    height: 58vh;
    padding: 1rem;
  }
  .botones .btn-number {
    width: 21.5%;
    margin: 0.3rem;
    padding: 1rem;
    height: 4.5rem;
    font-size: 2rem;
    border-bottom: 4px solid;
  }
  .botones #clear {
    font-size: 1.8rem;
    border-bottom: 4px solid hsl(224, 28%, 35%);
  }
  .botones .next-buttom {
    height: 18%;
  }
  .botones .next-buttom .reset {
    font-size: 1.5rem;
    border-bottom: 4px solid hsl(224, 28%, 35%);
  }
  .botones .next-buttom .igual {
    font-size: 1.5rem;
    border-bottom: 4px solid hsl(6, 70%, 34%);
  }
}/*# sourceMappingURL=style.css.map */