:root {
  --clr-bg-1: hsl(8deg 78% 52% / 97%);
  --clr-bg-2: hsl(38deg 100% 99% / 97%);
  --clr-accent-dark: hsl(8deg 78% 42%);
  --clr-accent-light: hsl(8deg 78% 60%);
  --clr-footer: hsl(8deg 78% 74%);
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
  position: relative;
  min-height: 100%;
}

body {
  font-family: "Saira";
}

.bg {
  background-color: var(--clr-accent-dark);
}

.bg-1 {
  box-shadow: inset 0 0 0 100vmax var(--clr-bg-1);
  background-image: url("/images/bg_noise.webp");
}

.bg-2 {
  box-shadow: inset 0 0 0 100vmax var(--clr-bg-2);
  background-image: url("/images/bg_noise.webp");
}

.h1,
.h1,
.h3 {
  font-family: "Oxanium";
}

span.underline-dark {
  text-decoration: underline;
  text-decoration-color: var(--clr-accent-dark);
}

.form-floating>.form-control-plaintext::placeholder,
.form-floating>.form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating>.form-control-plaintext:focus::placeholder,
.form-floating>.form-control:focus::placeholder {
  text-align: start;
}

.footer {
  color: var(--clr-footer);
}

.border-top {
  border-color: var(--clr-accent-dark) !important;
}