<!DOCTYPE html>
<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background-color: #393939;
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
}

header {
	background-color: #202020;
	padding: 10px;
	text-align: center;
}
	
a:link {
	color: #ff9900;
}

a:visited {
	color: #f3843e;
}

a:hover {
  color: #ff5a09;
}
a:active {
  color: blue;
}

div.flex-container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

div.flex-container > div {
  margin: 10px;
}


footer {
  padding: 20px;
  text-align: center;
  background: #6e6e6e;
}

  <!--  Use media query and show the flex items vertically if screen width is less than 600px -->
@media screen and (max-width: 600px) {
  div.flex-container {
    flex-direction: column;
  }
}


</style>

