html {
  scroll-behavior: smooth;
}

:root {
  --primary-color: #272727;
  --secondary-color: #efd09e;
  --white: #ffffff;
  --black: #000000;
  --grey: #6c6c6c;
  --blue: #014b85;
}

.title {
  font-size: clamp(2.5rem, 5vw, 2.668rem);
  font-weight: 500;
  color: var(--black);
}

h1 {
  font-size: clamp(1.8rem, 5vw, 2.125rem);
  font-weight: 500;
  color: var(--black);
}

h2 {
  font-size: clamp(1.6rem, 5vw, 1.875rem);
  font-weight: 500;
  color: var(--black);
}

h3 {
  font-size: clamp(1.5rem, 5vw, 1.75rem);
  font-weight: 500;
  color: var(--black);
}

p {
  font-size: clamp(1.3rem, 5vw, 1.5rem);
  font-weight: normal;
  color: var(--black);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

.header-container {
  width: 100%;
  height: fit-content;
  margin-top: 150px;
  text-align: center;
}

.form-label {
  font-size: clamp(1rem, 5vw, 1.25rem);
}

.input-error {
  border-color: red;
}

.error-message {
  color: red;
  font-size: 0.9rem;
}

/* Loader css: https://css-loaders.com/bouncing/ */
.loader-container {
  width: 100%;
  height: 100vh;
  position: absolute;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--white);
  transform: translateY(-100px);
}

.loaderHidden {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease;
}

.loader {
  height: 60px;
  aspect-ratio: 2;
  border-bottom: 3px solid #0000;
  background: linear-gradient(90deg, #524656 50%, #0000 0) -25% 100%/50% 3px repeat-x
    border-box;
  position: relative;
  animation: l3-0 0.75s linear infinite;
}
.loader:before {
  content: "";
  position: absolute;
  inset: auto 42.5% 0;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--blue);
  animation: l3-1 0.75s cubic-bezier(0, 900, 1, 900) infinite;
}
@keyframes l3-0 {
  to {
    background-position: -125% 100%;
  }
}
@keyframes l3-1 {
  0%,
  2% {
    bottom: 0%;
  }
  98%,
  to {
    bottom: 0.1%;
  }
}

.to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  cursor: pointer;
}

.to-top a {
  text-decoration: none;
}

.bi-arrow-up-circle-fill {
  font-size: clamp(2rem, 5vw, 2.5rem);
  color: var(--grey);
  transition: color 0.3s;
}

.bi-arrow-up-circle-fill:hover {
  color: var(--secondary-color);
}

.note {
  font-size: clamp(0.9rem, 5vw, 1rem);
  font-style: italic;
  color: red;
  overflow-wrap: break-word;
}

@media screen and (max-width: 750px) {
  .header-container {
    margin-top: 130px;
  }
}