body {
  background-color: rgb(250, 250, 250);
}

nav, nav a {
  color: rgb(250, 250, 250);
}

nav {
  font-family: Catamaran,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background-color: rgb(40, 40, 40);
}

h1 {
    font-size: 1.5em;
    margin: 0.5em;
}

h2 {
    font-size: 1.2em;
}

ul {
  padding: 0;
  list-style: none;
}

li {
  // Top Right Bottom Left;
  margin: 0.2em 0.5em 0.2em 0.5em;
}

a {
  text-decoration: none;
}

a:focus {
  outline: 3px solid;
}

a:hover {
  text-decoration: underline;
}

a:active {
  outline: 2px solid;
}

.a-inherit-color {
  color: inherit;
}

[aria-current] {
  font-weight: bold;
}

.input100 {
  width: 100%;
}

.ul-box {
  padding: 0.2em;
  box-shadow: 0.0em 0.1em 0.1em grey;
}
.li-box {
  padding: 0em 0.2em 0em 0em;
  box-shadow: 0.0em 0.1em 0.1em grey;
}

.center{
    text-align: center;
}

.message{
    text-align: center;
}

.flex-container {
  display: flex;
  flex-flow: row wrap;
}
.flex-container-nav {
}
.flex-container-nav-logo {
    font-size: 1.0em;
}
.flex-container-nav-links {
  justify-content: center;
    font-size: 0.9em;
}
.flex-container-nav-profile {
}

.flex-container-content-center {
  justify-content: center;
}

.flex-container-content-end {
  justify-content: end;
}

.flex-item {
  // Grow Shrink Base;
  flex: 0 1 auto;
  // scretch = equal high over all items in the same row (as high as the highest one);
  align-self: stretch;
  text-align: center;
}

.flex-item-readable {
  // Top Right Bottom Left;
  margin: 0 0.125em 0 0.125em;
}

.flex-item-grow {
  // Grow Shrink Base;
  flex: 1 1 auto;
}

.flex-item-text-behind-svg5 {
    align-self: center;
    max-width: 20em;
    font-size: 1.3em;
}

.flex-item-text-behind-svg3 {
    align-self: center;
    max-width: 20em;
    font-size: 1em;
}

.flex-item-text-behind-svg1 {
    align-self: center;
    max-width: 20em;
    font-size: 1em;
}

.text-input{
    min-width: 20em;
}

.less-important-area {
    background-color: rgb(230, 230, 230);

}

.message_success {
    color:#0f5132;
    background-color: #d1e7dd;
    border-color:#badbcc;
}
.message_info {
    color:#055160;
    background-color:#cff4fc;
    border-color:#b6effb
}
.message_warning {
    color:#664d03;
    background-color:#fff3cd;
    border-color:#ffecb5
}
.message_error {
    color:#842029;
    background-color:#f8d7da;
    border-color:#f5c2c7
}


label {
    font-size: 1.3em;
    vertical-align: middle;
}

.block-app {
    min-height: 20em;
}

.card{
	border: 2px solid;
	border-color:black;
	border-radius: 1em;
	max-width: 20em;
	box-shadow: 0.1em 0.1em 0.1em grey;
}

.grid-container-card{
	display: grid;
	grid:
	  "card-header card-header" 1fr
	  "card-flag-flashcard card-flashcard" 1fr
	  "card-flag-translations card-translations" 5fr
	  "card-footer card-footer"
	  /
	  2em
	  1fr;

	/* gap: 0.5em 0.5em; */
	/* justify-items: center; */
	/* align-items: center; */
	/* justify-content: center; */
	/* align-content: center; */
}

.grid-item-card-header-navigation{
	grid-area: card-header;
	justify-self: stretch;
    align-self:center;
    background-color: rgb(230, 230, 230);
   	border-radius: 0.85em 0.85em 0em 0em;
}

.grid-item-card-flashcard-flag{
	grid-area: card-flag-flashcard;
	justify-self: stretch;
    align-self:stretch;
}

.grid-item-card-flashcard{
	grid-area: card-flashcard;
	justify-self: stretch;
    align-self:stretch;

}

.grid-item-card-translation-flag{
	grid-area: card-flag-translations;
	justify-self: stretch;
    align-self:stretch;
}

.grid-item-card-translation{
	grid-area: card-translations;
	justify-self: stretch;
    align-self:stretch;
}

.grid-item-card-footer{
	grid-area: card-footer;
	justify-self: stretch;
    align-self:center;
    background-color: rgb(230, 230, 230);
   	border-radius: 0em 0em 0.85em 0.85em;
}