.icon::before {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased; }

.icon-twitter::before {
  font-family: "Font Awesome 5 Brands";
  content: "\f099"; }

.icon-instagram::before {
  font-family: "Font Awesome 5 Brands";
  content: "\f16d"; }

.icon-mailchimp::before {
  font-family: "Font Awesome 5 Brands";
  content: "\f59e"; }

.icon-newsletter::before {
  font-family: "Font Awesome 5 Free";
  content: "\f0e0"; }

.icon-telegram::before {
  font-family: "Font Awesome 5 Brands";
  content: "\f3fe"; }

.icon-itch::before {
  font-family: "Font Awesome 5 Brands";
  content: "\f83a"; }

.icon-linkedin::before {
  font-family: "Font Awesome 5 Brands";
  content: "\f08c"; }

.icon-discord::before {
  font-family: "Font Awesome 5 Brands";
  content: "\f392"; }

.icon-tiktok::before {
  font-family: "Font Awesome 5 Brands";
  content: "\e07b"; }

@font-face {
  font-family: "theBoldFont";
  src: url("/fonts/theboldfont.ttf"); }

* {
  margin: 0;
  padding: 0; }

body .index {
  background-image: url("/images/background.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position-x: center;
  background-position-y: top;
  min-height: 100vh;
  height: 100%;
  width: 100%; }
  body .index .column {
    color: white;
    margin-left: auto;
    margin-right: auto;
    height: 100%;
    padding-bottom: 10px; }
    body .index .column .title {
      margin-bottom: 50px; }
      body .index .column .title img {
        width: 80%;
        margin: auto;
        display: block;
        padding-top: 50px; }
        @media only screen and (min-width: 800px) {
          body .index .column .title img {
            max-width: 800px;
            width: 100%; } }
    body .index .column nav ul {
      text-align: center; }
      body .index .column nav ul li {
        background-color: rgba(0, 0, 0, 0.41);
        border-radius: 5px;
        padding: 5px;
        padding-left: 10px;
        padding-right: 10px;
        margin: 5px;
        display: inline-block;
        list-style: none; }
        body .index .column nav ul li a {
          text-decoration: none;
          color: white; }
          body .index .column nav ul li a:hover {
            color: #ff2828; }
        body .index .column nav ul li:hover {
          background-color: rgba(0, 0, 0, 0.671); }
  body .index .content .container {
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    background-color: rgba(0, 0, 0, 0.774);
    padding: 10px;
    border-radius: 5px;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 35% 65%;
    grid-template-columns: 35% 65%; }
    @media only screen and (max-width: 800px) {
      body .index .content .container {
        -ms-grid-columns: auto;
        grid-template-columns: auto;
        row-gap: 5px; } }
    body .index .content .container .image {
      margin-top: auto;
      margin-bottom: auto;
      margin-left: -25%; }
      body .index .content .container .image img {
        height: 240px;
        display: flex;
        border-bottom-left-radius: 5px;
        border-top-left-radius: 5px; }
        @media only screen and (max-width: 800px) {
          body .index .content .container .image img {
            -ms-grid-columns: auto;
            grid-template-columns: auto;
            border-radius: 5px;
            height: auto;
            max-width: 100%; } }
      @media only screen and (max-width: 800px) {
        body .index .content .container .image {
          margin-left: 0px; } }
    body .index .content .container .textContainer {
      color: white;
      margin-right: 10px;
      margin-left: 20px;
      height: 100%;
      display: inline-block;
      font-size: 12pt; }
      body .index .content .container .textContainer h3 {
        font-size: 20pt;
        text-align: right; }
      body .index .content .container .textContainer .text {
        direction: ltr;
        color: #fff1f1;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, "Avenir Next", "Avenir", "Segoe UI", "Lucida Grande", "Helvetica Neue", "Helvetica", "Fira Sans", "Roboto", "Noto", "Droid Sans", "Cantarell", "Oxygen", "Ubuntu", "Franklin Gothic Medium", "Century Gothic", "Liberation Sans", sans-serif;
        height: 100%;
        text-align: justify; }
      @media only screen and (max-width: 800px) {
        body .index .content .container .textContainer {
          margin-right: 0px;
          margin-left: 0px; }
          body .index .content .container .textContainer h3 {
            text-align: center; } }
  @media only screen and (min-width: 800px) {
    body .index .content .container-right {
      direction: rtl; }
      body .index .content .container-right .image {
        margin-right: -25%;
        margin-left: 0%; }
        body .index .content .container-right .image img {
          border-bottom-right-radius: 5px;
          border-top-right-radius: 5px;
          border-bottom-left-radius: 0px;
          border-top-left-radius: 0px; }
      body .index .content .container-right .textContainer {
        margin-left: 10px;
        margin-right: 20px; }
        body .index .content .container-right .textContainer h3 {
          text-align: left; } }
  body .index .fullLine {
    color: white;
    background-color: rgba(75, 75, 75, 0.411);
    width: 100%;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-top: 50px;
    padding-bottom: 50px; }
  body .index .screenshots {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (calc(100% / 3 - 20px/3))[3];
    grid-template-columns: repeat(3, calc(100% / 3 - 20px/3));
    gap: 10px; }
    body .index .screenshots li {
      display: inline-block; }
      body .index .screenshots li img {
        width: 100%; }
    @media only screen and (min-width: 800px) {
      body .index .screenshots .upperLeftScreenshotImage {
        border-top-left-radius: 5px; }
      body .index .screenshots .upperRightScreenshotImage {
        border-top-right-radius: 5px; }
      body .index .screenshots .lowerLeftScreenshotImage {
        border-bottom-left-radius: 5px; }
      body .index .screenshots .lowerRightScreenshotImage {
        border-bottom-right-radius: 5px; } }
    @media only screen and (max-width: 800px) {
      body .index .screenshots {
        -ms-grid-columns: auto;
        grid-template-columns: auto;
        gap: 0px;
        row-gap: 10px;
        width: 80%; }
        body .index .screenshots img {
          border-radius: 5px; } }
  body .index .darkBackground {
    background-color: rgba(0, 0, 0, 0.774); }
  body .index .info {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (calc(100% / 3 - 20px/3))[3];
    grid-template-columns: repeat(3, calc(100% / 3 - 20px/3));
    gap: 10px; }
    body .index .info .infoContainer {
      text-align: left;
      display: inline-block; }
      body .index .info .infoContainer p {
        color: #fff1f1;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, "Avenir Next", "Avenir", "Segoe UI", "Lucida Grande", "Helvetica Neue", "Helvetica", "Fira Sans", "Roboto", "Noto", "Droid Sans", "Cantarell", "Oxygen", "Ubuntu", "Franklin Gothic Medium", "Century Gothic", "Liberation Sans", sans-serif;
        margin-bottom: 10px; }
        body .index .info .infoContainer p a {
          color: white;
          text-decoration: none; }
          body .index .info .infoContainer p a:hover {
            color: #ff2828; }
    @media only screen and (max-width: 800px) {
      body .index .info {
        -ms-grid-columns: auto;
        grid-template-columns: auto;
        gap: 0px;
        row-gap: 10px;
        margin-left: 10px;
        margin-right: 10px; } }
.bottomContainer {
  margin-bottom: 0px !important;
  margin-top: 10px !important;
  padding-bottom: 10px !important; }

.columnWidth {
  width: 800px;
  margin-left: auto;
  margin-right: auto; }
  @media only screen and (max-width: 800px) {
    .columnWidth {
      width: 80%; } }
.img > img {
  -webkit-transition: 500ms -webkit-transform;
  transition: 500ms -webkit-transform;
  transition: 500ms transform;
  transition: 500ms transform, 500ms -webkit-transform; }

.img > img:hover {
  -webkit-transform: scale(1.5);
          transform: scale(1.5);
  -webkit-box-shadow: 0.3em 0.3em 1em rgba(0, 0, 0, 0.3);
          box-shadow: 0.3em 0.3em 1em rgba(0, 0, 0, 0.3);
  border-radius: 5px; }

.quote {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Avenir Next", "Avenir", "Segoe UI", "Lucida Grande", "Helvetica Neue", "Helvetica", "Fira Sans", "Roboto", "Noto", "Droid Sans", "Cantarell", "Oxygen", "Ubuntu", "Franklin Gothic Medium", "Century Gothic", "Liberation Sans", sans-serif; }

.gameText {
  text-align: justify;
  color: white; }

.copyright {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Avenir Next", "Avenir", "Segoe UI", "Lucida Grande", "Helvetica Neue", "Helvetica", "Fira Sans", "Roboto", "Noto", "Droid Sans", "Cantarell", "Oxygen", "Ubuntu", "Franklin Gothic Medium", "Century Gothic", "Liberation Sans", sans-serif;
  font-size: 10px;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 0px; }

.NoColor {
  background-color: transparent !important; }

#Support {
  margin-top: 10px !important;
  margin-bottom: 10px !important;
  font-size: 1.1em; }
  #Support svg {
    width: 200px;
    padding-top: 40px;
    -webkit-transition: 500ms;
    transition: 500ms; }
    #Support svg:hover {
      -webkit-transform: scale(1.5);
              transform: scale(1.5); }
      #Support svg:hover .proHelvetiaLogo {
        fill: #ff2828; }
    #Support svg .proHelvetiaLogo {
      fill: white;
      -webkit-transition: 500ms;
      transition: 500ms; }

#gameProperties {
  width: 100%;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: auto auto auto auto;
  grid-template-columns: auto auto auto auto;
  margin-top: 20px; }

.GameProperty {
  margin-left: auto;
  margin-right: auto;
  -webkit-transition: 500ms -webkit-transform;
  transition: 500ms -webkit-transform;
  transition: 500ms transform;
  transition: 500ms transform, 500ms -webkit-transform;
  mix-blend-mode: screen; }
  .GameProperty:hover {
    -webkit-transform: scale(1.5);
            transform: scale(1.5); }

.GamePropertyIconCircle {
  color: black;
  text-align: center;
  border-radius: 35px;
  width: 70px;
  height: 70px;
  background-color: #fff1f1;
  display: block;
  mix-blend-mode: screen;
  font-size: 40px;
  margin-left: auto;
  margin-right: auto; }

.GamePropertyIcon {
  margin-top: 15px; }

.GamePropertyText {
  margin-top: 5px;
  font-size: 12px;
  color: #fff1f1;
  text-align: center; }

#sleeping {
  width: 120px;
  margin-top: 50px;
  -o-object-fit: contain;
     object-fit: contain; }

#StoreProperties {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: auto auto;
  grid-template-columns: auto auto;
  margin-top: 20px; }
  @media only screen and (max-width: 800px) {
    #StoreProperties {
      -ms-grid-columns: auto;
      grid-template-columns: auto;
      margin-left: 10px;
      margin-right: 10px; } }
.StoreProperty {
  margin-left: auto;
  margin-right: auto;
  -webkit-transition: 500ms -webkit-transform;
  transition: 500ms -webkit-transform;
  transition: 500ms transform;
  transition: 500ms transform, 500ms -webkit-transform; }
  .StoreProperty:hover {
    -webkit-transform: scale(1.5);
            transform: scale(1.5); }

.StorePropertyIcon {
  margin-top: -30px; }
  @media only screen and (max-width: 400px) {
    .StorePropertyIcon {
      margin-top: 0; } }
  .StorePropertyIcon svg {
    width: 300px; }
    @media only screen and (max-width: 400px) {
      .StorePropertyIcon svg {
        width: 100%; } }
    .StorePropertyIcon svg .storeLogo {
      fill: white;
      -webkit-transition: 500ms;
      transition: 500ms; }
    .StorePropertyIcon svg .steamLogoBackground {
      fill: black; }
  .StorePropertyIcon a:hover .storeLogo {
    fill: #ff2828; }

.StorePropertyText {
  margin-top: 5px;
  font-size: 12px;
  color: #fff1f1;
  text-align: center; }