body {
    font-family: 'Times New Roman', Times, serif; 
    height: 100vh;
    display: flex;
    flex-direction: column;
  }
  
  header {
    background-color: lightgreen; 
    height: 60px;
    flex-shrink: 0;
  }
  
  header h1 {
    font-size: 2em; 
    color: white; 
  }

  nav {
    background-color: lightgrey;
    height: 30px;
  }
  
  nav li {
    display: inline-block;
    list-style: none;
    height: 30px;
  }
  
  style a {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 10px;
    color: white;
  }
  
  #content {
    display: flex;
    flex: auto;
  }
  
  main {
    width: 70%;
    box-sizing: border-box;
    padding: 20px;
  }
  
  aside {
    width: 30%;
    box-sizing: border-box;
    padding: 20px;
    background-color: white;
  }

  footer {
    background-color: lightgray;
    color: white;
    font-size: 85%;
    flex-shrink: 0;
  }
  
  h1 {
    color: blue;
    font-size: 140%;
    margin-bottom: 20px;
  }
  
  p {
    margin-bottom: 12px;
  }

  #menu-button {
    display: none; 
  }

    
  @media all and  (max-width: 800px) {
    header {
      height: 44px;
    }

    #content {
      display: block;
    }
    main,aside {
      width: 100%;
    }

    #menu-button {
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      height: 44px;
      text-align: center;
      line-height: 44px;
      color: lightblue; 
    }
  }