* {
  box-sizing: border-box;
}

html,
body {
  color-scheme: light dark;
  background-color: var(--clr-canvas);
  color: var(--clr-canvas-text);
  font-family: 'Noto Sans';
  font-weight: 400;
  font-size: 16px;
  font-style: normal;
  line-height: 1.6;
}

/* major second scale 1.125 */
h1 { font-size: 2.027rem; }
h2 { font-size: 1.802rem; }
h3 { font-size: 1.602rem; }
h4 { font-size: 1.424rem; }
h5 { font-size: 1.266rem; }
h6 { font-size: 1.125rem; }

h1, h2 ,h3 ,h4, h5, h6 {
  line-height: 1.15;
  letter-spacing: -0.022em;
  font-weight: 600;
  margin: 1rem 0;
}

a[href] {
  color: var(--clr-link);
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }

  &:visited {
    color: var(--clr-link);
  }
}

a[href].icon {
  font-size: 1.25em;
  line-height: 1;
  vertical-align: middle;

  &:hover {
    text-decoration: none;
  }

  &:visited {
    color: var(--clr-link);
  }

  &.red,
  &.red:visited {
    color: light-dark(var(--clr-red-400),var(--clr-red-600));
  }
}

hr {
  border: none; 
  height: 1px; 
  background-color: var(--border-color); 
  margin: 2rem 0; 
}