/* max-width is explained here https://www.w3schools.com/css/css_max-width.asp */

/* The two below remove the margin around the main elements of the page. */
html
{ height: 100%;}

*
{ margin: 0;
  padding: 0;}

* {
  box-sizing: border-box;
}

/* Style the body */
body {
  background: #444; /* dark grey on the margings */
  font-family: Arial;
  margin: 0;
}

h3 {
  margin-top: 10px;
  margin-bottom: 10px;
  color: #333;
}

ul, ol {
  margin-left: 30px;
}

ul li, ol li {
  margin-bottom: 5px;
}

a {
  color: #2493ef;
}

a:hover {
  color: #333;
}

a:visited {
  color: #555;
}

/* This puts the main body in the centre of the screen. */
.header, .navbar, .row, .footer {
  margin-left: auto;
  margin-right: auto;
}

/* Header/logo Title */
.header {
  max-width: 890px;
  position: relative;
  height: 200px;
  background: url(logo.jpg) no-repeat;
  padding: 15px 0 0 15px; /* top and left space before the h1 and h2 text inside the header */
  /*padding: 60px;
  text-align: center;
  background: #1abc9c;
  color: white;*/
}

.header h1 a, .header h1 a:hover{
  color: #555;
  text-decoration: none;
  font-size: 90%;
}

.header h2 a, .header h2 a:hover{
  color: white;
  text-decoration: none;
  font-size: 90%;
}

/* Style the top navigation bar */
.navbar {
  max-width: 890px;
  display: flex;
  background-color: #333;
}

.navbar a.selected {
  background: white;
  color: black;
}

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

/* Change color on hover */
.navbar a:hover {
  background-color: #ddd;
  color: black;
}

/* Column container */
.row {
  max-width: 890px;
  display: flex;
  flex-wrap: wrap;
}

/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
  flex: 30%;
  background-color: #f1f1f1;
  padding: 40px;
}

.side ul {
  list-style-type:none;
  margin-left: 0px;
}

/* Main column */
.main {
  flex: 70%;
  background-color: white;
  padding: 40px;
}

/* Footer */
.footer {
  max-width: 890px;
  padding: 20px;
  text-align: center;
  background: #333;
  color: #AAA;
  text-transform: uppercase;
  font-size: 80%;
}

.footer a {
  color: #FFF;
  text-decoration: none;
}

.footer a:hover {
  color: #FFF;
  text-decoration: none;
}

/* 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 (max-width: 700px) {
  .row, .navbar {
    flex-direction: column;
  }
}