/* https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Syntax#Guter_CSS-Stil
https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid
 */
html {
    font-family: 'Amazon Ember', 'Open Sans', sans-serif;
    /* background-color: gray; */
    background-image:
    linear-gradient(to right, rgba(0, 0, 0, 0.7), rgb(255, 255, 255, 1), rgba(0, 0, 0, 0.7)),
    url(/images/background00.png)
    ;
    background-repeat: repeat;
    background-attachment: fixed;
    background-blend-mode: overlay;
}

/* =========== NORMALISIERUNG ===========*/
ul, ol, li, dl, dt, dd {
  display: block;
  padding: 0;
  margin: 0;
}
li {
  display: list-item; 
  margin-left: 2em;
}

/* =========== CSS ===========*/
body {
    width: 60em;
    margin-left: auto;
    margin-right: auto;    
}

* {
    box-sizing: border-box;
}

.grid-main-container {
    display: grid;
    grid-template-columns: auto auto auto auto auto auto auto auto;
    background-color: rgba(10, 10, 10, 0.8);
    padding: 20px;
    gap: 20px;    
}
  .grid-main-container > div {
    background-color: rgba(0, 0, 0, 0.5);
    padding: 20px;
    text-align: center;
    color: #fde6ca;;
  }
  .grid-header {
    grid-column-start: 1;
    grid-column-end: 9;
  }
  .grid-menu {
    grid-column-start: 1;
    grid-column-end: 3;
  }
  .grid-main {
    grid-column-start: 3;
    grid-column-end: 7;
  }
  .grid-right {
    grid-column-start: 7;
    grid-column-end: 9;
  }
  .grid-footer {
    grid-column-start: 1;
    grid-column-end: 9;
  }

  h1 {
    color: #fde6ca;
  }
  .form-element {
    text-align: left;
    padding-bottom: 7px;
    font-size: 1.1em;
    color: #fde6ca;
  }
  select {
    background-color: #fde6ca;
    float: right;
    height: 2em;
    width: 77%;
  }
  input {
    background-color: rgb(197, 151, 104);
    float: right;
    height: 2em;
    width: 77%;
  }
    button {
      background-color: rgb(197, 151, 104);
      border: none;
      color: white;
      padding: 16px 32px;
      text-decoration: none;
      margin: 4px 2px;
      cursor: pointer;
    }

  /* ========= Menü horizontal ========= */
  .top-nav {
    /* overflow: hidden; */
    float: right;
  }
  .top-nav a {
    font-size: 0.7em;
    background-color: #d4c4e0;
    color: #6a3f8b;
    text-align: center;
    padding: 6px 20px;
    text-decoration: none;
    /* float: right; */
  }
  .top-nav a:hover {
    background-color: #6a3f8b;
    color: #d4c4e0;
  }
  .top-nav > ul, li {
      list-style-type: none;
      position: sticky;
      
      /* margin: 0;
      padding: 0; */
      display: inline;

      /* background-color: #6a3f8b; */
      text-transform: uppercase;
    }