:root {
  --main-dark-color: #101214;
  --secondary-dark-color: #161a1d;
  --tertiary-dark-color: #333;
}

body {
  font-family: "Lora", serif;
  background-color: var(--main-dark-color);
  color: #f1f1f1;
}

form textarea {
  min-height: 100px !important;
}

form .form-control {
  font-family: var(--bs-font-sans-serif);
  background-color: var(--tertiary-dark-color);
  border: none;
  color: #f1f1f1;
}

form label {
  font-family: var(--bs-font-sans-serif);
  font-weight: 700;
}

.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-control:focus ~ label {
  color: #f1f1f1;
  font-weight: 700;
}

.form-floating > .form-control:not(:placeholder-shown) ~ label::after,
.form-floating > .form-control:focus ~ label::after {
  background-color: transparent;
}

form .form-control::placeholder {
  color: #f1f1f1;
}

form .form-control:focus {
  background-color: var(--tertiary-dark-color);
  box-shadow: none;
  color: #f1f1f1;
}

.products-container .inner {
  background-color: var(--secondary-dark-color);
}

.products-container img {
  width: 100%;
  height: 150px;
  object-fit: contain;
}

.error {
  padding-top: 8px;
  font-size: 14px;
  color: #ee0024;
}

.error::before {
  content: "*";
}