@import url('https://fonts.googleapis.com/css?family=Raleway:400,500,700|Open+Sans:800');

*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  background: #fff;
  color: #333;
  font: 500 1em 'Raleway', Arial, sans-serif;
}

a {
  color: #e06084;
  text-decoration: none;
}
a:hover,
a:focus {
  color: #ac3557;
}

.hidden {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.codrops-header {
  padding: 3em 1em 4em;
  text-align: center;
}

.codrops-header h1 {
  font-size: 3em;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 0.5em;
  letter-spacing: -1px;
}

.codrops-header h1 span {
  display: block;
  font-size: 0.45em;
  font-weight: 700;
  opacity: 0.6;
  padding: 1em;
}

.codrops-demos a {
  display: inline-block;
  margin: 0 0.5em;
  font-size: 60%;
  text-transform: uppercase;
}

.content,
.content-related {
  text-align: center;
}
.content-related {
  font-weight: bold;
  padding: 3em 0;
}

.media-item {
  display: inline-block;
  padding: 1em;
  transition: color 0.3s;
  vertical-align: top;
}
.media-item__img {
  opacity: 0.7;
  transition: opacity 0.3s;
}
.media-item:hover .media-item__img,
.media-item:focus .media-item__img {
  opacity: 1;
}
.media-item__title {
  margin: 0;
  padding: 0.5em;
  font-size: 1em;
}

/* Responsive */
@media (max-width: 50em) {
  .codrops-header {
    padding: 3em 10% 4em;
  }
}
@media (max-width: 40em) {
  .codrops-header h1 {
    font-size: 2.8em;
  }
}