body {
  background: #18191c;
  color: #8795a6;
  font-family: 'Open Sans', sans-serif;
}

a {
  text-decoration: none;
  color: #1d5fc4;
}

a:hover {
  color: #123a78;
}

h1, h2, h3, h4, h5 {
  color: #ffffff;
  font-family: 'Roboto' sans-serif;
}

h1 a, h2 a, h3 a, h4 a, h5 a {
  color: #ffffff;
}

legend {
  color: #ffffff;
}

code {
  padding: 5px 6px;
  color: #ffffff;
  background-color: #232429;
}

pre code {
  padding: 0;
  color: inherit;
  background-color: transparent;
  border: 0;
}

#content {
  padding: 1.5rem;
}

.navbar {
  background-color: #18191c;
}

.navbar-brand {
  font-size: 1rem;
}

.navbar-brand img {
  width: 10rem;
}

.navbar .nav-link {
  color: #b1c3d9;
}

.navbar .nav-link.active,
.navbar .nav-link:hover {
  color: #ffffff;
}

.show-linux,
.show-mac,
.show-windows {
  display: none;
}

html.linux .show-linux,
html.mac .show-mac,
html.windows .show-windows {
  display: block;
}

/*
 * bootstrap overrides
 */
.btn-primary {
  background-color: #216cdf;
  border-color: #216cdf;
}

.btn-primary:active,
.btn-primary:hover {
  background-color: #1d5fc4;
}

.bg-dark,
.table-dark {
  background-color: #232429 !important;
}

.form-control {
  background-color: #232429;
  border: none;
  color: #dadada;
}

.form-control:focus {
  border: none;
  box-shadow: none;
}

pre,
code {
  background-color: #232429 !important;
  color: #ffffff;
}

/*
 * colors
 */
.light-blue {
  color: #216cdf;
}

/*
 * markdown images
 */
#content img {
  width: 100%;
}

/*
 * typography
 */
.page-title {
  margin-bottom: 1.5rem;
}

/*
 * index
 */
#jumbotron-main {
  margin-bottom: 0;
  color: #ffffff;
  text-align: center;
  background-color: inherit;
}

#jumbotron-features {
  background: #18191c;
  margin: 0;
  padding: 0;
}

#jumbotron-features .row {
  margin-top: 2rem;
}

#jumbotron-features i {
  margin-bottom: 1rem;
}

.jumbotron.crazytaxi {
  background: linear-gradient(#18191c, rgba(0, 0, 0, 0.5), #18191c), url('/img/crazytaxi.jpg');
}

.jumbotron.legacyofkain {
  background: linear-gradient(#18191c, rgba(0, 0, 0, 0.05), #18191c), url('/img/legacyofkain.jpg');
}

.jumbotron.shenmue {
  background: linear-gradient(#18191c, rgba(0, 0, 0, 0.05), #18191c), url('/img/shenmue.jpg');
}

.jumbotron.sonic {
  background: linear-gradient(#18191c, rgba(0, 0, 0, 0.5), #18191c), url('/img/sonic.jpg');
}

.jumbotron .btn {
  margin-right: 0.8rem;
}

.btn-discord,
.btn-discord:visited,
.btn-discord:focus {
  background-color: #5e77d4;
  border-color: #5e77d4;
  color: #ffffff;
}

.btn-discord:hover,
.btn-discord:active {
  background-color: #4a67cf;
  border-color: #4a67cf;
  color: #ffffff;
}

/*
 * posts
 */
#posts {
  list-style: none;
  margin: 0;
  padding: 0;
}

#posts li {
  margin: 0 0 1em;
  padding-bottom: 1em;
  border-bottom: solid 1px #434f5d;
}

#posts li:last-child {
  border-bottom: 0;
}

.post h1 {
  font-size: 2em;
  margin-bottom: .5em;
}

.post time {
  display: block;
  margin-top: -.5rem;
  margin-bottom: 1rem;
  color: #9cacbf;
}

.post pre {
  font-size: .8em;
}

.post img {
  max-width: 100%;
}

.post pre {
  padding: .5rem 1rem;
  border-radius: 3px;
}

/*
 * register
 */
#jumbotron-register,
#jumbotron-lite,
#jumbotron-premium {
  margin-bottom: 0;
  color: #ffffff;
  text-align: center;
  text-shadow: 1px 1px 4px #000000;
  background: linear-gradient(#18191c, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2), #18191c), url('/img/register.jpg') top/cover;
}

#jumbotron-lite {
  background: linear-gradient(#18191c, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2), #18191c), url('/img/lite.jpg') top/cover;
}

#jumbotron-premium {
  background: linear-gradient(#18191c, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2), #18191c), url('/img/premium.jpg') top/cover;
}

#register-form {
  margin: 0 auto;
  width: 600px;
}

#register-form .error {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  position: absolute;
  width: 100%;
  top: 100%;
  margin-top: 20px;
  left: 0;
  padding: 0 15px;
  font-size: 13px !important;
  opacity: 0;
  transform: translateY(10px);
  transition-property: opacity, transform;
  transition-duration: 0.35s;
  transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}

#register-form .error.visible {
  opacity: 1;
  transform: none;
}

#register-form .error .message {
  font-size: inherit;
}

#register-form .error svg {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  margin-top: -1px;
  margin-right: 10px;
}

#register-form .error svg .base {
  fill: #e25950;
}

#register-form .error svg .glyph {
  fill: #f6f9fc;
}

#register-form .error .message {
  color: #e25950;
}

/*
 * downloads
 */
#jumbotron-downloads {
  margin-bottom: 0;
  color: #ffffff;
  text-align: center;
}

#releases {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
 * games
 */
.status-lbl {
  display: inline-block;
  text-align: center;
  width: 7rem;
  padding: .15em 0;
  color: #ffffff;
  font-weight: bold;
  border-radius: .25rem;
}

.status-bg-perfect {
  background-color: #337fcc;
}

.status-bg-playable {
  background-color: #33cc33;
}

.status-bg-starts {
  background-color: #dfdf1f;
}

.status-bg-menus {
  background-color: #df7f1f;
}

.status-bg-broken {
  background-color: #df1f1f;
}

.status-bg-unknown {
  background-color: #000000;
}

#statuses {
  margin: 1rem 0 2rem;
  font-size: .85rem;
}

#statuses .status-type {
  display: flex;
  justify-content: space-between;
  margin-bottom: .5rem;
}

#statuses .status-lbl {
  margin-right: .5rem;
}

#statuses .status-bar {
  display: flex;
  justify-content: flex-start;
  min-width: 3rem;
  padding: .15rem .3rem;
  background: #232429;
  color: #ffffff;
  border-radius: .25rem;
}

#games {
  font-size: .85rem;
}

#games thead th:nth-of-type(2) {
  width: 100%;
}

#games .img-link img {
  height: 200px;
}

#games .vid-link {
  position: relative;
}

#games .vid-link i {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -.5em 0 0 -.5em;
  color: rgba(0, 0, 0, 0.7);
}

#games .vid-link a:hover i {
  color: #e52d27;
}

/*
 * login
 */
#login-form {
  margin: 40px auto 0;
  width: 600px;
}

/*
 * forgot password
 */
#forgot-form, #reset-form {
  margin: 40px auto 0;
  width: 600px;
}

/*
 * pages
 */
.page-quickstart h1 {
  margin-top: 3rem;
}

.page-quickstart ul {
  padding-left: 0;
  list-style: none;
}