/*Reset*/
body{color:var(--color-dark-mid)}
em{font-weight:bold;font-style:normal;}

/*Reset - Paragraphs and headings*/
h1{font-weight:500;
  font-size:clamp(1.75rem, 1.75rem + ((1vw - 0.2rem) * 1.948), 3.25rem);
  line-height: 1.2;
  color:var(--color-dark-darkest);}
h2{font-weight:500;
  font-size:clamp(1.75rem, 1.75rem + ((1vw - 0.2rem) * 1.948), 3.25rem);
  line-height: 1.2;
  color:var(--color-dark-darkest);}
h3{font-weight:500;
  font-size:1.38rem;
  color:var(--color-dark-darkest);}

/*Reset - Vertical margin*/
h1:not(.flex *):not(:last-child),
h2:not(.flex *):not(:last-child),
h3:not(.flex *):not(:last-child) {
  margin-bottom: 1rem;
}
p:not(.flex *):not(:last-child), /*no :where needed - higher specificity required to override Tailwind's default margin:0 on p*/
:where(a:not(:last-child)) { /*:where lowers specificity, allowing overriding, such as with mb-0 (used for header logo link)*/
  margin-bottom: 1rem;
}
/*Reset - Lists*/
ol:not(:last-child) { /*no :where needed - higher specificity required to override Tailwind's default margin:0 on lists*/
  margin-bottom: 1rem;
  list-style: decimal;
  padding-left: 1.25rem;
}

/*Reset links*/
a:not(nav a):not(.external-link):not(.button) {
    font-weight: 500;
    color: var(--color-accent-darkest);
    text-decoration-line: underline;
}

/*Reset - Details block*/
details {cursor: pointer;}

/*Spin (rotate) animation*/
.spin {
  display: inline-block;
  width: 1.25rem;height: 1.25rem;
  border: 4px solid #ccc;border-radius: 50%;
  border-top-color: var(--color-accent-darkest);
  animation: 1s linear infinite spin;
  vertical-align: middle;
  margin-left: .75rem;
  margin-right: .75rem;
}

@keyframes spin {
  0% { transform: rotate(0); }
  100% { transform: rotate(360deg); }
}