:root {
  --button-bg: #2c2c2c;
  --misc-button: #78f0a6;
  --op-button: #df7443;
  --number-button: #e2e2e2;
  --main-bg: #1a1a1a;
  --digit-section: #1e1e1e;
  --result: #fff;
  --black: #2b2b2b;
  --main-shadow: #65bdbd;
  --secondary-shadow: #e8ae61;
}

html,
body,
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  background: var(--main-bg);
  color: var(--result);
  min-height: 100vh;
  justify-content: center;
  align-items: center;
}

.wrapper{
  position: absolute;
  top: 2em;
  right: .5em;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-transform: translateY(-50%);
	        transform: translateY(-50%);
}

.switch_box{
	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-flex: 1;
	    -ms-flex: 1;
	        flex: 1;
}


/* Switch 3 Specific Style Start */

.toggler_box{
	background: var(--main-bg);
}

.toggle_switch{
  width: 100px;
  height: 45px;
  position: relative;
}

input[type="checkbox"].toggler{
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  outline: 0;
  z-index: 1;
}

svg.checkbox .outer-ring{
  stroke-dasharray: 375;
  stroke-dashoffset: 375;
  -webkit-animation: resetRing .35s ease-in-out forwards;
          animation: resetRing .35s ease-in-out forwards;
}

input[type="checkbox"].toggler:checked + svg.checkbox .outer-ring{
  -webkit-animation: animateRing .35s ease-in-out forwards;
          animation: animateRing .35s ease-in-out forwards;
}

input[type="checkbox"].toggler:checked + svg.checkbox .is_checked{
  opacity: 1;
  -webkit-transform: translateX(0) rotate(0deg);
          transform: translateX(0) rotate(0deg);
}

input[type="checkbox"].toggler:checked + svg.checkbox .is_unchecked{
  opacity: 0;
  -webkit-transform: translateX(-200%) rotate(180deg);
          transform: translateX(-200%) rotate(180deg);
}


svg.checkbox{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

svg.checkbox .is_checked{
  opacity: 0;
  fill: #fff;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-transform: translateX(200%) rotate(45deg);
          transform: translateX(200%) rotate(45deg);
  -webkit-transition: all .35s;
  transition: all .35s;
}

svg.checkbox .is_unchecked{
  opacity: 1;
  fill: yellow;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-transform: translateX(0) rotate(0deg);
          transform: translateX(0) rotate(0deg);
  -webkit-transition: all .35s;
  transition: all .35s;
}

@-webkit-keyframes animateRing{
  to{
    stroke-dashoffset: 0;
    stroke: #233043;
  }
}

@keyframes animateRing{
  to{
    stroke-dashoffset: 0;
    stroke: #233043;
  }
}

@-webkit-keyframes resetRing{
  to{
    stroke-dashoffset: 0;
    stroke: #b0aa28;
  }
}

@keyframes resetRing{
  to{
    stroke-dashoffset: 0;
    stroke: #b0aa28;
  }
}

/* Switch 3 Specific Style End */

#container {
  width: 100%;
  max-width: 400px;
  height: 100%;
  padding: 0.2em;
  box-shadow: -0.2em -0.2em 0.5em 0.2em var(--main-shadow),
    0.3em 0.3em 0.5em 0.2em var(--secondary-shadow);
  transition: box-shadow 1s;
}

#result__section {
  padding: 1em 0.5em;
  text-align: right;
}

#previous__operation {
  font-size: 1rem;
  min-height: 1ch;
}

#current__result {
  min-height: 2ch;
  font-size: 3rem;
  padding: 0.23em 0;
  overflow-x: auto;
  scrollbar-width: none;
}

#digit__section {
  display: grid;
  grid: auto / repeat(4, 1fr);
  gap: 0.5rem;
  padding: 2rem 1rem;
  width: 100%;
  height: 100%;
  font-size: 2rem;
  border-radius: 1rem;
  background: var(--digit-section);
}

section > button {
  background: var(--button-bg);
  border: 0;
  font-size: inherit;
  text-align: center;
  padding: 0.5em;
  border-radius: 20em;
  max-width: 100%;
  transition: background 0.75s;
}

section > button:not(:disabled):hover,
section > button:not(:disabled):focus,
section > button:not(:disabled):focus-visible {
  outline: 0;
  transform: scale(1.05);
  filter: invert(100%);
  transition: 0.7s;
}

section > button:disabled {
  background: #808080;
  color: #2b2b2b;
}

#reset,
#zero {
  grid-column-start: span 2;
}

.misc__button {
  color: var(--misc-button);
}

.op__button {
  color: var(--op-button);
}

section > button:not(.op__button):not(.misc__button) {
  color: var(--number-button);
}

@media (prefers-color-scheme: light) {
  body {
    --main-bg: #f9f9f9;
    --result: #111;
  }

  #container {
    --black: #e2e2e2;
    box-shadow: -0.2em -0.2em 0.5em 0.2em var(--secondary-shadow),
      0.3em 0.3em 0.5em 0.2em var(--main-shadow);
  }

  #digit__section {
    --digit-section: #f2f2f2;
  }

  section > button {
    --button-bg: #efefef;
  }

  section > button:not(.op__button):not(.misc__button) {
    --number-button: #5b5b5b;
  }
}