.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: footer; }


body {
   font-family: "Courier New", monospace;
    background-image: url("/194133.jpg");
    background-repeat: repeat;
    background-size: 200px 200px;
}

.grid-container {
  display: grid;
  grid-template:
    'header header header header header header'
    'menu main main main main main'
    'footer footer footer footer footer footer';
  grid-gap: 10px;
  padding: 15px;
  margin: 120px;
  margin-top: 50px;
  grid-gap: 10px;
  background-color: rgb(186, 211, 191);
   border-radius: 25px;
}


.image-grid {
  display: grid;
  grid-template-columns: auto auto;
}

.grid-container > div {
  background-color: rgb(5,37,23);
  color: rgb(186, 211, 191);
   font-size: 1.2em;
   padding: 20px;
    border-radius: 25px;
}

a:link {
    color: rgb(186, 211, 191);
  }
  a:visited {
  color: rgb(186, 211, 191);
}
a:hover {
  color: rgb(186, 211, 191);
  text-decoration: none
}

.containerborder {
   height:auto;
   width:100%;
   position:relative;
}

.container {
   height:auto;
   max-height:200px;
   width:100%;
   overflow-y:scroll;
}

ul {
  text-align: left;
}

h3 {
  text-align: left;
}

details {
  border: 1px solid #aaaaaa;
  border-radius: 4px;
  padding: 0.5em 0.5em 0;
}

summary {
  font-weight: bold;
  margin: -0.5em -0.5em 0;
  padding: 0.5em;
}

details[open] {
  padding: 0.5em;
}

details[open] summary {
  border-bottom: 1px solid #aaaaaa;
  margin-bottom: 0.5em;
}

@media screen and (max-width: 1000px) {
  .grid-container {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    margin: 5%;
    overflow: hidden;
    grid-gap: 5px;
 }
 .grid-container > div {
     max-width: 100%;
         overflow: hidden;
 }
}