style.css

:root {
  --spacing: .25rem;
}

#restyle {

  display: inline-flex;
  gap: 0.825em;
  padding-right: 1.5em;
  align-items: center;
  color: #555;

  input[type='checkbox'] {
    /* display: none; */
    width: 0;
    height: 0;
    position: absolute;
  }

  .toggle {
    width: calc(var(--spacing) * 9);
    height: calc(var(--spacing)* 5);
    background-color: #e5e7eb;
    border-radius: 20px;
    position: relative;
    cursor: pointer;
  }

  .toggle::after {
    content: '';
    transition: 0.15s cubic-bezier(.4, 0, .2, 1);
    background-color: white;
    border-radius: 20px;
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
    position: absolute;
    top: 2px;
    inset-inline-start: 2px;
  }
  

  :focus-within + .toggle, input:active + .toggle {
    box-shadow: 0 0 0 2px #93c5fd;
  }

  input:checked + .toggle {
    background-color: #2563eb;
  }

  input:checked + .toggle::after {
    translate: 100% 0;
  }
}

html[restyle-active] {
  #main-container > div {
    display: flex;
    flex-direction: column;
    height: 100vh;
  }

  .dcg-basic-calculator-footer {
    display: none;
  }

  @media (width >= 64rem) {
    #main {
      padding: 1em;
    }
  }

  #main {
    position: unset !important;
    width: 100% !important;
    max-width: 1024px;
    flex-grow: 1;
    margin: 0 auto !important;
  }


  .dcg-basic-keypad-container, .dcg-keypad-control-bar {
    display: flex;
    justify-content: center;

    > div {
      width: 600px;
    }
  }

  .dcg-basic-expression:not(:last-of-type) {
    min-height: unset !important;

    .dcg-math-field {
      padding: 0.5em !important;
    }
  }

}