@media (min-width: 576px) {
  html {
    font-size: 14px;
  }
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

@media (min-width: 992px) {
  html {
    font-size: 18px;
  }
}

@media (min-width: 1200px) {
  html {
    font-size: 20px;
  }
}

body {
  background-color: #282828;
}

main {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  justify-content: center;
  padding: 0 30px;
  text-align: center;
}

.wrapper {
  font-family: ubuntu mono, droid sans mono, inconsolata, menlo, courier new, monospace;
  margin: 0 auto;
}

.wrapper > .intro {
  font-size: 3.75em;
  font-weight: 600;
}

.wrapper > .tagline {
  font-size: 1.5rem;
  margin: 1.5rem 0 0 0;
  font-weight: 100;
  line-height: 1.4
}

.tagline > .current {
  font-size: 120%
}

.tagline,
.wrapper .light-active {
  color: #555;
}

.intro,
.wrapper .dark-active {
  color: #bbb;
}

.wrapper .dark-active-not {
  color: #444;
}

.wrapper .dark-inactive-just-yet {
  color: #353535
}

.wrapper:hover .light-active {
  color: #edb;
}

.wrapper:hover .dark-active {
  color: inherit;
}

a,
a:link {
 color: #bbb;
 text-decoration: none;
 outline: 0;
}

a:active,
a:focus,
a:visited,
a:hover {
 color: #bbb;
}

a:hover {
 text-decoration:underline;
}