body {
  margin:0;
  overflow:auto;


/* Header/logo Title */
.header {
  padding: 2px;
  text-align: center;
}

.flex-container {
  display: flex;
  background-color: black;
  flex-direction: column; 
  flex-flow: row wrap;
  text-align: center;
  justify-content: center;
  align-items: center;
}

.flex-container > div {

  display: flex;
  flex-direction: column; 
  flex-flow: row wrap;


  background-color: #f1f1f1;
  margin: 0 -5px;
  padding: 20px;
  font-size: 30px;
 
  border-radius: 50px 20px;
  padding: 20px; 
  width: 200px;

}


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

  text-align: center;
  justify-content: center;
  align-items: center;
  background-color: DodgerBlue;
}

/* Style the navigation bar links */
.navbar a {
  display: flex;
  color: black;
  font-size: xx-large;
  font-weight: bold;
  padding: 10px 10px;
  text-decoration: none;
  text-align: center;
}

/* Change color on hover */
.navbar a:hover {
  display: flex;
  flex-direction: row; 
  flex-flow: row wrap;


  background-color: #ddd;
  color: black;
  text-align: center;
  border:1px solid #000000;
  border-radius: 25px;
  padding: 10px; 
}


/* Footer */
.footer {
  padding: 20px;
  text-align: center;
  background: yellow;
}

h1 {
  font-size: xx-large;
  font-weight: bold;
  width: 450px;
  margin: auto

  border: 1px solid #000000;
  border-radius: 25px;
  padding: 20px; 
}





a:link {
  padding: 5px 5px;
  text-align: center;
  display: inline-block;
}

a:visited {

border-style: dashed;
  display: inline-block;
}

/* mouse over link */
a:hover, a:active {
 border-style: dashed;
 color: red;

}

/* selected link */
a:active {
  color: blue;
}