body {
  margin: 0;
  padding: 0;
  font-family: 'Arial', sans-serif;
}

.headerfooter {
  background-color: #000000;
  color: aliceblue;
  position: fixed;
  width: 100%;
  z-index: 10000;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1em;
  top: 0;
}

#name {
  color: aliceblue;
  text-decoration: none;
}

#github {
  text-decoration: none;
  color: aliceblue;
  padding: 10px;
  margin: 0 2em 0 0;
  background-color: #343638;
  text-shadow: 1px 1px 1px slategray;
  border-radius: 5px;
}

.grid-container {
  display: grid;
  grid-template-columns: 15% 85%; 
  grid-template-rows: 1fr;
  grid-template-areas: "GridL GridR";
  height: 100vh;
}

#GridL {
  grid-area: GridL;
  padding: 0;
  border-right: #343638 solid 0.2rem;
}

#GridR {
  grid-area: GridR;
  height: auto;
  background-color: ghostwhite;
  padding: 3em;
  text-align: left;
}

footer {
  display: flex;
  justify-content: space-between;
  text-align: center;
  padding: 10px;
  bottom: 0;
  z-index: 10000;
}

#title {
  text-align: center;
  background-color: #343638;
  color: ivory;
  padding: 2em;
  border-bottom: #343638 solid 0.2rem;
}

#title h1 {
  font-size: 48px;
  margin-bottom: 10px;
  padding-top: 10px;
}


.inhaltsTitel {
  font-size: 54px; 
  color: #000000"
}

.inhalt {
  color: #000000; 
  font-size: 24px;
}

#menu {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  font-family: Verdana;
  list-style-type: none;
  text-align: center;
  margin: 0;
  padding: 1em;
  background-color: cornflowerblue;
  text-shadow: black 2px 3px 4px;
}

.menuelement {
  margin-top: 20px;
  font-size: 20px;
  color: cornsilk;
  cursor: pointer;
}  

.menuelement h2 {
  padding: 1.2em;
}

.menuelement h2:hover {
  background-color: ivory;
  color: black;
  text-shadow: none;
  
}

@media (max-width: 1700px) {
  body {
    margin: 0;
    padding: 0;
    font-family: 'Arial', sans-serif;
    height: 100vh;
  }
  
  #title h1 {
    font-size: 36px;
    margin-bottom: 5px;
    padding-top: 24px;
  }

  .inhaltsTitel {
    font-size: 42px; 
    color: #000000"
  }
  
  .inhalt {
    color: #000000; 
    font-size: 18px;
  }

  .grid-container {
    display: grid;
    grid-template-columns: 1fr; 
    grid-template-rows: 15% 85%;
    grid-template-areas: "GridL" "GridR";
    width: 100%;
    height: auto;
  }

  #GridL {
    grid-area: GridL;
    padding: 0;
    border-right: #343638 solid 0.2rem;
  }
  
  #GridR {
    grid-area: GridR;
    background-color: ghostwhite;
    padding: 3em;
    text-align: center;
    height: 100vh;
  }

  #menu {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    height: 100%;
    text-decoration: none;
    font-family: Verdana;
    list-style-type: none;
    text-align: center;
    margin: 0;
    padding: 0.4em;
    background-color: cornflowerblue;
    text-shadow: black 1.2px 2px 2.8px;
    
  }
  
  .menuelement {
    margin-top: 14px;
    font-size: 18px;
    color: cornsilk;
    cursor: pointer;
  }  
  
  .menuelement h2 {
    padding: 0.8em;
  }
  
  .menuelement h2:hover {
    background-color: ivory;
    color: black;
    text-shadow: none;
  }
}

@media (max-width: 700px) {
  body {
    margin: 0;
    padding: 0;
    font-family: 'Arial', sans-serif;
    height: 100vh;
  }
  
  #title h1 {
    font-size: 24px;
    margin-bottom: 5px;
    padding-top: 24px;
  }

  .inhaltsTitel {
    font-size: 28px; 
    color: #000000"
  }
  
  .inhalt {
    color: #000000; 
    font-size: 14px;
  }

  .grid-container {
    display: grid;
    grid-template-columns: 1fr; 
    grid-template-rows: 10% 90%;
    grid-template-areas: "GridL" "GridR";
    width: 100%;
    height: auto;
  }

  #GridL {
    grid-area: GridL;
    padding: 0;
    border-right: #343638 solid 0.1rem;
  }
  
  #GridR {
    grid-area: GridR;
    background-color: ghostwhite;
    padding: 1.8em;
    text-align: center;
  }

  #menu {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    height: 100%;
    text-decoration: none;
    font-family: Verdana;
    list-style-type: none;
    text-align: center;
    margin: 0;
    padding: 0.3em;
    background-color: cornflowerblue;
    text-shadow: black 0.8px 1.4px 1.7px;
    
  }
  
  .menuelement {
    margin-top: 10px;
    font-size: 8px;
    color: cornsilk;
    cursor: pointer;
  }  
  
  .menuelement h2 {
    padding: 0.5em;
  }
  
  .menuelement h2:hover {
    background-color: ivory;
    color: black;
    text-shadow: none;
  }
}