/* =========================================================
   6) BASE ELEMENT STYLING
   ========================================================= */

html {
  background: var(--bg-app);
  color: var(--text-main);
  font-family: var(--font-body);
}

body {
  margin: 0;
  background:
    var(--hero-gradient);
  color: var(--text-main);
  font-family: var(--font-body);
  line-height: 1.55;
}

::selection {
  background: var(--bg-selection);
  color: var(--text-heading);
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space-sm);
  color: var(--text-heading);
  font-family: var(--font-heading);
  line-height: 1.15;
}

p {
  margin: 0 0 var(--space-md);
  color: var(--text-soft);
}

small {
  color: var(--text-faint);
}

strong {
  color: var(--text-heading);
}

a {
  color: var(--link);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--link-hover);
}

a:active {
  color: var(--link-active);
}

a:visited {
  color: var(--link-visited);
}

hr {
  border: 0;
  border-top: var(--border-thin) solid var(--border-soft);
}