body{
    display:flex;
    justify-content: center;
      
  }
  .container {
    display: grid;
    width: 100%;
    height: 600px;
    grid-template-columns: 1fr 1fr 400px;
    grid-template-rows: 60px 1fr 1fr 40px;
    grid-gap: 0.3rem;
    grid-template-areas:
        "header header header"
        "content-1 content-1 main"
        "content-2 content-3 main"
        "footer footer footer";
  }
  
  .header{
    grid-area: header;
  }
  .main {
    grid-area: main;
  }
  
  .content-1 {
    grid-area: content-1;
  }
  
  .content-2 {
    grid-area: content-2;
  }
  
  .content-3 {
    grid-area: content-3;
  }
  
  .footer {
    grid-area: footer;
  }
  
  .item {
    box-shadow: 3px 3px rgba(0,0,0,0.19);
    color: #ffffff;
    border-radius: 4px;
    border: 3px solid #171717;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Arial, Tahoma, Verdana;
    font-size: 15px;
    font-weight: normal;
    padding: 20px;
  }
  .header {
    background-color: #3f3f3f;
    color:#41807c;
    font-size:19px;
    font-weight: bold;
  }
  
  .main {
    background-color: #534f59;
  }
  
  .content-1
 {
    background-color: #636363;
    font-size:14px;
  }

  .content-2,
  .content-3 {
    background-color: #636363;
    font-size:13px;
  }
  
  .footer {
    background-color: #3f3f3f;
    color:#41807c;
    font-size:16px;
    font-weight: normal;
  }

  ul.a {
    list-style-type: circle;
  }
  
  ul.b {
    list-style-type: square;
  }