body {
  color:#bbcbbb;
  background:#212720;
  font-family: 'Times New Roman', sans-serif;
  font-size:1.2em;
  line-height: 1.6em;
}

main, .header, .footer {
  background:#343c34;
  max-width:600px;
  margin-left:auto;
  margin-right:auto;
  padding:20px;
}

main {
  padding-top:0;
}

.btn {
  padding:5px;
  max-width:200px;
}

.btn-title {
  text-align:center;
  margin-bottom: -20px;
}
.btn-desc {
  opacity:0.5;
  font-size:0.9em;
}

.header {
  padding-bottom:5px;
  padding-top:2px;
  margin-bottom:-30px;
  margin-top:20px;
}

.btn {
  background-color:#8fa38f;
  color:#212720;
  padding:10px;
  margin:10px;
  display:inline-block;
}

.btn:hover {
  background-color:#CAE2CA;
}

.footer {
  text-align:center;
  opacity:0.3;
  background:none;
  margin-top:-20px;
}

.footer p {
  margin-bottom:-20px;
}

.footer a {
  margin-left:10px;
  margin-right:10px;
}

.header ul {
  list-style:none;
  padding:0;
}

.header ul li {
  display: inline-block;
  font-weight:bold;
  margin-left:10px;
  margin-right:10px;
}

::-webkit-scrollbar {
  display:none;
}

a {
  font-weight:bold;
  color:inherit;
  text-decoration:none;
}

a:hover {
  background-color:#bbcbbb;
  color:#212720;
  text-decoration:none;
  padding:10px;
}

::selection {
  background-color:#bbcbbb;
  color:#212720;
}

.icon {
  width:48px;
  height:41px;
  vertical-align:text-bottom;
}

@media only screen and (max-width: 878px) {
  .btn:hover, a:hover {
    padding:0;
  }
}