:root {
  color-scheme: light dark;
  --n0: rgb(142,142,147);
  
  --l1: rgb(174,174,178);
  --d1: rgb(99,99,102);
  
  --l2: rgb(199,199,204);
  --d2: rgb(72,72,74);
  
  --l3: rgb(209,209,214);
  --d3: rgb(58,58,60);
  
  --l4: rgb(229,229,234);
  --d4: rgb(44,44,46);
  
  --l5: rgb(242,242,247);
  --d5: rgb(28,28,30);
}

html {
  box-sizing:border-box;
  *, *:before,*:after { box-sizing:inherit; }

  body {
    margin: 0;
    font-family: system-ui, sans-serif;
    font-size: 1.0rem;
    line-height: 1.5;
    color: light-dark(var(--d4), var(--l2));
    background-color: light-dark(var(--l5), var(--d5));

    header { display: flex; }
    
    main {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    footer { display: flex; }
  }
}