/*light-dark theme*/
:root {
    color-scheme: light dark;
    --nav-icon: light-dark(#1f1f1f, #ffffff);
    --main-bkg: light-dark(#f1ebdd, #1f1f1f);
    --light-bg1: #eee6f3;
    --light-bg2: #ccbcd7;
    --dark-bg1:#b74cfa; 
    --dark-bg2:#412c4f;
    --light-color: darkslategray;
    --dark-color: ghostwhite;
    --light-grad: linear-gradient(to bottom, var(--light-bg1), var(--light-bg2));
    --dark-grad: linear-gradient(to bottom, var(--dark-bg1), var(--dark-bg2));
  }
main {background-color: var(--main-bkg); }
  /* Theme-specific overrides when forced via data-theme attribute */
  [data-theme="light"] { color-scheme: light; }
  [data-theme="dark"] { color-scheme: dark; }

  [data-theme="light"] #sun { transform: scale(.5); }
  [data-theme="dark"] #sun-beams { opacity: 0; }

  .theme-toggle.skylight {
    background: none;
    border-radius: 50%;
    border: 10px solid transparent;
  }
  #moon.skylightt {
    fill: var(--nav-icon);
    stroke: none;
  }
  #sun.skylight {
    fill: var(--nav-icon);
    stroke: none;
    transition: transform .5s cubic-bezier(.25,0,.2,1);
    transform-origin: center center;
  }
  #sun-beams.skylight {
    stroke: var(--nav-icon);
    stroke-width: 2px;
    transform-origin: center center;
  }
  button:hover, button:focus { cursor: pointer; }