:root {
    --bs_green: #cfe7cf;
    --bs_dark_green: darkgreen;
    --input_required: lightblue;
    --header_text: white;
    --footer_text: black;

    --container_ueberschrift: whitesmoke;
    --container_shadow: #0000004d;

    --button_background: var(--bs_green);
    --button_hover: #214b69;
    --button_text: white;

    --cookie_yes_button: green;
    --background_unfocus: #303030cb;

    --password_good: green;
    --password_bad: red;
    --password_message: black;
    --password_message_background: #f1f1f1;

    --menu_gray: #707070;
 
    --menu_a_hover: #f1f1f1;
    --user_menu_text: #707070;
    --user_menu_hoover: #acacac;

    --dark_body: #323232;
    --dark_menu_background: rgba(16, 55, 39, 0.341);
    --dark_menu_a_color: #808080;
    --dark_container: #2c2c2c;
    --dark_container_border: var(--bs_green);
    --dark_cookie_background: #1a1a1a;
    --dark_text: #cccccc;
    --dark_login_input_background: #323232;
    --dark_db_gray_row: #646464;

    --light_body: white;
    --light_menu_background: rgba(0, 109, 64, 0.341);
    --light_menu_a_color: black;
    --light_container: white;
    --light_container_border: black;
    --light_cookie_background: white;
    --light_text: black;
    --light_login_input_background: white;
    --light_db_gray_row: lightgray;

}

html, body {
    height: 100%;
}

body {
	display: flex;
	flex-direction: column;
	margin: 0px;
}

h1, h3, h4 {
	color: green;
}

h1 {
	margin-bottom: 10px;
}

p {
	margin-top: 5px;
	margin-bottom: 5px;
}

a {
	color: #008000C0;
}

.cookie_div {
	display: flex;
	flex-direction: column;
    justify-content: center;
	position: absolute;
    align-items: center;
	width: 100%;
	height: 100%;
	background-color: #303030cb;
}

.cookie_banner {
	width: fit-content;
	height: fit-content;
	padding: 10px;
	background-color: white;
}

.cookie_banner p {
	font-size: larger;
	font-weight: bold;
}

#cookies_no {
	border: none;
  	padding: 10px 20px;
  	margin: 10px 0 0 10px;
	background: none;
}

#cookies_no:focus,
#cookies_no:hover {
	cursor: pointer;
}

#cookies_yes {
	border: none;
 	padding: 10px 20px;
 	margin: 10px 0 0 10px;
	background: green;
	opacity: 0.8;
}

#cookies_yes:focus,
#cookies_yes:hover {
	cursor: pointer;
	opacity: 1;
}

textarea {
	resize: none;
}

img.index {
	border: 1px solid;
	object-fit: content;
}

.header {
	position: sticky;
	top: 0px;
	background-color: #cfe7cf;
}

#index.top-centered {
	float: none;
	position: relative;
	display: flex;
	flex-direction: column;
	font-size: small;
	align-items: center;
}

#non_index.top-centered {
	float: none;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	flex-direction: column;
	font-size: small;
	justify-items: center;
}

.top-centered h1 {
	margin-top: 10px;
	font-variant: titling-caps;
}

.top-centered h2 {
	font-style: italic;
	margin: 0px;
	color: green
}

.top-right {
	float: right;
	right: 5px;
}

.user_button {
	height: 35px;
	width: 35px;
	background-color: #ffffff;
	border-radius: 50%;
	margin-right: 5px;
	margin-bottom: 5px;
	display: grid;
}

.user_button:hover {
	background-color: #acacac;
}

.user_menu_text {
	color: #707070;
	font-size: 18px;
	font-weight: bold;
	position: relative;
	margin-top: 7px;
	justify-self: center;
}

.main_menu_button_lines {
	width: 35px;
	height: 5px;
	background-color: #707070;
	margin: 3px 0;
}

.menu_icon {
	width: 18px;
}

/*------------------------ user menu ------------------------*/
.user_menu {
	height: fit-content; /* height */
	width: 250px; /* 250px width - change this with JavaScript */
	position: fixed; /* Stay in place */
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
	z-index: 10; /* Stay on top */
	top: 45px; /* Stay at the top */
	right: -250px;
	overflow-x: hidden; /* Disable horizontal scroll */
	padding-top: 0px; /* Place content 40px from the top */
	padding-bottom: 20px;
	transition: 1s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* 0.5 second transition effect to slide in the user menu */
  }
  
  /* The navigation menu right */
  .user_menu a {
	padding: 8px 8px 8px 32px;
	text-decoration: none;
	font-size: 25px;
    font-weight: bold;
	display: block;
	transition: 0.3s;
  }

  .user_menu p {
	padding: 8px 8px 8px 32px;
	text-decoration: none;
	font-size: 25px;
	display: block;
	transition: 0.3s;
  }
  
  /* When you mouse hover the user menu links, change their color */
  .user_menu a:hover {
	color: var(--menu_a_hover);
  }
  
  /* On smaller screens, where height is less than 450px, change the style of the user_menu (less padding and a smaller font size) */
  @media screen and (max-height: 450px) {
	.user_menu {padding-top: 15px;}
	.user_menu a {font-size: 18px;}
    .user_menu p {font-size: 18px;}
  }
  
  .user_button {
	height: 35px;
	width: 35px;
	background-color: var(--header_text);
	border-radius: 50%;
	margin-right: 5px;
	margin-bottom: 5px;
	display: grid;
  }

  .user_button:hover {
	background-color: var(--user_menu_hoover);
  }

  .user_menu_text {
	font-size: 18px;
	font-weight: bold;
	margin-top: 7px;
	justify-self: center;
  }



/*------------------------ main menu ------------------------*/
.main_menu {
	height: 100%; /* 100% Full-height */
	width: 300px; /* 0 width - change this with JavaScript */
	position: fixed; /* Stay in place */
	z-index: 10; /* Stay on top */
	top: 0; /* Stay at the top */
	left: -300px;
	overflow-x: hidden; /* Disable horizontal scroll */
	padding-top: 60px; /* Place content 60px from the top */
	transition: 1s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* 0.5 second transition effect to slide in the user_menu */
  }
  
  /* The main menu links */
  .main_menu a {
	padding: 8px 8px 28px 18px;
	text-decoration: none;
	font-size: 25px;
    font-weight: bold;
	display: block;
	transition: 0.3s;
  }

  .main_menu p {
	padding: 8px 8px 28px 18px;
	text-decoration: none;
	font-size: 25px;
	display: block;
	transition: 0.3s;
  }
  
  /* When you mouse hover the main menu items, change their color */
  .main_menu a:hover {
	color: var(--menu_a_hover);
  }
  
  /* On smaller screens, where height is less than 450px, change the style of the main_menu (less padding and a smaller font size) */
  @media screen and (max-height: 450px) {
	.main_menu {padding-top: 15px;}
	.main_menu a {font-size: 18px;}
  }

  .main_menu_button_lines {
	width: 35px;
	height: 5px;
	margin: 3px 0;
  }

  .menu_icon {
	width: 18px;
  }


/*------------------------ login ------------------------*/
.login_textfield {
	border-bottom-color: var(--bs_green);
	border-top-width: 0px;
	border-left-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 3px;
	padding: 10px;
	font-style: italic;
	font-weight: bold;
 }

 .login_textfield:focus {
	outline: none;
 }

  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
  }
 
 .login_button {
 	width: 200px;
 	height: 40px;
 	background-color: var(--bs_green);
    text-align: center;
 	font-size: 16px;
 	text-decoration: none;
 	font-weight: bold;
 	border-radius: 30px;
 }
 
 .login_button:hover {
 	background-color: var(--button_hover);
 	color: var(--button_text);
 }


/*------------------------ Passwort Farben ------------------------*/
/* Add a green text color and a checkmark when the requirements are right */
.valid {
    color: var(--password_good);
  }
  
  /* Add a red text color and an "x" icon when the requirements are wrong */
  .invalid {
    color: var(--password_bad);
  }
  
  /*------------------------ Dark Mode ------------------------*/
  @media (prefers-color-scheme: dark) {
      body {
          background-color: var(--dark_body);
          color: var(--dark_text);
      }
      .container_inhalt,
      .container_inhalt_impressum {
          background: var(--dark_container);
          color: var(--dark_text);
          border: 1px solid var(--dark_container_border);
      }
      #cookies_no {
          color: var(--dark_text);
      }
      .cookie_banner {
          background: var(--dark_cookie_background);
          color: var(--dark_text);
      }
      .login_textfield {
          background-color: var(--dark_login_input_background);
          color: var(--dark_text);
      }
      input:required {
          background: var(--input_required);
      }
      input,
      textarea,
      select {
          background: var(--dark_container);
          color: var(--dark_text);
          -webkit-text-fill-color: var(--dark_text);
      }
      .msg {
          margin: 0 auto;
          text-align: center;
          color: var(--dark_text);
      }
      .user_menu,
      .main_menu {
          backdrop-filter: blur(15px);
          background-color: var(--dark_menu_background);
      }
      .user_menu a,
      .main_menu a {
          color: var(--dark_menu_a_color);
      }
      .user_menu p,
      .main_menu p {
          color: var(--bs_dark_green);
    }
      .user_menu_text {
          color: var(--menu_gray);
      }
      .main_menu_button_lines {
          background-color: var(--menu_gray);
      }
  }
  
  
  /*------------------------ Light Mode ------------------------*/
  @media (prefers-color-scheme: light) {
      body {
          background-color: var(--light_body);
          color: var(--light_text);
      }
      .container_inhalt,
      .container_inhalt_impressum {
          background: var(--light_body);
          color:var(--light_text);
          border: 1px solid var(--light_container_border);
      }
      #cookies_no {
          color: var(--light_text);
      }
      .cookie_banner {
          background: var(--light_body);
          color:var(--light_text);
      }
      .login_textfield {
          background-color: var(--light_login_input_background);
          color: var(--light_text);
      }
      input:required {
          background: var(--input_required);
      }
      .msg {
          margin: 0 auto;
          text-align: center;
          color: var(--light_text);
      }
      .menu_icon {
          filter: invert(100%);
      }
      .user_menu,
      .main_menu {
          backdrop-filter: blur(15px);
          background-color: var(--light_menu_background);
      }
      .user_menu a,
      .main_menu a {
          color: var(--light_menu_a_color);
      }
      .user_menu p,
      .main_menu p {
          color: var(--bs_dark_green);
    }
      .user_menu_text {
          color: var(--light_text);
      }
      .main_menu_button_lines {
          background-color: var(--light_text);
      }
  }

  
/*------------------------ content ------------------------*/
.content {
	display: flex;
	flex-direction: column;
	flex: 1 0 auto;
	text-align: center;
	align-items: center;
	flex-wrap: nowrap;
}

.seite_ueberschrift {
	width: 100%;
}

.check_button {
	width: 200px;
	height: 30px;
	background-color: #cfe7cf;
    text-align: center;
	font-size: 14px;
	text-decoration: none;
	font-weight: bold;
	border-radius: 30px;
}

.check_button:hover {
	background-color: green;
}

.footer {
	height: fit-content;
    color: var(--footer_text);
	background-color: #cfe7cf;
	text-align: center;
	padding: 15px;
	text-decoration: none;
	flex-shrink: 0;
}

.container {
	display: flex;
	flex-direction: column;
	max-width: fit-content;
	margin: 10px;
	border-radius: 8px;
}

.container_ueberschrift {
	display: flex;
    background-color: #cfe7cf;
	color: black;
	border: 1px solid black;
	border-bottom: 0px;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	align-items: center;
	justify-content: center;
	padding-left: 5px;
	padding-right: 5px;
	height: 30px;
}

.container_inhalt {
	display: flex;
	border-top: 0px;
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
	padding: 10px;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.uebernomme_daten {
	text-align: left;
}

.borderfree {
	border-width: 0px;
}

.button {
	flex-direction: row;
}

.anleitung {
	display: flex;
	min-width: -webkit-fill-available;
	align-items: center;
	flex-direction: column;
}

.impressum {
	display: flex;
	min-width: -webkit-fill-available;
	align-items: center;
	flex-direction: column;
}

/* The message box is shown when the user clicks on the password field */
#message {
    background: #f1f1f1;
    color: #000000;
  }
  
  /* Add a green text color and a checkmark when the requirements are right */
  .valid {
    color: green;
  }
  
  /* Add a red text color and an "x" icon when the requirements are wrong */
  .invalid {
    color: red;
  }