body {
max-width: 100%;
margin: auto;
}



/* The topbar menu */
.topnav {
  width: 100%; 
  position: relative; 
  background-color: #111; /* Black */
  display: flex;
  justify-content: center;
 
}

/* The navigation menu links */
.topnav a {
  /*adding: 6px 8px 6px 16px;*/
  float: left;
  padding: 14px 16px;
  text-align: center;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  /*display: block;*/
}

/* When you mouse over the navigation links, change their color */
.topnav a:hover {
  color: #f1f1f1;
}







/* Style page content */
.main {
  float: center;
  width: 60%;
  margin: auto;
  padding: 0 0px;
}

@media only screen and (max-width:800px) {
  /* For tablets: */
  .main {
    width: 80%;
    padding: 0;
  }
}

@media only screen and (max-width:500px) {
  /* For mobile phones: */
  .main{
    width: 100%;
  }
}


footer{
  margin-top: auto;
  /*
  bottom: 0;
  position: relative;
  width: 100%;*/
}

.footer {
  margin: auto 0;
  text-align: center;
}