:root {
  --firstColor: #186F65;
  --secondaryColor: #B5CB9A;
  --tertiaryColor: #FCE09C;
  --quarternaryColor: #B3533E;

  --lighterFirst: #468c84;
  --rgbFirst: 24, 111, 101;
  --rgbSecondary: 181, 203, 153;
}

body {
  font-family: sans-serif;
  background-color: var(--firstColor, #ffe);
  color: var(--quarternaryColor,#338);
}

#fliesstext {
  color: var(--quarternaryColor,#338);
}

a { color: var(--tertiaryColor,#638); }
a:hover { color: var(--quarternaryColor,#416); }

th, td {
  text-align: left;
  border-bottom: 1px solid var(--tertiaryColor);
  padding: 3px 20px 3px 3px;
}
th { background-color: var(--quarternaryColor); }
th a:hover { color: var(--secondaryColor); }
tr:nth-child(even) {background-color: rgba(var(--rgbFirst),0.1);}
tr:nth-child(odd) {background-color: rgba(var(--rgbSecondary, 0.2));}
tr:hover {background-color: var(--tertiaryColor);}

h1 a { text-decoration: none; }
/* h1 a:hover { text-decoration: underline; } */

#navigation ul {
  list-style: none;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  margin: 0;
  padding: 0;
}
#navigation li {
  float: left;
  margin: 0;
  padding: 0;
}
#navigation li a {
  text-decoration: none;
}
/* #navigation li a:hover { text-decoration: underline; } */
#navigation .menu {
  padding: 10px 20px 14px 20px;
  border-radius: 10px 10px 0 0;
  font-weight: bold;
}
#navigation .menu.active:hover {
  color: var(--lighterFirst, #dcf);
}
#navigation .menu:hover {
  background-color: rgba(var(--rgbSecondary), 0.4);
  color: var(--firstColor);
  /* background-color: #fff2; */
}
#navigation .active {
  color: var(--firstColor, #cbf);
  background-color: var(--secondaryColor, #444) !important ;
}
#maincontainer {
  background-color: var(--secondaryColor, #444);
  margin-top: 5px;
  margin-bottom: 50px;
  border-radius: 10px;
}
#maincontainer.firstFocussed {
  border-radius: 0 10px 10px 10px;
}
#subcontainer {
  display: flex;
  flex-direction: column;
  width: fit-content;
  padding: 20px;
  color: var(--quarternaryColor, #cbf);
}
#subcontainer h2 {
  margin-block-start: 0.2em;
  margin-block-end: 0.5em;
}

.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: normal;
  align-items: normal;
  align-content: normal;
  padding-top: 20px;
}

.flex-items {
  display: inline-block;
  position: relative;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
  background-color: var(--tertiaryColor, #eee);
  margin: 8px 0 8px 8px;
  padding: 0 8px 0 20px;
}
.flex-items a { color: var(--firstColor); }
.flex-items a:hover { color: var(--quarternaryColor); }
.flex-items-small {
  display: block;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  /* background-color: #eee; */
  border: 3px solid var(--tertiaryColor, #eee);
  margin: 8px;
  padding: 0 15px;
}
.plusbutton {
  text-decoration: none;
  background-color: var(--quarternaryColor, #338);
  color: var(--tertiaryColor, white);
  border-radius: 300px;
  padding: 0.2em 0.45em;
}
.plusbutton:hover {
  background-color: var(--tertiaryColor, white);
  color: var(--quarternaryColor, #338);
}
.closex {
  position: absolute;
  top: 7px;
  right: 10px;
}
.closex a {
  text-decoration: none;
}
select {
  font-size: 1em;
  margin-bottom: 20px;
  border: none;
  background-color: #fff6;
  padding: 3px;
}

#randombutton {
  display: grid;
  padding: 25px;
  text-align: center;
  font-size: 5em;
}
#randombutton a {
  text-decoration: none;
  color: var(--quarternaryColor, #cbf);
}
/* #randombutton a:hover { color: var(--tertiaryColor, #dcf); } */
@keyframes shake {
  0% {transform: rotate(0deg);}
  55% {transform: rotate(-14deg);}
  60% {transform: rotate(12deg);}
  65% {transform: rotate(-10deg);}
  70% {transform: rotate(8deg);}
  75% {transform: rotate(-6deg);}
  80% {transform: rotate(4deg);}
  85% {transform: rotate(-2deg);}
  90% {transform: rotate(0deg);}
  100% {transform: rotate(0deg);}
}
#randombutton a:hover {
  color: var(--tertiaryColor, #dcf);
  /* color: var(--firstColor, #dcf); */
  display: inline-block;
  animation: shake 1.5s infinite;
}

#kontakt {
	position: fixed;
	bottom: 0px;
	right: 0px;
	width: 100%;
	z-index: 5000;
	text-align: right;
  /* background-color: #eed; */
	/* background-color: #fff3; */
  background-color: var(--lighterFirst);
	padding: 10px;
}

#kontaktdetails {
	position: absolute;
	bottom: 0px;
	right: 0px;
	background-color: var(--lighterFirst);
  color: var(--tertiaryColor);
	padding: 40px 10px 10px 100px;
}