html, body{
    margin: 0;
    padding:0;
    height: 100%;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    
  } body {
    background-color: lightblue;
    display: flex;
    flex-direction: column;
    align-items: center;
    
    
  }

  img{
      display: block;
      margin: 0 auto;
      width: auto; 
      height: 200px;
      padding-top: 20px;    
  }


@media only screen and (max-width: 600px) {
  img {
    max-width: 100%;
    height: auto; 
  }
}


  .content{
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .header, .topnav, .column, .footer {
      box-sizing: border-box;
      width: 80%;
      padding: 20px;
      max-width: 1200px;
      margin-left: auto; 
      margin-right: auto; 
      font-size: 25px;
    
    }

  .header, .footer{
    text-align: center;
  }

    .topnav{
      text-align: center;
    }

    .topnav a {
      color:black;
      text-decoration: none;
      margin: 0 10px;
      
    }
    

    .topnav a:hover {
      color: purple;
    }

  
  .column {
      text-align: center;
      flex-grow: 1;  
    }
    
    
    .row::after {
      content: "";
      display: table;
      clear: both;
    }