:root {
  --field-background:color(display-p3 0.9 0.9 0.9);
  --field-border:color(display-p3 0.343 0.347 0.35);
  --field-border-error:color(display-p3 1 0.373 0);
  --outline-color:color(display-p3 1 0.373 0 / 0.5);
  --yellow-hover:color(srgb 0.98 0.7921 0.2401 / 0.37)

}
@media(prefers-color-scheme:dark) {
  :root {
    --field-background:color(display-p3 0.197 0.197 0.205);
    --field-border:color(display-p3 0.825 0.825 0.825);
    --field-border-error:color(display-p3 1 0.373 0);
    --outline-color:color(display-p3 1 0.373 0 / 0.5);
    --yellow-hover:color(srgb 0.98 0.7921 0.2401 / 0.37)
  }
}

#overview {
  padding-top:10px;
}
@media(min-width:530px) {
  #overview {padding-top:30px;}
}


#contact-form form {
  font-size:.85em;

  display:flex;
  flex-direction:column;
  gap:1rem;
}
#contact-form input, #contact-form select, #contact-form textarea, #reason {
  background-color:var(--background-primary);
  border:2px solid var(--field-border);
  border-radius:8px;
  color:var(--text-primary);
  font-size:1em;
  padding:0.5rem;
}
#contact-form input:placeholder-shown, #contact-form select:placeholder-shown, #contact-form textarea:placeholder-shown {
  background-color:var(--field-background);
}
#contact-form input:focus, #contact-form select:focus, #contact-form textarea:focus {
  background-color:var(--background-primary);
  border-color:var(--field-border-error);
  outline:3px solid var(--outline-color);
  outline-offset:0;
}
#contact-form textarea {
  resize:vertical;
  line-height:1.5em;
}
#reason {
  display:flex;
  flex-flow:column;
  justify-content:stretch;
  padding:4px;
  gap:5px;
}
#reason label {
  border-radius:4px;
  cursor:pointer;
  padding:calc(.5rem - 3px);
  text-align:center;
}
@media(min-width:768px) {
  #reason {flex-flow:row;}
  #reason label {width:33%;}
}
#reason label:has(:checked) {
  background-color:var(--header-background);
  color:black;
  font-weight:700;
}
#reason label:not(:has(:checked)):hover {
  background-color:var(--yellow-hover);
  color:var(--text-strong);
}
.error-message {
  display:none;
  color:var(--field-border-error);
  font-size:0.9rem;
}
.error + .error-message {
  display:block;
}
#contact-form input.error, #contact-form select.error, #contact-form textarea.error {
  border:2px solid var(--field-border-error);
}
#contact-form button {
  background-color:var(--header-background);
  max-width:max(33%, 240px);
}
#contact-form button[disabled] {
  background:gray!important;
  cursor:not-allowed;
}
#messageSent {
  text-align:center;
  font-size:1.2rem;
  color:green;
}
#spamWarning {
  background-color:var(--paper-color);
  border:1px solid var(--field-border-error);
  border-radius:16px;
  color:var(--text-primary);
  text-align: left;
  margin:2rem auto;
  padding:20px;
  max-width: 480px;
}
#spamWarning h4 {
  font-size: 1.4rem;
  margin: 0.3rem 0 0.6rem;
}