:root {
  /* ================== THEME 1 ================== */

  /* Backgrounds */
  --Navy_850--main_background: hsl(222, 26%, 31%);
  --Navy_900--toggle_background-keypad_background: hsl(223, 31%, 20%);
  --Navy_950--screen_background: hsl(224, 36%, 15%);

  /* Keys */
  --Navy_700--key_background: hsl(225, 21%, 49%);
  --Navy_800--key_shadow: hsl(224, 28%, 35%);

  --Red_600--key_background_toggle: hsl(6, 63%, 50%);
  --Red_800--key_shadow: hsl(6, 70%, 34%);

  --Gray_200--key_background: hsl(0, 0%, 90%);
  --Gray_orange_400--key_shadow: hsl(28, 16%, 65%);

  /* Text */
  --Navy_750: hsl(221, 14%, 31%);
  --White: hsl(0, 100%, 100%);

  /* ================== THEME 2 ================== */

  /* Backgrounds */
  --Navy_850Navy_850Navy_850--main_background: hsl(0, 0%, 90%);
  --Gray_300--toggle_background-keypad_background: hsl(0, 5%, 81%);
  --Gray_100--screen_background: hsl(0, 0%, 93%);

  /* Keys */
  --Blue_500--key_background: hsl(185, 42%, 37%);
  --Blue_600--key_shadow: hsl(185, 58%, 25%);

  --Orange_700--key_background_toggle: hsl(25, 98%, 40%);
  --Orange_800--key_shadow: hsl(25, 99%, 27%);

  --Grey_200--key_background: hsl(0, 0%, 90%);
  --Grey_orange_450--key_shadow: hsl(35, 11%, 61%);

  /* Text */
  --Gray_900: hsl(60, 10%, 19%);
  --White_text: hsl(0, 100%, 100%);

  /* ================== THEME 3 ================== */

  /* Backgrounds */
  --Purple_950--main_background: hsl(268, 75%, 9%);
  --Purple_900--toggle_background-keypad_background-screen_background: hsl(
    268,
    71%,
    12%
  );

  /* Keys */
  --Purple_800--key_background: hsl(281, 89%, 26%);
  --Purple_400--key_shadow: hsl(285, 91%, 52%);

  --Cyan_500--key_background_toggle: hsl(176, 100%, 44%);
  --Cyan_400--key_shadow: hsl(177, 92%, 70%);

  --Purple_850--key_background: hsl(268, 47%, 21%);
  --Purple_750--key_shadow: hsl(290, 70%, 36%);

  /* Text */
  --Yellow_300: hsl(52, 100%, 62%);
  --Blue_950: hsl(198, 20%, 13%);
  --White_theme3: hsl(0, 100%, 100%);

  /* Fuente */
  --Fuente: "League Spartan", sans-serif;
}
*,
*::after,
*::before {
  box-sizing: inherit;
}
html {
  box-sizing: border-box;
  font-size: 62.5%;
}
body {
  background-color: var(--Navy_850--main_background);
}
.no-margin {
  margin: 0;
}
.no-padding {
  padding: 0;
}
.contenedor__general {
  display: flex;
  flex-direction: column;
  width: min(40rem,95%);
  height: 55rem;
  justify-content: space-between;
  margin: 4rem auto;
  gap: 1rem;
}
.contenedor__header {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    color: var(--White);
    font-family: var(--Fuente),sans-serif;
}
details {font-size: 1.7rem;
    background-color: rgba(34, 34, 34, 0.15);
    padding: 1rem;
    border-radius: .5rem;
    text-align: center;
}
details[open] > summary {
    border-bottom: 1px solid grey;
    padding-bottom: 1rem;

}
summary::marker {
    color: var(--Gray_200--key_background);
}
.header {
    flex:1 1 65%;
}
.toggle {
    flex:1 1 35%;
}
p {cursor: pointer;}


/*}*/
/*li:hover {*/
/*    border-bottom: 1px solid grey;*/
/*}*/
/*details {*/
/*    text-align: center;*/
/*    background-color:rgba(238, 238, 238, 0.13);*/
/*    width: 25rem;*/
/*padding: 1rem;*/
/*border-radius: .5rem}*/
/*details[open] > summary {*/
/*    list-style-type: '⬆ ';*/
/*}*/
/*summary {*/
/*    !*    background-color:rgba(238, 238, 238, 0.13);*!*/
/*    list-style-type: '⬇ ';*/
/*}*/
/*summary::marker {*/
/*    color: violet;*/
/*    font-size: 1.2em;*/
/*}*/
.contenedor__display {
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: var(--Navy_950--screen_background);
    height: 15rem;
    text-align: right;
    font-size: 4rem;
    padding-right: 1rem;
    color: var(--White);
    font-family: var(--Fuente),sans-serif;
    border-radius: .5rem;
}
#showResult {margin: -1.5rem 3px auto auto;}
#lastres {
    padding: 1rem;
    font-size: 3rem;
    background-color: rgba(238, 238, 238, 0.08);
    text-align: right;
    margin-left: auto;
    width: 10rem;
    border-radius: 5px;
}

.bg-keypad {
  background-color: var(--Navy_900--toggle_background-keypad_background);
  padding: 1rem;
  border-radius: 0.5rem;
  font-family: var(--Fuente),sans-serif;;
}
.contenedor__botones {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  height: 25rem;
  justify-items: center;
  width: min(50rem,95%);
  margin: auto;
}
.contenedor__botones--opciones {
  display: flex;
  padding: 1rem;
  width: min(46rem,100%);
  margin: auto;height: 8rem;
  gap: 1rem;
}
.campo-boton {
    width: 100%;
    height: 5rem;
}
button {
    width: min(10rem,95%);
  font-family: var(--Fuente),sans-serif;
  border-radius: 0.5rem;
  border: none;
  box-shadow: 0 2px 0 1px grey;
  height: 100%;
  max-height: 5rem;
  font-size: 2rem;
  cursor: pointer;
  color: var(--Navy_750);
}
button.num:active,#reset:active,#equal:active {
    box-shadow: unset;
    margin-top:  3px;
}
.del{
  background-color: var(--Navy_700--key_background);
  color: var(--White);
  box-shadow: 0 2px 0 1px hsl(225, 21%, 55%) ;
}
#reset {
  background-color: var(--Navy_700--key_background);
  color:var(--White);
  flex: 1 1 50%;
  box-shadow: 0 2px 0 1px hsl(225, 21%, 55%) ;
}
#equal {
  background-color: rgba(207, 35, 35, 0.822);
  box-shadow: 0 2px 0 1px  rgba(207, 35, 35);
  flex: 1 1 50%;
  color: var(--White);
}