:root {
  --dark: #13293d;
  --light: #fff;
  --blue: #2589bd;
  --lightgray: lightgrey;
  --border-radius: 40px;
}

body {
  background-color: var(--light);
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  margin: 0;
}

header {
  background-color: var(--lightgray);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}

header ul {
  display: flex;
  list-style-type: none;
}

header ul li {
  margin: 0 10px;
}

a:link {
  text-decoration: none;
}

main {
  display: flex;
  flex-wrap: wrap;
  background-color: var(--light);
}

.row {
  border-style: solid;
  border-color: var(--lightgray);
  border-width: 3px;
  border-radius: var(--border-radius);
  padding: 30px;
  flex: 2%;
  margin: 100px;
  background-color: var(--dark);
  color: var(--light);
  box-shadow: lightgrey;
}

.col-md-8 h1 {
  margin-left: 10px;
  padding: 3%;
  border-style: solid;
  border-color: var(--lightgray);
  width: 6em;
  align-items: center;
}

#pic {
  float: left;
  height: 200px;
  width: 200px;
  padding: 3%;
}

p {
  padding: 2%;
  size: 20px;
}

footer {
  clear: both;
  bottom: 0;
  padding: 20px;
  text-align: center;
  background: var(--blue);
  color: #fff;
}

/* TODO: Use media query to change the width of the cards so they split into two columns at 992px or smaller*/
/* change the header color */
@media screen and (max-width: 992px) {
  .row {
    background-color: var(--dark);
  }

  /* TODO: Use media query to change the width of the cards so they are stacked on top of each other at 768px or smaller */
  /* change the header color */
  @media screen and (max-width: 768px) {
    .row {
      background-color: var(--blue);
    }
  }
}