:root {
  color-scheme: light dark;

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

html {
  box-sizing:border-box;
  *, *:before,*:after { box-sizing:inherit; }
  
  body {
    margin: 0.0rem auto;
    padding: 0.0rem 0.0rem;
    max-width: 75rem;
    font-size: 1.0rem;
    font-family: system-ui, sans-serif;
    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;

      article {
	section {
	  &[data-type="listicle"] {}
	  &[data-type="grid"] {}
	}
      }
    }

    footer { display: flex; }
  }
}