body {
  color: black;
  font-family: Verdana;
  background: url(blurred_code_cropped.png) no-repeat top left;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

/* Make images responsive */
img {
  width: auto;
  max-width: 100%;
  height: auto;
}

/* Allow left-right ordering in body*/
.wrap {
  display: flex;  
}

/* Put sidebar over main on mobile */
@media only screen and (max-width: 800px) {
  /*.wrap {
    flex-wrap: wrap;
  }*/
  .left, .right {
    display: none;
  }
}

/* Style cards and sidebar */
.card, .left, .right {
  padding: 16px;
  margin: 30px;
  background-color: white;
  box-shadow: 4.0px 8.0px 8.0px grey;
}

#warn {
  background-color: yellow;
}

/* Centre main with hidden right div */
.left, .right {
  flex: 1;
}

/* Centre cards */
.main {
  max-width: 600px;
  margin: 0 auto; /* Centre */
  order: 2; /* Centre */
}

/* Make sidebar follow scroll */
.left {
  position: -webkit-sticky;
  position: sticky;
  top: 30px;
  height: 100%;
  order: 1; /* Left */
  width: 100%;
}

/* Centre main with hidden right div */
.right {
  visibility: hidden;
  order: 3; /* Right */
}

.nav_link {
  margin: 5px 0px;
  padding: 5px;
  background-color: #CCC;
  width: calc(100% - 10px); /* oh god */
  display: inline-block;
  border-radius: 5px;
  /*font-weight: bold;*/
}

a.nav_link:link{
  color: #222;
  text-decoration: none;
}

a.nav_link:visited {
  color: #222;
}

a.nav_link:hover {
  background-color: #888;
}