1 files changed, 200 insertions, 0 deletions
diff --git a/www/html/style.css b/www/html/style.css
new file mode 100644
index 0000000..cce30b5
--- /dev/null
+++ b/www/html/style.css
@@ -0,0 +1,200 @@
+:root {
+  --primary: #330033;
+  --background-primary: #77cc77;
+  --background-secondary: #99ee99;
+  --background-highlight: #ffcc00;
+  --highlight: #ff0000;
+  --big-font: 1.5rem;
+}
+body {
+  font-family: sans-serif;
+  color: var(--primary);
+  background-color: var(--background-primary);
+  margin: 1rem;
+}
+body::before {
+  content: '';
+  position: fixed;
+  background-image: url("img/Kraniche-oval-4a.png");
+  top: calc(615px/2 + 2rem);
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 465px;
+  height: 615px;
+  background-size: contain;
+  background-repeat: no-repeat;
+  mix-blend-mode: multiply;
+  pointer-events: none;
+  z-index: -1;
+}
+a {
+  color: var(--primary);
+}
+a:hover, a:focus-visible {
+  background-color: var(--background-primary);
+}
+td > table {
+  text-align: center;
+  background-color: var(--background-secondary);
+  border-color: var(--highlight);
+}
+td {
+  border-color: var(--highlight);
+}
+th {
+  color: var(--highlight);
+  background-color: var(--background-highlight);
+  height: var(--big-font);
+  font-size: var(--big-font);
+}
+footer {
+  text-align: center;
+}
+footer nav ul {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 2rem;
+  padding: 0;
+  justify-content: center;
+  list-style: none;
+}
+footer nav a {
+  background-color: var(--background-secondary);
+  padding: 0.5rem;
+  display: block;
+}
+div.table {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: 1rem;
+}
+div.column, section {
+  margin: 2pt;
+  padding: 1.5pt;
+  border: 1pt outset red;
+  flex-basis: 25%;
+  background-color: var(--background-secondary);
+  display: flex;
+  flex-direction: column;
+  gap: 1.5pt;
+}
+div.row {
+  padding: 1rem 0.5rem;
+  border: 1pt inset red;
+  text-align: center;
+}
+div.row:last-child {
+  flex-grow: 1;
+}
+div.row h1, section h1 {
+  color: var(--highlight);
+  font-size: var(--big-font);
+  background-color: var(--background-highlight);
+  padding: 0.5rem;
+  margin: -1rem -0.5rem;
+}
+section h1 {
+  border: 1pt inset red;
+  margin: 0;
+  margin-bottom: -1.5pt;
+}
+div.welcome {
+  background-color: initial;
+  border: initial;
+  flex-basis: 50%;
+  align-self: center;
+}
+div.welcome h1 {
+  background-color: initial;
+  font-variant: small-caps;
+  font-size: 2rem;
+  color: #ff9900;
+}
+.highlight {
+  color: var(--highlight);
+}
+.big, .news {
+  font-size: var(--big-font);
+  font-weight: bold;
+  margin: 0;
+}
+.news {
+  color: white;
+}
+section {
+  background-color: var(--background-secondary);
+  max-width: 50rem;
+  margin: 1em auto;
+}
+section dd, section dt {
+  text-align: left;
+}
+section > dl {
+  margin: 0;
+}
+section > dl > dt {
+  font-size: var(--big-font);
+  font-weight: bold;
+  margin-top: 1.5pt;
+  border: 1pt inset red;
+  border-bottom: none;
+  padding: 1rem;
+  padding-bottom: 0;
+}
+section > dl > dd {
+  margin: 0;
+  border: 1pt inset red;
+  border-top: none;
+  padding: 1rem;
+  padding-left: 2rem;
+}
+section > dl > dt a {
+  text-decoration: none;
+}
+section > dl > dd dt {
+  display: inline;
+}
+section > dl > dd dt:before {
+  content: "";
+  display: block;
+  margin-top: 1rem;
+}
+section > dl > dd dd {
+  display: inline;
+  margin: 0;
+}
+section > dl > dd dd + dd::before {
+  content: ", ";
+}
+section > dl > dd dt:after {
+  content: ":";
+}
+details {
+  margin: 1rem 0;
+}
+@media (width < 50rem) {
+  body {
+    margin: 0 0.5rem;
+  }
+  div.table {
+    flex-wrap: wrap;
+  }
+  div.column {
+    flex-basis: 100%;
+  };
+  section h1 {
+    text-align: center;
+  }
+}
+@media (width > 50rem) {
+  div.column {
+    order: 3;
+  }
+  div.column:nth-child(2) {
+    order: 1;
+  }
+  div.column.welcome {
+    order: 2;
+  }
+}