pre {
    background: #000;
    color: #fff;
}

footer {
    padding: 0 15px;
}

.anchor {
    color: #5a5a5a;
    cursor: default;
}

.anchor i {
    color: #5a5a5a;
    display: none;
    cursor: pointer;
}

.anchor:hover {
    color: #5a5a5a;
    text-decoration: none;
}

.anchor:hover i {
    display: inline-block;
    font-size: 70%;
}

@media (min-width: 320px) and (max-width: 479px) {

  body {
    padding-bottom: 0;
  }


  h2 {
    margin-left: 5px;
  }

  img { width: 40%}

  /* Carousel base class */
  .carousel {
    height: 300px;
    margin-bottom: 0;
  }
  /* Since positioning the image, we need to help out the caption */
  .carousel-caption {
    z-index: 10;
  }

  /* Declare heights because of positioning of img element */
  .carousel .item {
    height: 400px;
    background-color: #777;
  }

  .carousel-inner {
      height: 300px;
  }

  .carousel-inner > .item > img {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    height: 300px;
  }
}