html {
    background-color: #ffffff;
    /* use flex to make it take up all vertical space */
    display: flex;
    flex-direction: column;
  }
  
  
  header {
    text-align: center;
  }
  
  .container {
    flex-grow: 1;
    min-height: 100vh;
    padding: 10px;
    margin-top: 20px;
    display: grid;
    grid-template-columns: 200px 3fr 200px; /* Two equal columns */
    gap: 20px; /* Space between columns */
  }
  .content {
    padding: 10px;
  }
  
  
  .heading {
    border: 3px solid #ddd;
    padding: 3px;
  }
  
  
  .sublink {
    width: 170px;
    background-color: #fff;
    list-style-type: none;
    padding: 0;
    margin-left: 10px;
    margin-top: 0px;
    margin-bottom: 0px;
    border-left: 2px solid #eee;
    border-right: 2px solid #eee;
    /* text styles */
    color: #666;
  }
  
  .sublink a {
    text-decoration: none;
    color: #666;
  }
  
  .sublink:last-of-type {
    border-bottom: 2px solid #eee;
    border-radius: 3px;
  }
  
  .sublink li {
    padding: 5px;
  }
  
  .sublink li:hover {
    background-color: #eee;
  }