:root {
  /* font size */
  --font-size: clamp(16px, 1.5vw, 24px);
  /* — palette — */
  --color-abyss: #0a0930;
  --color-deep: #00204a;
  --color-ocean: #003d66;
  --color-current: #005570;
  --color-lagoon: #006e75;
  --color-seafoam: #2a9e8a;

  /* — neutrals — */
  --color-off-black: #0d0f14;
  --color-off-white: #f0f4f8;

  /* font family*/
  --font-family: "plus jakarta Sans", system-ui, sans-serif;
  /* background colors*/
  --background-color: var(--color-abyss);

  /* text color */
  --text-color: var(--color-off-white);

  /* a color */
  --a-color: var(--color-off-white);
  --a-hover-color: var(--color-seafoam);

  /* button settings */
  --button-color: var(--color-off-black);
  --button-radius: 12.5px;
  --button-shadow: 2px;
  --button-shadow-color: var(--color-ocean);

  /* hero  settings*/
  --hero-image-show: inline; /* inline or none */
  --hero-solid-show: none; /* block or none*/
  --hero-image-opacity: 10%;
  --hero-solid-color: var(--background-color);
  --hero-text-less: #a9acae;

  /* navbar settings */
  --navbar-background-color: var(--color-deep);
  --navbar-a-font-size: 1rem;
  --navbar-a-important-font-size: 1.25rem;
  --navbar-a-important-font-wight: 600;
}

html,
body {
  background-color: var(--background-color);
  color: var(--text-color);
  font-size: var(--font-size);
  font-family: var(--font-family);
}
a {
  text-decoration: none;
  color: var(--a-color);
}
a:hover {
  text-decoration: underline;
  color: var(--a-hover-color);
}