body {
  font-family:lato,sans-serif
}
.header {
  padding-top:92px;
  text-align: center;
  margin-top: 50px; 
}

.header img {
    max-width: 100%; 
    height: auto; 
}
.title {
  color:#fff;
  font-size:64px;
  font-weight:900;
  letter-spacing:-1px;
  margin:0 20px 20px
}
.subtitle {
  color:#16a085;
  font-size:27px;
  font-weight:400;
  line-height:30px;
  margin:0 20px 20px
}
.subtitle+.subtitle {
  color:#fff
}
.gh-btns {
  margin:92px 0 0;
  background:rgba(0,0,0,.1);
  padding:20px 0 10px
}
.wrap {
  margin:0 auto 90px;
  max-width:540px;
  padding:0 15px
}
p {
  color:#333;
  font-size:18px;
  line-height:1.7
}
a {
  color:#1bc1a1;
  border-bottom:1px dotted #1bc1a1;
  -webkit-transition:opacity .3s ease-in-out;
  transition:opacity .3s ease-in-out
}
a:hover,
a:focus {
  text-decoration:none;
  opacity:.7
}
h1 {
  margin-top:80px;
  color:#1bc1a1
}
h3 {
  color:#333;
  margin:40px 0;
  font-size:18px;
  font-weight:300;
  text-align:center
}
.clippy {
  margin-top:-3px;
  position:relative;
  top:3px
}
.btn[disabled] .clippy {
  opacity:.3
}
.password {
  position:relative;
  margin:15px 0 0;
  padding:39px 19px 14px;
  background-color:#fff;
  border-radius:4px 4px 0 0;
  border:1px solid #ddd;
  z-index:2
}
.password p {
  color:#666
}
.password:after {
  content:"Password";
  position:absolute;
  top:0;
  left:0;
  padding:2px 8px;
  font-size:12px;
  font-weight:700;
  background-color:#f5f5f5;
  color:#9da0a4;
  border-radius:4px 0 4px 0
}
.password+.snippet {
  background:#f8f8f8;
  border-radius:4px;
  border:1px solid #ddd;
  clear:both;
  top:-20px;
  padding:20px 0 0
}
.form-actions {
  margin-top:15px
}
.form-actions .btn {
  float:left
}
textarea {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  width:100%
}
.snippet {
  position:relative;
  overflow:visible
}
.snippet code {
  font-size:14px;
  line-height:20px
}
.snippet .btn {
  -webkit-transition:opacity .3s ease-in-out;
  -o-transition:opacity .3s ease-in-out;
  transition:opacity .3s ease-in-out;
  opacity:0;
  padding:2px 6px;
  position:absolute;
  right:4px;
  top:4px
}
.snippet:hover .btn,
.snippet .btn:focus {
  opacity:1
}
@media screen and (max-width:768px) {
  .snippet .btn {
    opacity:1
  }
}
.password+.snippet .btn {
  top:22px;
  right:2px
}
code {
  background-color:#e8f5f2;
  border-radius:3px;
  color:#1bc1a1;
  font-size:85%;
  margin:0;
  padding:.2em
}
.hljs-keyword {
  color:teal;
  font-weight:400
}
.support {
  list-style:none;
  text-align:center
}
.support li {
  display:inline-block;
  text-align:center;
  margin:15px 0;
  width:30%
}
@media screen and (max-width:410px) {
  .support li {
    width:45%
  }
}
@media screen and (max-width:290px) {
  .support li {
    width:100%
  }
}
.support p {
  margin:0
}
.credits,
.maintainer {
  font-weight:400;
  font-family:lato,sans-serif;
  font-size:20px;
  color:#16a085;
  padding:30px 0;
  margin:0
}
.footer-link {
  color:#fff;
  border-color:#fff
}
.footer-link:hover,
.footer-link:focus {
  text-decoration:none;
  border-color:#fff
}
.love {
  display:inline-block;
  position:relative;
  top:.2em;
  font-size:1.4em;
  -webkit-transform:scale(.9);
  -moz-transform:scale(.9);
  transform:scale(.9);
  -webkit-animation:love .5s infinite linear alternate-reverse;
  -moz-animation:love .5s infinite linear alternate-reverse;
  animation:love .5s infinite linear alternate-reverse
}
@-webkit-keyframes love {
  to {
    -webkit-transform:scale(1.2)
  }
}
@-moz-keyframes love {
  to {
    -moz-transform:scale(1.2)
  }
}
@keyframes love {
  to {
    transform:scale(1.2)
  }
}
.maintainer {
  background:rgba(0,0,0,.05)
}
@media screen and (max-width:540px) {
  .title {
    font-size:48px
  }
  .subtitle {
    font-size:22px
  }
  .credits {
    font-size:22px
  }
}
