:root {
  --active-brightness: 0.85;
  --border-radius: 3px;
  --box-shadow: 1px 1px 1px;
  --color-accent: #118bee15;
  --color-bg: #bc9958;
  --color-bg-secondary: #f7f2eb;
  --color-link: #2563eb;
  --color-secondary: #920de9;
  --color-secondary-accent: #920de90b;
  --color-shadow: #f4f4f411;
  --color-table: #2563eb;
  --color-text: #333;
  --color-text-light: #eee;
  --color-headings: #2c5573;
  --color-text-secondary: #999;
  --color-success: #166534;
  --color-error: #991b1b;
  --font-family: "Open Sans", "Lucida Grande", "Lucida Sans Unicode",
    "Lucida Sans", Tahoma, sans-serif;
  --font-family-headings: RockwellStd, sans-serif;
  --hover-brightness: 1.2;
  --hover-contrast: 1.8;
  --transition-duration: 0.1s;
  --justify-important: center;
  --justify-normal: left;
  --line-height: 1.5;
  --width-card: 320px;
  --width-card-medium: 460px;
  --width-card-wide: 800px;
  --width-content: 1400px;
  --width-main: 990px;
}

@font-face {
  font-family: "RockwellStd";
  src: url("../fonts/2C486E_0_0.eot");
  src: url("../fonts/2C486E_0_0.eot?#iefix") format("embedded-opentype"),
    url("../fonts/2C486E_0_0.woff") format("woff"),
    url("../fonts/2C486E_0_0.ttf") format("truetype");
}

body {
  background-image: linear-gradient(to bottom,
      var(--color-bg-secondary) 0%,
      var(--color-bg) 100%);
  font-size: 16px;
}

main {
  margin: 0 auto;
  padding: 1rem;
  max-width: var(--width-main);
  min-height: 55vh;
}

main:before {
  content: "";
  background: url(../images/phoenix-main-sprite.png) 50% 0 no-repeat;
  height: 70px;
  display: block;
  margin-bottom: 30px;
}

header,
footer {
  padding: 0;
  max-width: 100vw;
}

nav {
  margin: 0 auto;
  max-width: var(--width-main);
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-family-headings);
  color: var(--color-headings);
  font-weight: 400;
}

h1 {
  font-size: 30.4px;
  text-align: center;
}

ol li,
ul li {
  padding: 0;
}

button {
  color: var(--color-text-light);
  transition-duration: var(--transition-duration);
}

button:hover {
  filter: contrast(var(--hover-contrast));
  transition-duration: var(--transition-duration);
}

a {
  font-weight: inherit;
  text-decoration: transparent;
  transition-duration: var(--transition-duration);
}

a:hover {
  text-decoration: underline;
  filter: none;
  transition-duration: var(--transition-duration);
}

main form {
  max-width: var(--width-main);
  min-width: var(--width-card);
  width: 70vw;
  margin: 2em auto;
}

main form label {
  margin-bottom: 0.5rem;
}

main form label[for]:has(+ input:required):after,
main form label[for]:has(+ select:required):after,
main form label[for]:has(+ textarea:required):after {
  content: " *";
  color: var(--color-error);
}

.message {
  padding: 1rem;
  border-radius: var(--border-radius);
  margin-bottom: 1rem;
}

.success {
  color: var(--color-success);
  border: 1px solid var(--color-success);
}

.error {
  color: var(--color-error);
  border: 1px solid var(--color-error);
}

.error-detail {
  font-size: 0.875rem;
  margin-top: 0.5rem;
}

.error-message {
  color: var(--color-error);
}

/** Admin  Login **/
form.admin-login {
  text-align: center;
}