{
  box-sizing: border-box;
}

/* Style the body */
body {
  font-family: Arial;
  margin: 0;

}  

a:link, a:visited {
  color: #1abc9c;
  text-decoration: none
}
a:hover, a:active {
 text-decoration:none;
  color:#1abc9c;  

}
img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

/* Header/logo Title */
.header {
  padding: 20px;
  text-align: center;
  background: #1abc9c;
  color: white;
}

/* Style the top navigation bar */
.navbar {
  display: flex;
    flex-wrap: wrap;

  background-color: #b1f6cb;
    text-align: center;
    justify-content: center;
}

/* Style the navigation bar links */
.navbar a {
  color: black;
  padding: 14px 20px;
  text-decoration: none;
  text-align: center;
}

.flex-container {
  display: flex;
  flex-direction:row;
  padding:20px;
    align-content: space-around;


}

/* Column container */
.row {  
  display: flex;
  width:80%;
  margin:0 auto;
}

/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
  flex: 1;
  padding: 10px; 
}

/* Main column */
.main {
    flex:2;
  background-color: white;
  padding: 10px;
  align-items: stretch;
}

.ex1 {
  width:500px;
  margin: auto;
}

/* Footer */
/*.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
}*/
-->
/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
  .row, .navbar {   
    flex-direction: column;
  }
}