@import "./custom-properties.css";
@import "./layout.css";
/* @import "./media.scss"; */
@import "./headings.css";
@import "./typography.css";

html,
body,
fieldset {
  box-sizing: border-box;
  background: var(--palette-body-background);
  color: var(--palette-body-text);
  font-family: var(--font-sans-serif);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6rem;
  margin: 0;
  padding: 0;
  text-rendering: optimizeLegibility;
}

fieldset {
  border: 0;
  padding: 0;
}

details summary::marker {
  display: none;
}

a {
  border-bottom: 1px solid var(--palette-grey);
  color: var(--palette-body-text);
  text-decoration: none;
  transition: all 0.3s ease-in-out;

  &:hover,
  &:focus {
    border-bottom-color: var(--palette-brand-primary);
  }
}

ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sr-only {
  border: 0;
  clip: rect(0 0 0 0);
  color: var(--palette-body-background);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}