/* first reset some styles */
button,
input[type="submit"],
input[type="reset"] {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  /* font: inherit; */
  cursor: pointer;
  outline: inherit;
}

html {
  --scrollbarBG: white;
  --thumbBG: lightgrey;
  height: 100%;
  width: 100%;
}

:root {
  /* Font Sizes */
  --font-size: calc(0.1rem + 0.95vw);
  --font-size-medium: calc(var(--font-size) * 2);
  --font-size-big: calc(var(--font-size) * 4);
  --font-size-menu: calc(var(--font-size) * 1.5);
  --font-size-small: calc(var(--font-size) * 0.75);

  --line-height: 1.33;
  --line-height-medium: 1.05;
  --line-height-big: 0.9;
  --line-height-small: 1.2;

  /* Colors */
  --lightgray: rgb(208, 208, 208);
  --main-background: white;
  --primary-color: #e6331f;
  --primary-color-rgb: 230, 51, 31;
  --grid-color: #e6331fbf;
  --primary-color-shadow: #e6331fbf;
  --inactive-color: #999999;

  /* Black Box over headings. */
  --black-box-size: var(--font-size);
  /* Layout variables  */
  --main-col-width: 70%;
  /* Left navigation/menu layout */
  --menu-header-height: 4em;
  --menu-filter-header-height: 50px;
  --menu-padding: 50px;
  --menu-width: 57%;
  --share-bar-height: 3em;

  /** Style */
  --border-width: 0.5px;
  --box-shadow-red: rgba(var(--primary-color-rgb), 0.3) 5px 5px 5px;

  /** Animation */
  --default-transition-time: 0.2s;

  --vw-multiplier: 1; /* we use this multiplier to calculate the font position (from top) dependent on the width of the vw. because we are switching layouts for mobile (one time menu next to it, and for mobile not) we use this trick to calculate the positions with */
  --vh: 1vh;

  --hero-height: 15vh;

  -moz-font-feature-settings: "onum";
  -webkit-font-feature-settings: "onum";
  font-feature-settings: "onum";
  scrollbar-width: thin;
}

@media only screen and (max-width: 800px) {
  :root {
    --vw-multiplier: 1.3;
    --menu-header-height: 50px;
    --font-size: calc(0.8rem + 0.2vw);
    --font-size-medium: calc(var(--font-size) * 1.4);
    --font-size-big: calc(var(--font-size) * 2.66);
    /* --font-size-big: calc(var(--font-size-medium) * 1.43); */
    /* --font-size: 15px;
    --font-size-medium: 28px;
    --font-size-big: 40px; */
  }
}

aside::-webkit-scrollbar,
main::-webkit-scrollbar {
  width: 8px;
}
aside,
main {
  scrollbar-width: thin;
  scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}
aside::-webkit-scrollbar-track,
main::-webkit-scrollbar-track {
  background: var(--scrollbarBG);
}
aside::-webkit-scrollbar-thumb,
main::-webkit-scrollbar-thumb {
  background-color: var(--thumbBG);
  border-radius: 20px;
  border: 1px solid var(--thumbBG);
}

* {
  scroll-behavior: smooth;
}

body,
h4 {
  overflow: hidden;
  height: 100%;
  width: 100%;
  font-family: halyard-text, sans-serif;
  font-weight: 400;
  font-size: var(--font-size);
  line-height: var(--line-height);
  -moz-font-feature-settings: "ss03", "ss18"; /* low-level (old Firefox)      */
  -webkit-font-feature-settings: "ss03", "ss18"; /* low-level (old Webkit)       */
  font-feature-settings: "ss03" on, "ss18" on; /* low-level (all new browsers) */
}

h1,
h2.header-one {
  font-family: halyard-display, sans-serif;
  font-weight: 700;
  font-size: var(--font-size-big);
  line-height: var(--line-height-big);
  -moz-font-feature-settings: "ss03", "ss18"; /* low-level (old Firefox)      */
  -webkit-font-feature-settings: "ss03", "ss18"; /* low-level (old Webkit)       */
  font-feature-settings: "ss03" on, "ss18" on; /* low-level (all new browsers) */
}

.header-white-background {
  position: relative;
  z-index: 4;
  width: max-content;
  padding-left: 0;
  margin-left: 0;
  word-break: break-all;
  width: max-content;
  background-color: white;
}

h2,
.header-two,
h3 {
  font-family: halyard-display, sans-serif;
  font-weight: 300;
  font-size: var(--font-size-medium);
  line-height: var(--line-height-medium);
  -moz-font-feature-settings: "ss03", "ss18"; /* low-level (old Firefox)      */
  -webkit-font-feature-settings: "ss03", "ss18"; /* low-level (old Webkit)       */
  font-feature-settings: "ss03" on, "ss18" on; /* low-level (all new browsers) */
}
h2 > strong,
h3 > strong,
h4 > strong {
  font-weight: 700;
}

strong {
  font-family: halyard-display, sans-serif;
  font-weight: 700;
  /* font-size: 1.05em; */
}

.with-square::before {
  content: "";
  position: absolute;
  transform: translate(1px, calc(-1.1 * var(--font-size)));
  background: black;
  width: var(--black-box-size);
  height: var(--black-box-size);
}

h2.with-square,
h3.with-square {
  padding-top: calc(var(--black-box-size) * 2);
  margin-bottom: 0;
}

.stack {
  --space: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.stack > * {
  margin-top: 0;
  margin-bottom: 0;
}

.stack > * + * {
  margin-top: var(--space);
}

.tag {
  font-family: halyard-text, sans-serif;
  font-weight: 400;
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  vertical-align: super;
  padding: 0 0.2em;
  border: var(--border-width) solid var(--primary-color);
  color: var(--primary-color);
  white-space: nowrap;
  width: -moz-fit-content;
  height: -moz-fit-content;
  -moz-font-feature-settings: "ss03", "ss18"; /* low-level (old Firefox)      */
  -webkit-font-feature-settings: "ss03", "ss18"; /* low-level (old Webkit)       */
  font-feature-settings: "ss03" on, "ss18" on; /* low-level (all new browsers) */
}

blockquote {
  font-size: var(--font-size-medium);
  color: black;
  margin: 0px;
  hyphens: auto;
  line-height: var(--line-height-medium);
  margin: 1em 0px;
}

.badge {
  --size: 1rem;
  position: absolute;
  width: var(--size);
  height: var(--size);
  padding: 0px;
  margin: 0px;
  margin-left: 0.1rem;
  background: var(--primary-color);
  color: white;
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
  line-height: calc(var(--size) - 1px);
  border-radius: 50%;
}

.caption,
.references,
.copyright,
figcaption,
.references > *,
.footnote {
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
}

.caption > .tag,
.footnote > .tag {
  color: var(--inactive-color);
}

.sub-category.tag {
  border: var(--inactive-color);
  border-style: solid;
  border-width: 1px;
}

a,
a:visited {
  color: black;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* a.referral > div::before {
  content: "";
  position: absolute;
  transform: translate(0px, 1.4em);
  background: var(--grid-color);
  width: 100%;
  height: 2px;
  box-shadow: 0.25vw 0.25vw 0.5vw var(--primary-color-shadow);
} */

a.referral {
  text-decoration: none;
}

a.referral > div {
  position: relative;
  width: fit-content;
  display: inline-block;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--grid-color);
  -moz-text-decoration-color: var(--grid-color);
}

a.referral:hover > div {
  color: var(--grid-color);
}

a.referral > img {
  height: 2em;
  vertical-align: middle;
}

footer {
  width: 100%;
  padding: 0 calc(1vw + 5%);
  padding-bottom: 100px;
  margin: auto;
}

/* Hide scrollbar for Chrome, Safari and Opera */

.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.hide-scrollbar {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

/* Underline Links in Statoin Text */
.station div p a {
  text-decoration: underline;
}

@media only screen and (max-width: 800px) {
  h2,
  .header-two,
  h3 {
    font-size: var(--font-size-medium);
    line-height: 1;
  }

  body,
  h4 {
    font-size: var(--font-size);
    line-height: 1.23;
  }

  h1,
  h2.header-one {
    font-size: var(--font-size-big);
    line-height: 1.05;
  }

  .caption,
  .footnote {
    font-size: 12px;
    line-height: 1.2;
  }
}

* {
  box-sizing: border-box;
}