:root {
  --background-color-header: #000000;  /* black */
  --background-color-main:   #000000;  /* black */
  --background-color-footer: #000000;  /* black */
  --text-color-h1:   #41DD53;          /* computer green */
  --text-color-h2:   #41DD53;          /* computer green */
  --text-color-header: #41DD53;        /* computer green */
  --text-color-main: #41DD53;          /* computer green */
  --text-color-footer: #41DD53;        /* computer green */
  --link-color-bright: #555555;        /* dark grey */
  --link-color-dark: #92977B;          /* dark green */
  --nav-up-color-light: #555555;       /* dark grey */
  --nav-up-color-dark: #41DD53;        /* computer green */
}

html {
  scroll-behavior: smooth;
}

html, body {
  margin: 0px;
  padding: 0px;
  width: 100vw;
  height: 100vh;
  font-family: 'Roboto', sans-serif;
  min-width: 400px;
  font-size: 16px;
}

h1 {
  margin-top: 25px;
  color: var(--text-color-h1);
  text-align: center;
}

h2 {
  margin-top: 25px;
  color: var(--text-color-h2);
}

.page-page {
  position: relative;
  display: flex;
  flex-direction: column;
}

.page-header {
  background: var(--background-color-header);
  height: 54px;
  color: var(--text-color-header);
  font-style: italic;
  font-weight: bold;
  font-size: 20px;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 12px;
  padding-left: 16px;
  padding-right: 10px;
  border-bottom: 2px solid var(--nav-up-color-dark);
}


.page-main {
  background: var(--background-color-main);
  color: var(--text-color-main);
  padding: 30px;
}

.page-footer {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  background: var(--background-color-footer);
  color: var(--text-color-footer);
  height: 70px;
  padding-top: 3px;
  padding-left: 30px;
  padding-right: 30px;

  justify-content: center;
  align-items: stretch;
  border-top: 2px solid var(--nav-up-color-dark);
}

.page-footer p, .page-footer div {
    margin-top: 10px;
    margin-bottom: 0px;
    padding-left: 10px;
}

.page-copyright {
    margin-top: 13px;
    padding-top: 2px;
    font-size: 13px;
    white-space: nowrap;
}

.page-footer a {
  color: var(--link-color-bright);
}

.page-main a {
  color: var(--link-color-dark);
}

.page-main-centered-text {
  margin-top: -10px;
  padding: 0px;
  text-align: center;
}

.page-nav-up {
  position: fixed;
  bottom: 30px;
  right: 30px;
  border: 2px solid var(--nav-up-color-dark);
  border-radius: 30px;
  width: 30px;
  height: 30px;
  padding: 0px;
  margin: 0px;
  font-size: 24px;
  font-weight: bold;
  color: var(--nav-up-color-dark);
  background: var(--nav-up-color-light);
}

.page-nav-up:hover {
  background: var(--nav-up-color-dark);
  color: var(--nav-up-color-light);
  cursor: pointer;
}

.page-nav-home {
  position: absolute;
  top: 4px;
  left: 4px;
  padding: 0px;
  border: 1.5px solid var(--text-color-header);
  width: 30px;
  height: 30px;
  font-size: 36px;
  font-weight: bold;
  color: var(--text-color-header);
}

.page-nav-home:hover {
  background-color: var(--text-color-header);
  color: var(--background-color-header);
  border: 2px solid var(--text-color-header);
  cursor: pointer;
}

.image-right-aligned {
  position: absolute;
  right: 20px;
  top: 4px;
  bottom: 0;  
}


/*------------------------------------------------------------------------------  */
/* basiert auf: */
/* https://kulturbanause.de/blog/animiertes-hamburger-icon-html-css-javascript/   */
/* Basis Styling */

.hamburger-icon-container {
  height: 1.3em;
  width: 1.3em;
  top: 6px;
  position: relative;
  cursor: pointer;
  background: var(--text-color-header);
  border:10px solid var(--text-color-header);
  border-radius: 3px;
}

.hamburger-icon,
.hamburger-icon:before,
.hamburger-icon:after {
  content: '';
  position: absolute;
  height: 3px;
  left: 0;
  width: 1.3em;
  background: var(--background-color-header);
  transition: all .3s ease;
}

.hamburger-icon {
  top: 0.55em
}

.hamburger-icon:before {
  top: -0.55em
}

.hamburger-icon:after {
  top: 0.55em
}

/* Darstellung wenn das Close-Icon angezeigt werden soll */

.hamburger-active .hamburger-icon-container {

}

.hamburger-active .hamburger-icon {
  background: transparent;
  transform: rotate(-135deg)
}

.hamburger-active .hamburger-icon:before,
.hamburger-active .hamburger-icon:after {
  top: 0
}

.hamburger-active .hamburger-icon:before {
  transform: rotate(90deg)
}