/* Import Google Font */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&display=swap');

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

/* 1. Body Element */
body {
  font-family: Arial, Helvetica, sans-serif;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 2. Header Element */
header {
  background-color: #2c3e50;
  height: 60px;
  flex-shrink: 0;
}

/* 3. H1 inside Header with Google Font */
header h1 {
  font-family: 'Playfair Display', serif;
  font-size: 32px;
  color: #ecf0f1;
}

/* 4a. Navigation Bar */
nav {
  background-color: #34495e;
  height: 30px;
}

/* 4b. LI elements inside NAV */
nav li {
  display: inline-block;
  list-style: none;
  height: 30px;
}

/* 4c. A elements inside NAV */
nav a {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 10px 0 10px;
  color: #ecf0f1;
  text-decoration: none;
}

/* 5. Content DIV */
#content {
  display: flex;
  flex: auto;
  flex-direction: row;
}

/* 6. Main Element */
main {
  width: 70%;
  box-sizing: border-box;
  padding: 20px;
}

/* 7. Aside Element */
aside {
  width: 30%;
  box-sizing: border-box;
  padding: 20px;
  background-color: #ecf0f1;
}

/* 8. Footer Element */
footer {
  background-color: #2c3e50;
  color: #ecf0f1;
  font-size: 85%;
  flex-shrink: 0;
}

/* 9. H1 Elements */
h1 {
  color: #2c3e50;
  font-size: 140%;
  margin-bottom: 20px;
}

/* 10. P Elements */
p {
  margin-bottom: 12px;
}