html {
  font-size: 14px;
}

body {
  font-size: 1rem;
  font-family: -apple-system,
                BlinkMacSystemFont,
                "Segoe UI",
                Roboto,
                Oxygen-Sans,
                Ubuntu,
                Cantarell,
                "Helvetica Neue",
                sans-serif;
  color: hsla(0, 0%, 20%, 1);
}

a:link,
a:visited {
  color: hsla(0, 0%, 15%, 1);
  text-decoration: none;
  background: linear-gradient(hsla(0, 0%, 15%, 1), hsla(0, 0%, 15%, 1)) no-repeat;
  background-size: 100% 1px;
  background-position: 0 1.1em;
  text-shadow: 0.1em 0 hsla(360, 100%, 100%, 1), -.1em 0 hsla(360, 100%, 100%, 1);
  transition: all 200ms ease;
}

a:hover,
a:active {
  color: hsla(0, 0%, 75%, 1);
  background: linear-gradient(hsla(0, 0%, 75%, 1), hsla(0, 0%, 75%, 1)) no-repeat;
  background-size: 100% 1px;
  background-position: 0 1.1em;
  text-shadow: 0.1em 0 hsla(360, 100%, 100%, 1), -.1em 0 hsla(360, 100%, 100%, 1);
}

h1 {
  font-size: 2rem;
  margin: 2rem 0;
}

h1 span {
  color: hsla(0, 0%, 50%, 1);
}

p {
  font-size: 1rem;
  margin-bottom: 1rem;
  line-height: 1.4;
}

.deploy {
  width: 90%;
  margin: 0 auto;
}

@media (min-width: 1200px) {
  .deploy {
    width: 500px;
  }
}