.title {
  font-size: 2em;
}

body {
  margin: 0;
  margin-left: 1em;
  background-color: #c4f1c8;
  font-family: Arial, Helvetica, sans-serif;
  display: grid;
}

img.xkcd{
  padding-top: 30px;
}
div.intro { 
  display:flex;
  flex-direction: row;
  flex-wrap: wrap;
}
div.intro > div.intro-text {
  max-width: 20em;
  margin: 1em;
  margin-right: 3em;
  margin-top: 0;
}
div.intro > div.intro-img > img {
  max-width: 20em;
  margin: 1em;
}
div.media > h4 {
  padding-left: 2em;
  font-size: larger;
}
div.media {
  max-width: 30em;
}
/*div.link-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
div.link-container > div.link-box {
  width: 20em;
  margin: 1em;
  border: 1px solid black;
}*/
/***Responsive layout***/
@media (max-width: 767px) {
  .title {
    margin-left: .5em;
  }
}
@media (min-width: 768px) {
  .title {
    margin-left: 2em;
  }
}