@import url('https://fonts.googleapis.com/css?family=Indie+Flower|Big+Shoulders+Text:100,300,400,700|Share+Tech+Mono&display=swap');

:root {
  --text-color: #d9dbde;
  --link-color: #a3a8ae;
  --body-bg-color: #161719;
  --page-bg-color: #292c2f;
  --page-shadow-color: rgba(29, 31, 33, 1);
  --page-shadow-blur-radius: 30px;
  --floatingbox-shadow-blur-radius: 10px;
  --floatingbox-shadow-color: rgba(19, 21, 23, 0.8);
  --border-radius: 8px;
  --footer-bg-color: #1d1f21;

  --main-bg-color-3: #3b3e40;
  --main-fg-color-0: #ededed;
  --main-fg-color-2: #a3a8ae;
  --main-fg-color-3: #868989;

}

body {
  font-family: 'Big Shoulders Text', cursive;
  color: var(--text-color);
  background-color: var(--body-bg-color);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200' viewBox='0 0 160 80'%3E%3Cg fill='%23292c2f' fill-opacity='0.2'%3E%3Cpolygon points='0 10 0 0 10 0'/%3E%3Cpolygon points='0 40 0 30 10 30'/%3E%3Cpolygon points='0 30 0 20 10 20'/%3E%3Cpolygon points='0 70 0 60 10 60'/%3E%3Cpolygon points='0 80 0 70 10 70'/%3E%3Cpolygon points='50 80 50 70 60 70'/%3E%3Cpolygon points='10 20 10 10 20 10'/%3E%3Cpolygon points='10 40 10 30 20 30'/%3E%3Cpolygon points='20 10 20 0 30 0'/%3E%3Cpolygon points='10 10 10 0 20 0'/%3E%3Cpolygon points='30 20 30 10 40 10'/%3E%3Cpolygon points='20 20 20 40 40 20'/%3E%3Cpolygon points='40 10 40 0 50 0'/%3E%3Cpolygon points='40 20 40 10 50 10'/%3E%3Cpolygon points='40 40 40 30 50 30'/%3E%3Cpolygon points='30 40 30 30 40 30'/%3E%3Cpolygon points='40 60 40 50 50 50'/%3E%3Cpolygon points='50 30 50 20 60 20'/%3E%3Cpolygon points='40 60 40 80 60 60'/%3E%3Cpolygon points='50 40 50 60 70 40'/%3E%3Cpolygon points='60 0 60 20 80 0'/%3E%3Cpolygon points='70 30 70 20 80 20'/%3E%3Cpolygon points='70 40 70 30 80 30'/%3E%3Cpolygon points='60 60 60 80 80 60'/%3E%3Cpolygon points='80 10 80 0 90 0'/%3E%3Cpolygon points='70 40 70 60 90 40'/%3E%3Cpolygon points='80 60 80 50 90 50'/%3E%3Cpolygon points='60 30 60 20 70 20'/%3E%3Cpolygon points='80 70 80 80 90 80 100 70'/%3E%3Cpolygon points='80 10 80 40 110 10'/%3E%3Cpolygon points='110 40 110 30 120 30'/%3E%3Cpolygon points='90 40 90 70 120 40'/%3E%3Cpolygon points='10 50 10 80 40 50'/%3E%3Cpolygon points='110 60 110 50 120 50'/%3E%3Cpolygon points='100 60 100 80 120 60'/%3E%3Cpolygon points='110 0 110 20 130 0'/%3E%3Cpolygon points='120 30 120 20 130 20'/%3E%3Cpolygon points='130 10 130 0 140 0'/%3E%3Cpolygon points='130 30 130 20 140 20'/%3E%3Cpolygon points='120 40 120 30 130 30'/%3E%3Cpolygon points='130 50 130 40 140 40'/%3E%3Cpolygon points='120 50 120 70 140 50'/%3E%3Cpolygon points='110 70 110 80 130 80 140 70'/%3E%3Cpolygon points='140 10 140 0 150 0'/%3E%3Cpolygon points='140 20 140 10 150 10'/%3E%3Cpolygon points='140 40 140 30 150 30'/%3E%3Cpolygon points='140 50 140 40 150 40'/%3E%3Cpolygon points='140 70 140 60 150 60'/%3E%3Cpolygon points='150 20 150 40 160 30 160 20'/%3E%3Cpolygon points='150 60 150 50 160 50'/%3E%3Cpolygon points='140 70 140 80 150 80 160 70'/%3E%3C/g%3E%3C/svg%3E");
  background-attachment: fixed;
  padding: 30px;
  margin: 0;
}

a {
  color: var(--link-color);
}

a.page {
  text-decoration: none;
  font-weight: 700;
}

#page {
  font-weight: 400;
  border: 2px solid var(--main-bg-color-3);
  background-color: var(--page-bg-color);
  border-radius: var(--border-radius);
  margin: 0 auto 1.8em auto;
  padding: 0.1em 1em;
  -webkit-box-shadow: inset 0px 0px var(--page-shadow-blur-radius) 0px var(--page-shadow-color);
  -moz-box-shadow: inset 0px 0px var(--page-shadow-blur-radius) 0px var(--page-shadow-color);
  box-shadow: inset 0px 0px var(--page-shadow-blur-radius) 0px var(--page-shadow-color);
}

div.impressum {
  font-family: 'Big Shoulders Text', sans-serif;
  font-weight: 300;
}

p {
  font-weight: 400;
}

h1 {
  text-align: center;
  margin-bottom: 3ex;
  font-weight: 700;
}

h2 {
  font-family: 'Indie Flower', cursive;
  margin-top: 4ex;
  border-bottom: solid 1px #ffe9ce;
}

h3 {
  font-family: 'Indie Flower', cursive;
  margin-top: 3ex;
}

.mono {
  font-family: 'Share Tech Mono', monospace;
}

.thin {
  font-weight: 100;
}

.light {
  font-weight: 300;
}

.regular {
  font-weight: 400;
}

.bold {
  font-weight: 700;
}

.left {
  float: left;
}

.right {
  float: right;
}

.footer {
  position: fixed;
  padding: 1ex 2.5em;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--footer-bg-color);
  box-shadow: 0px 0px 10px 0px var(--body-bg-color);
  font-size: smaller;
  font-weight: 100;
}

.columns {
  -webkit-column-count: 3;
  column-count: 3;
  column-rule: #868989 1px solid;
}

table.moodlist {
  margin: 0 auto;
  font-size: 120%;
}

table.list, table.moodlist {
  border-collapse: collapse;
}

table.list, table.moodlist thead, tr:nth-child(even) {
  background-color: var(--footer-bg-color)
}

table.list, table.moodlist td {
  padding: 0.1ex 0.5ex 0.1ex 0.5ex;
}

div.floatingboxcontainer {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}

div.floatingbox {
  padding: 0.8ex;
  margin: 0.8ex;
  -webkit-box-shadow: inset 0px 0px var(--page-shadow-blur-radius) 0px var(--page-shadow-color), 0px 0px var(--floatingbox-shadow-blur-radius) 0px var(--floatingbox-shadow-color);
  -moz-box-shadow: inset 0px 0px var(--page-shadow-blur-radius) 0px var(--page-shadow-color), 0px 0px var(--floatingbox-shadow-blur-radius) 0px var(--floatingbox-shadow-color);
  box-shadow: inset 0px 0px var(--page-shadow-blur-radius) 0px var(--page-shadow-color), 0px 3px var(--floatingbox-shadow-blur-radius) 2px var(--floatingbox-shadow-color);
}

div.floatingbox h3 {
  margin: 0;
}

div.floatingbox ul{
  list-style-type: circle;
  margin-left: 1ex;
  padding-left: 1ex;
}
div.floatingbox li {
  margin-left: 0;
  padding-left: 0ex;
}