.container {
  display: grid;
  width: 1125px;
  /* height: 2000px; */
  gap: 24px;
  grid-template-columns: 300px 1fr 300px;
  grid-template-rows: 80px 1fr 80px;
  grid-template-areas: 
    "hd hd hd"
    "sd-l main sd-r"
    "ft ft ft";
}

@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
      "hd"
      "sd-l"
      "main"
      "sd-r"
      "ft";
  }
}

.container {
  border: 6px ridge;
  border-color: #3da1aa;
  outline: 6px solid;
  outline-color: #1d2830;
  border-radius: 15px;
  margin-top: 90px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 90px;
}


header { 
  grid-area: hd;
  background: #3498db;
  padding: 10px; 
}

main { 
  grid-area: main;
  background: #ffffff; 
  padding: 10px;
}

.sidebar-l { 
  grid-area: sd-l; 
  background: #f4f4f4; 
  padding: 10px; 
}

.sidebar-r { 
  grid-area: sd-r; 
  background: #f4f4f4; 
  padding: 10px; 
}

footer { 
  grid-area: ft; 
  background: #333333;
  padding: 10px; 
}

.scroll {
  border:5px solid #ccc;
  overflow:auto; 
  padding:5px;
  width: 700px;
  height: 937px;
  max-width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.scroll-main {
  border:5px solid #ccc;
  overflow:auto; 
  padding:5px;
  width: 700px;
  height: 402px;
  max-width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

ul.star {
  list-style: none;
}

ul.star li::before {
  content: "★";
}