* {
  box-sizing: border-box;
}

body { 
  font-family: Arial, Helvetica, sans-serif; 
  margin: 0; 
}

img { width: 100%; padding: 20px; }

.header {
  padding: 80px;
  text-align: center;
  background-color: #008989;
  color: white; 
}

.header h1 {
  font-size: 40px;
}

.navbar{
  overflow: hidden;
  background-color: #303333; 
}

.navbar a{
  float: left;
  color: white;
  font-size: 30px;
  display: block;
  padding-right: 50px;
  text-align: center;
  text-decoration: none;
  a: hover;
}

.right{
  float: right;
}

.row{
  display: flex;
}

.side{
  flex: 2;
  background-color: #EEEEEE;
  padding: 30px;
}

.main{
  flex: 7;
  padding: 30px;
}

.footer{
  padding: 80px;
  text-align: center;
  background-color: #008989;
  color: #000000; 
  
}

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