html {
    background-color: rgb(3, 3, 70);
    font-family:Verdana, Geneva, Tahoma, sans-serif;
  }
  
  body {
   padding: 0px;
   margin: 0px auto;
   width: 800px;
   max-width: 90%;
  
/*
   display: grid;
   grid-template-columns: 1fr;
   grid-template-areas: "head"
                        "nav"
                        "bilder"
                        "footer"
*/
  } 
  
  header {
   margin-top: 20px;
   margin-bottom: 20px;
   color: white;
   grid-area: head;
  }
  
  header a {
    color: white;
    font-weight:lighter;
  }
  @media screen and (min-width: 40em) {
    #welcome {
      height: 300px;
    }
  }
  .mitte {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px;
  }
.bilder {
  display: flex;
  width: 100%;
  object-fit:cover;
}
.bildseite {
  margin: 20px;
  
}
.bildbeschriftung {
  color: white;
  padding-bottom: 20px;
}    
#welcome {
   width: 100%;
   height: 600px;
}

#welcome img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

nav {
  grid-area: nav

}
nav ul {
  list-style: none;
  margin-left: 20px;
  margin-right: 20px;
  color: white;
}

nav ul li a {
  color: white;
}
footer ul li a {
  margin-left: 20px;
  margin-right: 20px;
  font-size: small;
  color: grey;
}

/*
@media (min-width: 40em) {
  body {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas: "head head"
                         "nav nav"
                         "foot foot";
  
  }
}

@media (min-width: 60em) {
  body {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas: "nav head"
                         "nav head"
                         "foot foot";
  
  }
}
*/