@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-display: swap;
    src: url('./assets/Lato-Regular.ttf') format('ttf');
  }
  
  :root {
     --color-day-bg: #0984e3;
     --color-night-bg: #032b43;
     --color-light: #fff;
     --color-mid: #efefef;
     --color-dark: #4a4a4a;
     --color-disabled: #d2d2d2;
     --color-disabled-label: #666;
     --font-base-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,'Helvetica Neue', sans-serif;
   }
  
  .toggles [type="checkbox"] {
    position: absolute;
    top: auto;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    width: 1px;
    height: 1px;
    white-space: nowrap;
  }
  .toggles [type="checkbox"] + label {
    display: block;
    position: relative;
    padding: 0.5em;
    padding-left: 4em;
    max-width: calc(100% - 2em);
    -webkit-tap-highlight-color: rgba(0,0,0,0);
  }
  
  .toggles [type="checkbox"] + label::before,
  .toggles [type="checkbox"] + label::after {
    content: "";
    position: absolute;
    height: 1.5em;
    transition: all 0.35s ease;
  }
  
  /* day mode pill */
  .toggles [type="checkbox"] + label::before {
    left: 0;
    top: 0.2em;
    width: 3em;
    border: 0.2em solid var(--color-day-bg);
    background-color: var(--color-day-bg); 
    border-radius: 1.1em;
    background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 32 32'%3E%3Ctitle%3Esun-fill%3C/title%3E%3Cpath fill='%23ffe4a1' d='M16.001 8c-4.418 0-8 3.582-8 8s3.582 8 8 8c4.418 0 7.999-3.582 7.999-8s-3.581-8-7.999-8v0zM14 2c0-1.105 0.895-2 2-2s2 0.895 2 2c0 1.105-0.895 2-2 2s-2-0.895-2-2zM4 6c0-1.105 0.895-2 2-2s2 0.895 2 2c0 1.105-0.895 2-2 2s-2-0.895-2-2zM2 14c1.105 0 2 0.895 2 2 0 1.107-0.895 2-2 2s-2-0.893-2-2c0-1.105 0.895-2 2-2zM4 26c0-1.105 0.895-2 2-2s2 0.895 2 2c0 1.105-0.895 2-2 2s-2-0.895-2-2zM14 30c0-1.109 0.895-2 2-2 1.108 0 2 0.891 2 2 0 1.102-0.892 2-2 2-1.105 0-2-0.898-2-2zM24 26c0-1.105 0.895-2 2-2s2 0.895 2 2c0 1.105-0.895 2-2 2s-2-0.895-2-2zM30 18c-1.104 0-2-0.896-2-2 0-1.107 0.896-2 2-2s2 0.893 2 2c0 1.104-0.896 2-2 2zM24 6c0-1.105 0.895-2 2-2s2 0.895 2 2c0 1.105-0.895 2-2 2s-2-0.895-2-2z'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10% center;
  }
  
  /* day mode thumb */
  .toggles [type="checkbox"] + label::after {
    left: 0;
    top: 0.2em;
    background-position: center center;
    border-radius: 50%;
    width: 1.5em;
    border: 0.2em solid var(--color-day-bg);
    background: var(--color-mid);
  }
  
  /* dark mode pill */
  .toggles [type="checkbox"]:checked + label::before {
    left: 1.6em;
    border-color: var(--color-night-bg);
    color: var(--color-night-bg);
    background-color: var(--color-night-bg);
    background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 32 32'%3E%3Ctitle%3Emoon-fill%3C/title%3E%3Cpath fill='%23b9c6d3' d='M24.633 22.184c-8.188 0-14.82-6.637-14.82-14.82 0-2.695 0.773-5.188 2.031-7.363-6.824 1.968-11.844 8.187-11.844 15.644 0 9.031 7.32 16.355 16.352 16.355 7.457 0 13.68-5.023 15.648-11.844-2.18 1.254-4.672 2.028-7.367 2.028z'%3E%3C/path%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: left 10% center;
  } 
  
  /* dark mode thumb */
  .toggles [type="checkbox"]:checked + label::after {
    left: 1.6em;
    border-color: var(--color-night-bg);
  }
  
  /* focus hover */
  .toggles [type="checkbox"]:focus + label::after,
  .toggles [type="checkbox"]:hover + label::after {
  /*   background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='rgba(0,0,0,1)' stroke-width='2'/%3E%3C/svg%3E");
    background-position: center center;
    cursor: pointer; */ 
  }
  
  /* disabled */
  .toggles [type="checkbox"][disabled] + label::before {
    background-color: transparent;
    border-color: var(--color-disabled);
  }
  .toggles [type="checkbox"][disabled] + label::after {
    border-color: var(--color-disabled);
  }
  .toggles [disabled] + label {
    color: var(--color-disabled-label); 
  }
  .toggles [type="checkbox"][disabled]:hover + label::before {
    box-shadow: none;
  }
  .toggles [type="checkbox"][disabled]:hover + label::after {
    background-image: none;
  }
  
  /* indeterminate state */
  .toggles [type="checkbox"]:indeterminate + label::after {
    left: 0.8em;
  }
  .toggles [type="checkbox"]:indeterminate + label::before {
    background-color: var(--color-disabled);
  }
  
  /* Label on the left */
  .toggles.flip [type="checkbox"] + label::before,
  .toggles.flip [type="checkbox"] + label::after {
    left: auto;
    right: 0;
    }
  
  .toggles.flip [type="checkbox"] + label::after {
    left: auto;
    right: 1.6em;
  }
  
  .toggles.flip [type="checkbox"]:checked + label::after {
    right: 0;
  }
  
  .toggles.flip [type="checkbox"]:indeterminate + label::after {
    right: 0.8em;
  }
  
  .toggles.flip [type="checkbox"] + label {
    padding-left: 0;
    padding-right: 4em;
  }
  
  /* reduced motion */
  @media screen and (prefers-reduced-motion: reduce) {
    .toggles [type="checkbox"] + label::before,
    .toggles [type="checkbox"] + label::after {
      transition: none;
    }
  }
  
  /* windows high contrast mode */
  @media screen and (-ms-high-contrast: active) {
    .toggles [type="checkbox"]:focus + label::before,
    .toggles [type="checkbox"]:hover + label::before {
      outline: 1px dotted windowText;
      outline-offset: 0.25em;
    }
    .toggles [type="checkbox"] + label::after {
      background-color: windowText;
    }
    .toggles [type="checkbox"][disabled] + label::after {
      background-color: transparent;
    }
  } 
  
  
  body {
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 100vh;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,
      'Helvetica Neue', sans-serif;
   font-size: 1.16rem;
   font-weight: 800;
   text-transform: uppercase;
  }