/* =============================
   General Page Styles
   ============================= */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5;
  background: #ffffff;
  color: #111;
}

/* =============================
   Header Styles
   ============================= */
header {
  width: 100%;
  padding: 20px;
  text-align: center;
  background: hsl(202, 86%, 57%);
  border-bottom: 1px solid hwb(150 1% 23%);
}

/* =============================
   Navigation Styles
   ============================= */
nav {
  float: left;
  width: 25%;
  padding: 20px;
  margin: 20px 0 20px 20px;
  background: hsl(0, 100%, 100%);
  border: 1px solid hsl(147, 99%, 39%);

  /* Experiment: keep nav visible while scrolling */
  position: fixed;
  top: 120px; /* starts below the header */
  left: 0;
}

nav ul { list-style: none; margin: 0; padding: 0; }
nav ul li { margin-bottom: 10px; }

nav ul li a {
  color: #111;
  text-decoration: none;
}

/* Hover effect for links */
nav ul li a:hover {
  color: hsl(223, 99%, 42%);
  text-decoration: underline;
}

/* =============================
   Main Content Styles
   ============================= */
main {
  float: right;
  width: 70%;
  padding: 20px;
  margin: 20px 20px 20px 0;

  /* Because nav is fixed, main needs space on the left */
  margin-left: 30%;
}

/* =============================
   Footer Styles
   ============================= */
footer {
  clear: both;
  width: 100%;
  padding: 15px;
  text-align: center;
  background: hsl(128, 92%, 48%);
  border-top: 1px solid hsl(140, 91%, 56%);
}

/* Small screens: stack layout */
@media (max-width: 800px) {
  nav {
    position: static;
    float: none;
    width: auto;
    margin: 10px;
  }

  main {
    float: none;
    width: auto;
    margin: 10px;
  }
}