:root {
    color-scheme: light dark;
  }
  
  html, body {
    height: 100%;
  }
  
  /* Sky */
  
  .sky {
    margin: 0;
    display: grid;
    place-content: center;
    background-color: var(--sky-color);
    background-image: var(--sky-image);
    background-size: cover;
    font-family: sans-serif;
  }
  
  /* Body */
  
  .body {
    width: 20vmin;
    height: 20vmin;
    border-radius: 50%;
    background-color: var(--body-color);
    background-image: radial-gradient(
        circle at 20% 20%,
        var(--body-color) 50%,
        var(--body-shadow)
    );
    box-shadow: 0 0 10vmin var(--body-glow);
  }
  
  /* Switcher */
  
  .switcher {
    position: absolute;
    bottom: 36px;
    left: 50%;
    margin: 0;
    margin-left: -50px;
    padding: 2px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border: none;
  }
  
  /* Switcher Legend */
  
  .switcher__legend {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  
  /* Switcher Radio */
  
  .switcher__radio {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    width: 32px;
    height: 32px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 24px;
    transition: filter 0.1s ease-in;
  }
  
  .switcher__radio:focus {
    outline: none;
  }
  
  .switcher__radio--light {
    background-image: url('../images/light.svg');
  }
  
  .switcher__radio--auto {
    background-image: url('../images/auto.svg');
  }
  
  .switcher__radio--dark {
    background-image: url('../images/dark.svg');
  }
  
  /* Switcher Status */
  
  .switcher__status {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    box-shadow: 0 0 0 2px rgb(0 0 0 / 0.2);
    border-radius: 18px;
    background-color: rgb(255 255 255 / 0.5);
    background-repeat: no-repeat;
    background-image: url('../images/status.svg');
    background-size: 32px;
    background-position: center;
    transition: background-position 0.1s ease-in;
  }
  
  .switcher__radio:focus-visible ~ .switcher__status {
    box-shadow: 0 0 0 2px black;
  }
  
  .switcher__radio--light:checked ~ .switcher__status {
    background-position: left 2px center;
  }
  
  .switcher__radio--auto:checked ~ .switcher__status {
    background-position: center center;
  }
  
  .switcher__radio--dark:checked ~ .switcher__status {
    background-position: right 2px center;
  }