:root {
  --page: #25354B;
  --panel: #C5C0D8;
  --ink: #30354B;
  --heading: #493A65;
  --accent: #9C344A;
  --violet: #74639A;
  --green: #506A5A;
  --line: #8B84AB;
  --field: #E7E2EE;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  background: var(--page);
  text-align: left;
  font: normal 14px/20px arial, tahoma, verdana, sans-serif;
  color: var(--ink);
  margin: 0;
}
td, tr { font: normal 12px/18px arial, tahoma, verdana, sans-serif; background: transparent; }
b, strong { color: var(--heading); }
i, em { color: var(--violet); font-family: georgia, 'times new roman', serif; }
u { text-decoration: none; border-bottom: 2px solid var(--violet); }
input, textarea, option, select {
  font: 12px/14px arial, tahoma, verdana, sans-serif;
  background: var(--field);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 5px;
}
blockquote {
  display: block;
  background: #DCD5E7;
  border: 1px solid var(--line);
  color: var(--ink);
  margin: 10px 20px;
  padding: 10px 15px;
  max-width: 430px;
}
#content img { margin: 1px; border: 6px solid var(--panel); max-width: calc(100% - 14px); height: auto; }
.alignright { float: right; padding: 5px; }
.alignleft { float: left; padding: 5px; }
h1 {
  font: italic 30px 'century gothic', 'trebuchet ms', tahoma, verdana, sans-serif;
  text-align: right; color: var(--heading); padding: 1px 0 4px 5px;
  margin: 1px 0 12px -2px; letter-spacing: -2px; text-transform: lowercase;
}
h2 {
  font: normal 14px/18px 'century gothic', 'trebuchet ms', tahoma, verdana, sans-serif;
  text-align: left; color: var(--heading); border-left: 30px solid var(--violet);
  padding: 0 0 1px 5px; margin: 15px 0 6px;
  letter-spacing: 2px; text-transform: uppercase;
}
#container {
  width: 814px;
  max-width: calc(100% - 30px);
  margin: 20px auto;
  padding: 7px;
  background: var(--panel);
}
#header { width: 100%; margin: 0 0 12px; padding: 0; border: 0; outline: 0; background: var(--panel); }
#header img { display: block; width: 100%; height: auto; border: 0; outline: 0; margin: 0; padding: 0; }
#nav { position: static; width: 100%; margin: 0 0 16px; padding: 0; background: transparent; }
#nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin: 0; padding: 0; list-style: none; }
#nav li { list-style: none; }
#nav a:link, #nav a:visited {
  display: block; font: normal 11px georgia, 'times new roman', serif;
  color: #F1EDF6; background: var(--heading); padding: 7px 11px;
  letter-spacing: 1px; text-align: center; text-decoration: none;
  text-transform: uppercase; border: 1px solid var(--line);
}
#nav a:hover, #nav a:focus-visible { color: #FFFFFF; background: var(--accent); text-decoration: underline; }
#content { padding: 0 10px 8px; width: auto; text-align: left; background: transparent; }
#footer { margin: 0; padding: 10px 5px; text-align: center; background: transparent; font: normal 12px/14px arial, tahoma, sans-serif; border-top: 1px solid var(--line); }
a:link, a:active, a:visited { color: #684477; text-decoration: underline; letter-spacing: 0; }
a:hover { color: var(--accent); border-bottom: 1px dashed var(--accent); }
@media (max-width: 600px) { #container { max-width: calc(100% - 16px); margin: 8px auto; } #nav ul { gap: 4px; } #nav a:link, #nav a:visited { padding: 6px 8px; } }