* {
            box-sizing: border-box;
          }

          /* Header/Blog Title */
         .header {
          padding: 30px;
          text-align: center;
          background: white;
  }
  
  .header h1 {
    font-size: 50px;
  }
          
          body {
            font-family: Verdana, Geneva, Tahoma, sans-serif;
          }
          
          /* Style the header */
          header {
            background-color: rgb(255, 255, 255);
            padding: 8px;
            text-align: center;
            font-size: 15px;
            color: rgb(19, 18, 18);
          }
          
          
          article { 
            float: left;
            padding: 10px;
            width: 100%;
            text-align: center;
            font-size: 25px
            background-color #f1f1f1;
            outline: #000000 solid 1px;
            height: 500px; /* only for demonstration, should be removed */
          }
  
          article { 
            float: left;
            padding: 10px;
            width: 100%;
            text-align: center;
            background-color: #f1f1f1;
            outline: #000000 solid 1px;
            height: 500px; /* only for demonstration, should be removed */
          }
  
          
          /* Footer */
            .footer {
            padding: 0px;
            text-align: center;
            background: #ddd;
            margin-top: 20px;
    }
          /* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
          @media (max-width: 700px) {
            nav, article {
              width: 100%;
              height: auto;
            }
          }