@font-face {
  font-family: 'No Continue Regular';
  font-style: normal;
  font-weight: normal;
  src: local('No Continue Regular'), url('../fonts/no-continue.woff') format('woff');
}

@font-face {
  font-family: 'Marvel';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/marvel.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Fork Awesome */

.fa-sm {
  font-size: 0.8em;
}

.fa-inline {
  margin-left: 0.3em;
  margin-right: 0.3em;
}

.fa-is-left {
  margin-right: 0.3em;
}

/* General */

body {
  font-family: "Marvel", sans-serif;
  font-size: 16pt;
  color: #e7e7e7;
  background: #101010;
  background-image:
    radial-gradient(#c2bebe, #00000000 1px, transparent 40px),
    radial-gradient(#b8b7b7, #00000000 1px, transparent 30px),
    radial-gradient(#bebbbb, #00000000 1px, transparent 40px),
    radial-gradient(#ffffff66, #00000000 1px, transparent 30px);
  background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px;
  background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;
}

div.clear {
  clear: both;
}

h2 {
  margin-top: 3.5em;
}

h1+h2,
h1+a+h2 {
  margin-top: initial;
}

.is-pulled-right {
  display: block;
  float: right;
}

.is-highlighted {
  color: #ff824d;
}

.hidden {
  display: none;
}

a {
  color: #f1a61a;
}

img {
  border-radius: 0.1em;
}

img.text {
  width: 200px;
}

.fullwidth {
  width: 100%;
}

img.right {
  float: right;
  margin: 0 0 1.5em 1.5em;
}

img.left {
  float: left;
  margin: 0 1.5em 1.5em 0;
}

span.personal-message {
  display: inline-block;
  font-style: italic;
  color: #aaa;
  background: #1a1a1a;
  padding: 0.5em;
  border-radius: 0.1em;
}

span.personal-message:before {
  font-family: "ForkAwesome";
  content: "\f0e5";
  margin-right: 0.3em;
  /* Don't render white-space */
  display: block;
  float: left;
}

div#navbar,
div#header,
div#content {
  width: 800px;
  margin: 0 auto;
}

/* Navigation */

div#navbar {
  margin: 2em auto;
}

div#navbar ul {
  text-align: right;
  margin: 0;
  padding: 0;
  list-style: none;
}

div#navbar ul li {
  display: inline-block;
}

/* Crosses */
div#navbar ul li.fa:before {
  font-size: 10px;
  line-height: 1.4em;
  color: #FE4E00;
  content: "\f067";
  vertical-align: middle;
  margin-right: 1.35em;
  /* compensate white-space */
  margin-left: 1em;
}

div#navbar ul li a {
  padding: 0;
  text-decoration: none;
  font: 1.1em "No Continue Regular", serif;
}

div#navbar ul li a i.fa {
  margin: 0;
}

div#navbar a:hover {
  text-decoration: underline;
}

div#navbar ul li:first-child:before {
  content: none;
}

div#navbar ul li:last-child a {
  margin-right: 0;
}

/* Header */

div#header {
  padding: 0;
  border: 0;
}

div#header img {
  display: block;
  width: 100%;
  filter: invert() brightness(85%);
}

/* Content */

div#content table.grid {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  border-style: hidden;
}

div#content table.grid>tbody>tr>td {
  vertical-align: top;
  padding-top: 2em;
}

div#content table.grid>tbody>tr>td.inter {
  width: 70px;
  padding: 0;
  margin: 0;
}

div#content table.grid>tbody>tr>td .card {
  display: block;
  width: 220px;
  margin: 0;
  border: 0;
}

#content div {
  vertical-align: top;
}

#content div>h1:first-of-type {
  margin-top: 0;
}

#content div>h1 {
  margin-top: 2.5em;
  font-size: 1.2em;
  color: #FE4E00;
}

#content div h2 {
  font-size: 1em;
  color: #ff824d;
}

#content div h3 {
  font-size: 1em;
  color: #eeeeee;
}

#content div h4 {
  font-size: 1em;
  color: #999999;
}

/* Responsiveness */
/* TODO: mobile first! */

@media only screen and (max-width: 768px) {

  body {
    font-size: 14pt;
  }

  img.text {
    width: 130px;
  }

  div#navbar,
  div#header,
  div#content {
    width: 500px;
  }

  div#content table.grid>tbody>tr>td .card {
    width: 130px;
  }

  div#content table.grid>tbody>tr>td.inter {
    width: 55px;
  }
}

@media only screen and (max-width: 400px) {

  body {
    font-size: 12pt;
  }

  img.text {
    width: 100px;
  }

  div#navbar,
  div#header,
  div#content {
    width: 350px;
  }

  div#content table.grid>tbody>tr>td .card {
    width: 100px;
  }

  div#content table.grid>tbody>tr>td.inter {
    width: 25px;
  }
}

/* SPECIAL */
table.prices>tbody>tr>td {
  padding-left: 1em;
}