body{
  background:black;
  color:blue;
}
.leftside{
  float: left;
  width: 50%;
  }
.rightside{
  float: right;
  width: 50%;
  }
 /* Place the navbar at the bottom of the page, and make it stick */
.navbar {
  background: linear-gradient(0deg,#a906f2 20%,#6e06f2 80%);
  overflow: hidden;
  width: 100%;
   display: flex;
  justify-content: center;
  align-items: center;
}

/* Style the links inside the navigation bar */
.navbar a {
  background: linear-gradient(0deg,#0614f2,#6e06f2);
  float: left;
  display: flex;
  font-size: 16px;
  color: #ff6600;
   border:1px solid black;
  text-align: center;
  padding: 12px 14px;
  text-decoration: none;
}

/* Change the color of links on hover */
.navbar a:hover {
  background-color: #ddd;
  color: black;
}

/* Add a color to the active/current link */
.navbar a.active {
  background-color: #04AA6D;
  color: white;
}
.section{
background: red;
  color: #04AA6D;
  text-align: left;
  padding: 10px;
  width: 100%;
  height: 325px;
  overflow: scroll;
  border: 1px solid black;
  border-radius:5px;
}
/* Footer */
.footer {
  padding: 20px;
  text-align: center;
  background: red;
  margin-top: 20px;
  color:powderblue;
}

@media screen and (max-width: 800px) {
  .navbar,.leftside,.rightside {   
    width: 100%;
    padding: 0;
  }
}