body {
  padding: 20px 0; }

header {
  margin-bottom: 30px; }

h1 {
  padding-bottom: 9px;
  margin-top: 20px;
  border-bottom: 1px solid #eee; }

.annotated-image {
  position: relative;
  margin: 16px 0 24px 0;
  text-align: center; }
  .annotated-image img {
    width: 100%;
    height: auto; }
  .annotated-image .box {
    position: absolute;
    border-style: solid;
    border-width: 0;
    border-radius: 6px;
    font-size: 1.4em; }
  .annotated-image .bottom {
    top: 116%; }
  .annotated-image .top {
    top: -100%; }
  .annotated-image .right {
    top: 50%;
    transform: translate(0, -50%);
    left: 136%; }
  .annotated-image .red {
    border-width: 3px;
    border-color: red;
    color: red; }