@charset "UTF-8";

/* ---------------------------------------------------------- *\
 * Globals.
\* ---------------------------------------------------------- */

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  position: relative;

  min-height: 100vh;
  margin: 0;
}

/* ---------------------------------------------------------- *\
 * Typography & colors.
\* ---------------------------------------------------------- */

html {
  color: rgba(22, 22, 22, 0.8);

  font: 80%/1.6 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Vazirmatn, Courier New, monospace;
}

body {
  font-size: 1.26em;
}

h1,
h2 {
  font-family: ui-monospace, sfmono-regular, menlo, monaco, consolas, liberation mono, vazirmatn, courier new, monospace;
  font-weight: normal;
}

::-moz-selection {
  color: white;
  background: #3398ff;
}

::selection {
  color: white;
  background: #3398ff;
}

/* ---------------------------------------------------------- *\
 * Basic elements.
\* ---------------------------------------------------------- */

h1 {
  margin: 0;

  font-size: 2.8em;
}

h2 {
  margin: 25px 0 15px 0;

  font-size: 1.9em;
}

h3 {
  font-size: inherit;
  font-weight: bold;
}

img {
  max-width: 100%;
}

p {
  margin: 15px 0;
}

p:last-child {
  margin-bottom: 0;
}

/* Lists. */

ul,
ol {
  margin: 15px 0;
  padding-left: 30px;
}

ul:last-child,
ol:last-child {
  margin-bottom: 0;
}

ul {
  list-style-type: square;
}

dl {
  margin: 0;
}

dt {
  font-weight: bold;
}

dd {
  margin: 0;
}

dd + dt {
  margin-top: 15px;
}

/* ---------------------------------------------------------- *\
 * Layout.
\* ---------------------------------------------------------- */

body {
  padding: 20px 0;
}

.page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 25px;
  display: flex;
  justify-content: space-between;
  gap: 2em;
}

@media (max-width: 600px) {
   .page {
     flex-direction: column-reverse;
   }

   .nav__title {
     display: none;
    }
}

@media (min-width: 800px) {
  .page-nav {
    min-width: 25%;
    max-width: 25%;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    align-self: flex-start;
  }

  .page-wrapper {
    max-width: 75%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
  }

  .factsheet__list {
    display: grid;
    grid-gap: 1em;
	grid-template: auto / 20em 1fr;
  }
}

/* ---------------------------------------------------------- *\
 * Micro Components.
\* ---------------------------------------------------------- */

.clearfix::after {
  display: table;
  clear: both;

  content: " ";
}

.capitalize {
  text-transform: capitalize;
}

/* ---------------------------------------------------------- *\
 * Components - Links.
\* ---------------------------------------------------------- */

a,
a:visited {
  color: #70acc7;

  text-decoration: none;
}

a:hover {
  color: #70acc7;

  text-decoration: underline;
}

a:focus {
  outline: thin dotted;
}

a:active,
a:hover {
  outline: none;
}

/* ---------------------------------------------------------- *\
 * Components - Page Header.
\* ---------------------------------------------------------- */

.page-header img {
  display: block;
}

/* ---------------------------------------------------------- *\
 * Components - Nav.
\* ---------------------------------------------------------- */

.nav {
  margin-bottom: 30px;
}

.nav__title {
  padding: 0 15px;

  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  line-height: 1;
}

.nav__title a,
.nav__title a:visited,
.nav__title a:hover {
  color: inherit;

  text-decoration: none;
}

.nav__subtitle {
  padding: 5px 15px;
}

.nav__list {
  padding: 0;

  list-style: none;
}

.nav__item,
.nav__item:visited {
  display: block;

  padding: 1rem;

  color: inherit;
}

.nav__item:hover {
  color: inherit;
  background: #f9fafb;
  border-radius: 1.7rem;

  text-decoration: none;
}

.nav__item:focus {
  background: rgba(0, 0, 0, 0.05);
  outline: none;
}


/* ---------------------------------------------------------- *\
 * Components - Block.
\* ---------------------------------------------------------- */

.block {
  margin-bottom: 15px;
  padding-bottom: 15px;

  border-bottom: 1px solid rgb(221, 221, 221);
}

.block__notice {
  margin-bottom: 15px;
  padding: 10px;

  color: rgba(22, 22, 22, 0.8);
  background: #70acc7;
  border-radius: 1rem;
}

.block__notice a {
  color: inherit;
}

/* ---------------------------------------------------------- *\
 * Components - Images Gallery.
\* ---------------------------------------------------------- */

.gallery {
  margin-top: 2rem;
  width: 100%;
  -moz-column-gap: 20px;
  -webkit-column-gap: 20px;
  -moz-column-count: 1;
  -webkit-column-count: 1;
  column-count: 1;
}

.gallery__item {
  display: inline-block;
  width: 100%;
}

@media  (min-width:800px) {
    .gallery {
      -moz-column-count: 2;
      -webkit-column-count: 2;
      column-count: 2;
    }
}

.gallery__item img {
  width: 100%;
}

.gallery__item a[href$=".gif"] {
  position: relative;

  display: inline-block;
}

.gallery__item a[href$=".gif"]:focus:active {
  outline: none;
}

.gallery__item a[href$=".gif"]::after {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;

  display: none;

  width: 100%;
  height: 100%;
  padding: 20px;

  background: rgba(0, 0, 0, 0.25);

  content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAMAAAC7IEhfAAAABGdBTUEAALGPC/xhBQAAAFFQTFRFAAAA/////////////////////////////Pz8/Pz8/Pz8/f39/f39/f39/f39/f39/f39/Pz8/Pz8/Pz8/Pz8/v7+/f39/f39/f39/f39/f395zF2nQAAABt0Uk5TAAEJCxQeIEpXYGFnc3V2d5WarK2/xNLb3N3m8ZFI2gAAAOlJREFUOMuVlckOgzAMRAdIWUrKUgK4/v8P7QWVLA64c0RPY9mxByBQ3U/LSrQuU18jKzM49uQGI2KVJY5Etkq5ZmNBWxNhheWMbOFz5cxZzaXnd8Exz6en5UvZXx98o6OjarsDtyop/Hrnixt/zm3x/AggGQCj/6UFHpLpAMBFICRTB9Qcg6JpjV4ABdMekwSmphMWGUTRBaYL1gwYma6gLBiYEvYr8HTZ9aXzzVDYjHo88sA7SgaufkJhKRI7Zgdg0K5ZtLiC3bG46lPQH5f6XPUBoI8UdUjpY08fpH9EMwAzqsL+5vfxBcKnb1vURTbUAAAAAElFTkSuQmCC");

  align-items: center;
  justify-content: center;
}

.gallery__item a[href$=".gif"].show-overlay::after {
  display: flex;
}

/* ---------------------------------------------------------- *\
 * Components - Logo.
\* ---------------------------------------------------------- */

@media (min-width: 800px) {
  .logo {
    max-width: 49%;
  }
}

/* ---------------------------------------------------------- *\
 * Components - Video player.
\* ---------------------------------------------------------- */

.video-player {
  position: relative;

  padding-bottom: 56.25%; /* 16:9 */
}

.video-player__frame {
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;
}

/* ---------------------------------------------------------- *\
 * Components - Quote.
\* ---------------------------------------------------------- */

.quote__content {
  margin: 0;
}

.quote__content::before {
  content: open-quote;
}

.quote__content::after {
  content: close-quote;
}

.quote__author::before {
  content: "-";
}

/* ---------------------------------------------------------- *\
 * Components - Button.
\* ---------------------------------------------------------- */

.button {
  display: inline-block;
  padding: 1em;
  background-color: rgb(209, 193, 215);
  border-radius: 5px;
  color: rgba(22, 22, 22, 0.8);
}

.button:hover {
  cursor: pointer;
  text-decoration: none;
  color: rgba(22, 22, 22, 0.8);
  background-color: #b0a3b5;
}

.button:focus {
  border: 1px solid #3398ff;
  outline: none;
}

.button:active {
  color: white;
  background: -webkit-linear-gradient(top, #3398ff, #0077dd);
  background:         linear-gradient(to bottom, #3398ff, #0077dd);
}

.button-secondary {
  display: inline-block;
  padding: 1em;
  color: rgba(22, 22, 22, 0.8);
  background-color: #70acc7;
  border-radius: 5px;
}

.button-secondary:hover {
  cursor: pointer;
  text-decoration: none;
  color: rgba(22, 22, 22, 0.8);
  background-color: #7faabe;
}

.button-secondary:focus {
  border: 1px solid #3398ff;
  outline: none;
}

.button-secondary:active {
  color: white;
  background: -webkit-linear-gradient(top, #3398ff, #0077dd);
  background:         linear-gradient(to bottom, #3398ff, #0077dd);
}

/* ---------------------------------------------------------- *\
 * Widgets.
\* ---------------------------------------------------------- */

.widget {
  width: 100%;
}

.widget--steam {
  height: 190px;
}

.widget--humble {
  height: 328px;
}

@media (max-width: 505px) {
  .widget--humble {
    height: 205px;
  }
}

.widget--itch {
  height: 167px;
}

.widget--gamejolt {
  height: 245px;
}

.widget--bandcamp {
  width: 100%;
  height: 120px;

  border: 0;
}

/* ---------------------------------------------------------- *\
 * Hacks.
\* ---------------------------------------------------------- */

@media (min-width: 800px) {
  ._team-fix-margin-top {
    margin-top: -15px;
  }
}