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

:root {
  /* colors depend on project */
  --blue-clr: #3c6f9b;
  --blue-clr-lighter: #578ab7;
  --blue-clr-light: #72b1e8;
  --blue-clr-dark: #17354f;
  --brown-clr: #b5806b;
  --pink-clr: #ba67ab;
  --pink-clr-light: #ffa6ef;
  --pink-clr-dark: #6e3163;
  --white: white;
  --whitesmoke: whitesmoke;

  --tricolor: linear-gradient(
    45deg,
    var(--pink-clr),
    var(--blue-clr),
    var(--brown-clr)
  );

  --text-clr: #666666;
  --text-clr-dark: #333333;

  --bg-clr-dark: #252525;

  --nav-height: clamp(2.5rem, 10vw, 4.5rem);
  --progress-bar-height: clamp(0.375rem, 0.5vw, 0.75rem);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-height, 10rem);

  height: 100%;
}

body {
  /* so the footer sticks to the bottom of page with margin-top: auto; */
  display: flex;
  flex-direction: column;
  min-height: 100%;

  font-family: Roboto, sans-serif;

  position: relative;
}

h1,
h2,
h3,
h4,
p,
a,
li {
  font-family: inherit;
}

/* names of sections */
h3 {
  margin-block: min(2vw, 1rem);

  font-size: min(5vw, 2rem);

  text-transform: uppercase;
  color: var(--blue-clr);
}

p,
li {
  padding-block: min(0.5vw, 0.25rem);

  font-size: min(3.75vw, 1rem);

  line-height: 1.6;
  color: var(--text-clr);
}

@media screen and (min-width: 1600px) {
  :root {
    --nav-height: clamp(2.5rem, 10vw, 6rem);
  }

  /* names of sections */
  h3 {
    font-size: 3rem;
  }

  p,
  li {
    font-size: 1.375rem;
  }
}

a {
  color: var(--pink-clr);
}

a:hover,
a:focus {
  color: var(--pink-clr-light);
}

.hidden {
  display: none;
}