:root {
  --color-primary: rgb(61, 131, 186);
  --color-primary-95: rgba(61, 131, 186, 0.95);
  --color-primary-dark: #33648b;
  --color-primary-darkest: #2a5171;
  --color-accent: #feb900;
  --color-accent-highlight: #ffc732;
  --color-white: #f5f5f5;
  --color-gray: #e7e7e9;
  --color-black: #191919;

  scroll-behavior: smooth;
}

.nav {
  position: relative;
  text-decoration: none;
}

.nav.active {
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 0.25rem;
  text-decoration-thickness: 2px;
}

header {
  transition: background-color 0.5s ease-in-out;
}

header.scrolled {
  background-color: var(--color-primary-95);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
}

html {
  scroll-padding-top: 3.9rem;
  scroll-behavior: smooth;
}

p,
a {
  font-family: "Open Sans", sans-serif;
}

::-webkit-scrollbar {
  width: 0px;
}