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

:root {
  /* colors depend on project */
  --blue-clr: #87dcf8;
  --blue-clr-darker: #5cb8d6;
  --orange-clr: #ff914d;
  --orange-clr-light: #ffbd59;
  --yellow-clr: #ffde59;
  --gray-clr: #d9d9d9;
  --white: white;
  --whitesmoke: whitesmoke;

  --tricolor: linear-gradient(
    45deg,
    var(--orange-clr),
    var(--blue-clr),
    var(--yellow-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;

  justify-content: center;
  align-items: center;
}

.content {
  display: grid;
  place-items: center;

  text-align: center;

  margin-inline: 4vw;

  animation: float 6s ease-in-out infinite;
}

.content img {
  width: 100%;
}

@keyframes float {
  0% {
    transform: translatey(0px);
  }
  50% {
    transform: translatey(-20px);
  }
  100% {
    transform: translatey(0px);
  }
}