body {
color: #fff;
background-color: #98b4d5;
margin-left: 50px;
margin-right: 50px;
font-family: "Lucida Console", "Courier New", monospace;
}

.greyOnWiteHeading {
color: #565b7a;
background-color: #fff;
padding: 10px;
font-size: 2em;
}

.greyOnWiteBody {
color: #565b7a;
background-color: #fff;
padding: 10px;
font-size: 1em;
}

.greyOnBgHeading {
color: #565b7a;	
padding: 5px;
font-size: 2em;
}

.greyOnBgBody {
color: #565b7a;	
padding: 5px;
font-size: 1em;
}

.whiteOnGreyHeading {
color: #fff;
background-color: #565b7a;
padding: 5px;
font-size: 2em;
}

.whiteOnGreyBody {
color: #fff;
background-color: #565b7a;
padding: 5px;
font-size: 1em;
}

.whiteOnPurpleHeading {
color: #fff;
background-color: #9b62a8;
padding: 5px;
font-size: 2em;
}

.whiteOnPurpleBody {
color: #fff;
background-color: #9b62a8;
padding: 5px;
font-size: 1em;
}

img {
max-width: 80%;
}

.navbar{
background-color:#565b7a;
color:white;
padding: 10px;
font-size: 4vw;
}

a:link {
  color: white;
  text-decoration: none;
}

a:visited {
  color: white;
  text-decoration: none;
}

a:hover, a:active {
	background: #9b62a8;
}

a:active {
  color: purple;
  text-decoration: none;
} 

.flex-container {
  display: flex;
}

.flex-container > div {
  width: 100%;
  text-align: center;
}