.toggle {
    --size: 2rem;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    outline: none;
    cursor: pointer;
    width: var(--size);
    height: var(--size);
    box-shadow: inset calc(var(--size) * 0.33) calc(var(--size) * -0.25) 0;
    border-radius: 999px;
    color: #e6e6ff;
    transition: all 500ms;
  }
  .toggle:checked {
    --ray-size: calc(var(--size) * -0.4);
    --offset-orthogonal: calc(var(--size) * 0.65);
    --offset-diagonal: calc(var(--size) * 0.45);
    transform: scale(0.75);
    color: #ffaa00;
    box-shadow: inset 0 0 0 var(--size), calc(var(--offset-orthogonal) * -1) 0 0 var(--ray-size), var(--offset-orthogonal) 0 0 var(--ray-size), 0 calc(var(--offset-orthogonal) * -1) 0 var(--ray-size), 0 var(--offset-orthogonal) 0 var(--ray-size), calc(var(--offset-diagonal) * -1) calc(var(--offset-diagonal) * -1) 0 var(--ray-size), var(--offset-diagonal) var(--offset-diagonal) 0 var(--ray-size), calc(var(--offset-diagonal) * -1) var(--offset-diagonal) 0 var(--ray-size), var(--offset-diagonal) calc(var(--offset-diagonal) * -1) 0 var(--ray-size);
  }
  /* body {
    background-color: black;
  } */
  /* body .light-mode {
    background-color: white;
  }
   */
  /* body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
  } */
 
  /* .background {
    --bg: hsl(240, 100%, 10%);
    background: var(--bg);
    position: fixed;
    height: 100vh;
    width: 100vw;
    transition: background 500ms;
  } */
  
  .toggle {
    z-index: 1;
  }
  .toggle:checked ~ .background {
    --bg: white;
  }
  .toggle:checked ~ .title {
    --color: hsl(59, 92%, 51%);
  }