*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --charcoal: #1C1C2E;
  --charcoal-secondary: #2D2D44;
  --charcoal-lightest: #8484AE;
  --green: #2CE689;
  --dark-green: #18A85C;

  --off-white: #F7F7FC;
  --text-light: #F7F7FC;
  --text-dark: #1C1C2E;
  --text-dark-secondary: #2C2C49;

  --content-padding: 12vw;
  --max-content-width: 70vw;

  --border-radius: 8px;
}

@media (max-width: 2340px) {
  :root {
    --content-padding: 12vw;
    --max-content-width: 80vw;
  }
}

@media (max-width: 1920px) {
  :root {
    --content-padding: 8vw;
    --max-content-width: 90vw;
  }
}

@media (max-width: 1460px) {
  :root {
    --content-padding: 4vw;
    --max-content-width: 90vw;
  }
}

@media (max-width: 1310px) {
  :root {
    --content-padding: 1vw;
    --max-content-width: 95vw;
  }
}

@media (max-width: 1160px) {
  :root {
    --content-padding: 12vw;
    --max-content-width: 100vw;
  }
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-weight: 500;
}

.text-light {
  color: var(--text-light);
}

.text-green {
  color: var(--green);
}

/* Navbar */
#nav-container {
  background-color: var(--charcoal);
}

#nav {
  width: 100%;
  background-color: var(--charcoal);
  height: 68px;
  padding: 0 var(--content-padding);
  max-width: var(--max-content-width);
  display: flex;
  flex-direction: row;
  margin-left: auto;
  margin-right: auto;
  align-items: center;
  color: var(--text-light);
}

#nav-brand {
  text-decoration: none;
  color: var(--text-light);
}

#nav-brand>h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
}

#client-portal {
  font-size: 16px;
  margin-left: auto;
  text-decoration: none;
}

#client-portal:hover {
  text-decoration: underline;
  cursor: pointer;
}

/* Footer */
#footer {
  background-color: var(--charcoal);
  width: 100%;
  padding: 26px var(--content-padding);
  text-align: center;
  color: var(--text-light)
}

#footer>a {
  color: var(--text-light);
  text-decoration: none;
  font-size: 16px;
  font-weight: 400;
}

#footer>p {
  margin: 0;
  margin-top: 8px;
  font-size: 16px;
  font-weight: 600;
}

#footer>#sub-links {
  margin-top: 15px;
}

#footer>#sub-links>a {
  text-decoration: none;
  color: var(--text-light);
}

#footer>#sub-links>a:hover {
  text-decoration: underline;
}