/* Global */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Style the body */
body {
  background-color: lightsteelblue;
  color: black;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}

/* Style the Header */
header {
  padding: 50px;
}

/* Style the Navigation */
nav {
  background-color: black;
  color: lightsteelblue;
  padding: 20px;
}

/* Style Navigation Links */
nav a {
  padding: 20px;
  text-decoration: none;
}

/* Style the link and visited link colors */
nav a:link, nav a:visited {
  color: lightsteelblue;
}

/* Style the link hover and active link colors */
nav a:hover, nav a:active {
  color: blue;
}

/* Style the Main */
main {
  display: -webkit-flex;
  display: flex;
}

/* Style the Article */
article {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  background-color: lightgrey;
  padding: 15px;
  margin: 20px;
}

/* Style the Article Heading */
article h2 {
  padding: 10px;
}

/* Style the Article Paragraph */
article p {
  text-align: left;
}

/* Style the Footer */
footer {
  background-color: black;
  color: lightsteelblue;
  padding: 20px;
  width: 100%;
}
/* Responsive layout - makes the two articles stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) and (min-width: 400px) {
  .row {
    -webkit-flex-direction: column;
    flex-direction: column;
  }
}
/* Responsive layout - makes the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  nav a { 
      display: block;
      width: 100%;
  }
}