:root {
  
  --color_font: #000000;
  --color_black:#000000;

  --color_darkest_grey:#2c2c2c;
  --color_darker_grey:#494949;
  --color_grey:#878787;
  --color_lighter_grey:#a5a5a5;

  --color_yellow:#FFFFAE;
  
  --color_green:#aee1ae;
  --color_lighter_green:#defdbf;
  
  /* --color_darker_blue:#005F5F;
  --color_blue: #83a598; */

  --color_darker_blue:#00415f;
  --color_blue: #8396a5; 

  --color_darker_red:#5f0000;
  --color_red: #a58383;

  --color_button: #6f6f6f; /*708090*/
  --color_button_hover: #e4deab;

  /* size in px 12, 18, 24, 36, 48, 60, 72 */
  --font_size_s: 12px;
  --font_size_m1: 18px;
  --font_size_m2: 24px;
  --font_size_b: 36px;
}

/* Text SELECTION */
::selection {
  color:var(--color_yellow);
  background: var(--color_darker_blue);
}
/* SCROLLBAR */
::-webkit-scrollbar{background-color:var(--color_darker_grey);width:10px;height:10px;}
::-webkit-scrollbar-thumb{background-color:var(--color_darker_grey);}
::-webkit-scrollbar-corner{background-color:var(--color_darker_grey);}
::-webkit-resizer{background-color:var(--color_darker_grey);}

/* FONT */

@font-face {
  font-family: 'UNC';
  src: url('../font/unc.ttf') format('truetype');
}
@font-face {
  font-family: 'UNCmono';
  src: url('../font/uncmono.ttf') format('truetype');
}

body {
  font-family: 'UNC', Verdana, Geneva, Tahoma;
  font-size: var(--font_size_s);  
  font-weight: unset;
  word-break: break-all;
  overflow-x: hidden;
}

h1 {  
  font-size: var(--font_size_b);
}
h2 {
  font-size: var(--font_size_m2); 
}
h3, p, nav, a {
  font-size: var(--font_size_m1); 
}
h4 {
  font-size: var(--font_size_s); 
}
h1, h2, h3, h4 {
  font-weight: unset;
}
form {
  width: calc(100%);
}

form, input, textarea {
  /* width: 100%; Boese */
  margin: 0px;
  padding: 0px;
  background: inherit;
  font: inherit;
  border: inherit;
  font-size: var(--font_size_m1);
}

textarea 
{
  overflow-x: hidden;
  overflow-y: auto;
  resize: none;
  line-height: 24px;
}

textarea,
input {
  /* width: 100%; Boese */
  padding: 8px 12px 4px 12px; /* 6px 12px; Boese dann kann width nicht korrekt bestimmt werden */
  background-color:var(--color_darkest_grey);
  color: var(--color_blue);
  border-left:12px solid var(--color_darkest_grey);
  text-align: left;
  box-shadow: 0 0 0px;
}
textarea:focus,
input:focus {
  color: var(--color_button_hover);
  outline: none !important;
  border-left: 12px solid var(--color_button_hover);
  box-shadow: 0 0 0px;
}
textarea:disabled,
input:disabled,
textarea:read-only,
input:read-only {
  color: var(--color_button_hover);
  border-left: 12px solid var(--color_darker_grey);
  background-color:var(--color_darker_grey);
}

/* BASE */

* { 
  margin: 0;
  padding: 0;
  color: var(--color_font);
}

img {
  image-rendering: -moz-crisp-edges;
  image-rendering: pixelated;
  margin: 6px;
}

html {
  height: 100%;
  min-height: 100%;
  min-width: 420px;
}

body {
  min-height: 100%;
  height: 100%;
  width: 100%;
  background: var(--color_grey);
  /* https://css-tricks.com/snippets/css/a-guide-to-flexbox/ */
  display: flex;
  /* top to bottom */
  flex-direction: column;
  /* in one line */
  flex-wrap: nowrap;
  /* Position content, top to down */
  justify-content: flex-start;
  align-content: flex-start;
  /* mittig positionieren */
  align-items: center;
}

header {
  width: 100%;
  background-color: var(--color_lighter_grey);
  white-space: nowrap;
  text-align: center;
}

#logo_img {
  margin: 24px 0px 0px 0px;
}

h1 {
  padding: 62px 0px 12px 0px;
}
h2 {
  padding: 24px 0px 18px 0px;
}
h3 {
  padding: 24px 0px 12px 0px;
}
/* Zeitstempel */
h4 {
  padding: 0px 0px 6px 0px;
}
p {
  padding: 3px;
}

/* MAIN CONTENT */

div#content {
  margin: 24px;
  height: 100%;
  /* https://css-tricks.com/snippets/css/a-guide-to-flexbox/ */
  display: flex;
  /* top to bottom */
  flex-direction: column;
  /* in one line */
  flex-wrap: nowrap;
  /* Position content, top to down */
  justify-content: flex-start;
  align-content: flex-start;
  /* mittig positionieren */
  align-items: center;
}

/* NAVIGATION */

a {
  text-decoration-thickness:unset;
  text-decoration-style: none;
  text-decoration: none;
  padding: 8px 16px 4px 16px ;
  background-color: var(--color_button);
  background: var(--color_button);
}
a.active {
  background-color: var(--color_button_hover);
}
a:focus {
  outline: none !important;
  box-shadow: 0 0 0px;
  background-color: var(--color_button_hover);
}
a:hover {
  text-decoration: none;
  background-color: var(--color_button_hover);
  background: var(--color_button_hover);
}

a.submit {
  border-left: 6px solid var(--color_green);
}
a.submit:focus {
  background-color: var(--color_green);
}
a.submit:hover {
  background-color: var(--color_green);
  background: var(--color_green);
}

a.button {
  border-left: 6px solid var(--color_button_hover);
}

div#content_container {
  height: auto;
  width: 100%;
  position: relative;
}

div#navigation_east,
div#navigation_west {
  position: fixed;
  top: 24px;
  display: flex;
  gap: 6px;
  padding: 6px;
  background-color: transparent;
}

div#navigation_nord {
  gap: 6px;
  padding: 12px 0px 4px 0px;
  background-color: transparent;
}

/*
div#navigation_nord {
  top: -6px;
  flex-direction: row;
  right: 6px;
}
*/

div#navigation_east {
  position: absolute;
  right: -6px;
  flex-direction: column;
}
div#navigation_west {
  position: absolute;
  left: -6px;
  flex-direction: column;
}

div#navigation_east a {
  border-right: 12px solid var(--color_button_hover);
  padding-right: 24px;
}
div#navigation_west a {
  border-left: 12px solid var(--color_button_hover);
  padding-left: 24px;
}
div#navigation_nord a {
  margin: 0px 2px;
  border-top: 6px solid var(--color_button_hover);
  padding-left: 24px;
}

/* MESSAGE */

div#base_message {
  margin: 24px;
  padding: 12px;
  font-size: var(--font_size_m1);
  visibility: hidden;
  z-index: 100;
  position: fixed;
  bottom: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--color_green);
  box-shadow: 6px 6px 0px var(--color_blue);
  border: 0px solid var(--color_blue);
}

div#base_message.show {
  visibility: visible;
  -webkit-animation: fadeIn 2s;
  animation: fadeIn 2s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}

/* Text */
p {
  align-items:center;
  justify-content:center;
  vertical-align: middle;
  text-align: center;
}

footer {
  padding: 12px;
}

footer p {
  display: inline-block;
}