body {
  background-color: #DBF1FF;
  color: #012542;
  font-family: Verdana;
}

 header {
  background-color: rgba(255, 255, 255, 0.5);
  padding: 30px;
  text-align: center;
  font-size: 35px;
  color: black;
  border-style: solid;
  border-width: 5px;
  border-color: white;
}

ul.topnav {
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #47B6FF;
  border-color: white;
}

ul.topnav li a {
  display: block;
  color: #f1f1f1;
  padding: 14px 16px;
  text-decoration: none;
}

ul.topnav li a:hover {
  background-color: #8AD0FF;
  color: black;
}

.container {  
  display: flex;
}

.main {
  flex: 80%;
  padding: 10px;
  margin:10px;
  float:left;
  background-color: rgba(255, 255, 255, 0.5);
}

.side{
  flex: 20%;
  padding: 10px;
  float:left;
  margin:10px;
  background-color: #99D6FF;
}

footer {
  background-color: #91D4FF;
  padding: 10px;
  text-align: center;
  color: white;
}

@media screen and (max-width: 700px) {
  .container, .navbar {   
    flex-direction: column;
  }
}