@import "./hub.css";

:root {
  --theme-body: var(--theme-magenta-body);
  --theme-glare: var(--theme-magenta-glare);
  --theme-main: var(--theme-magenta-main);
  --theme-text: var(--theme-magenta-text);

  --fillable: var(--theme-text);
}

body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-size: 18px;
}

main {
  flex: 1;
  padding: var(--s0);
}

header {
  font-family: var(--font-mono);
  font-weight: bold;
  color: white;
  font-size: 1.2em;
  padding: 1rem;
  text-shadow: -1px 2px black;
}
footer {
  color: white;
  text-shadow: -1px 2px black;
  text-align: center;
  font-style: italic;
  opacity: 0.8;
  padding: 1em;
}

.formSuccess icon-layout {
  font-size: 1.3em;
}

.formSuccess {
  --theme-body: var(--theme-green-body);
  --theme-glare: var(--theme-green-glare);
  --theme-main: var(--theme-green-main);
  --theme-text: var(--theme-green-text);
}

.formError icon-layout {
  font-size: 1.3em;
}

.formError {
  --theme-body: var(--theme-red-body);
  --theme-glare: var(--theme-red-glare);
  --theme-main: var(--theme-red-main);
  --theme-text: var(--theme-red-text);
}