:root {
  --primary-color: rgba(27, 135, 108, 1);
  --secondary-color: rgba(145, 197, 179, 1);
  --highlight-color: rgba(152, 183, 227, 0.89);
  --background-color: rgba(235, 235, 235, 0.3);

  --header-height: 60px;

  --project-element-padding: 20px;
  --project-element-horizontal-margin: 1vw;
  --project-spacing-line-vertical-margin: 20px;
}

html {
  font-family: "Montserrat", Arial;
  font-size: 14px;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  padding-top: var(--header-height);
}

a {
  text-decoration: none;
}

.scroll-margin {
  scroll-margin-top: var(--header-height);
}

::-webkit-scrollbar {
  width: 0.7rem;
}

::-webkit-scrollbar-track {
  background: var(--secondary-color);
  border-left: 1px solid rgba(0, 0, 0, 0.7);
}

::-webkit-scrollbar-thumb {
  background-color: var(--primary-color);
  border: 1px solid black;
  border-radius: 5px;
  transition: background-color 0.15s, border-color 0.15s;
}

::-webkit-scrollbar-thumb:active {
  background: var(--secondary-color);
  border: 1px solid black;
}

@media (min-width: 2560px) {
  :root {
    --header-height: 90px;

    --project-element-padding: 30px;
    --project-spacing-line-vertical-margin: 30px;
  }
}

@media (min-width: 3840px) {
  :root {
    --header-height: 120px;

    --project-element-padding: 40px;
    --project-spacing-line-vertical-margin: 40px;
  }
}