/*
$primary:       $blue !default;
$secondary:     $gray-600 !default;

$light:         $gray-100 !default;
$dark:          $gray-800 !default;
*/

/**/

@font-face {
  font-family: "Crimson";
  src: url(/fonts/CrimsonText-SemiBold.woff2?d728acdce889c025288d45cd031d307d) format("woff2"), url(/fonts/CrimsonText-SemiBold.woff?47bf1af9d735ec67632eba450c1719f6) format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Lexend";
  src: url(/fonts/Lexend-Regular.woff2?b1042264af1c56a5b370152d52511f40) format("woff2"), url(/fonts/Lexend-Regular.woff?724371d8a1acda96787efa1373a9f14e) format("woff");
  font-weight: normal;
  font-style: normal;
}

:root {
  scrollbar-color: #F8B36F #100c13;
  scrollbar-width: thin;
}

html {
  font-size: 16px;
}

body {
  color: #cacaca;
  font-family: "Lexend", serif;
  font-size: 1rem;
  letter-spacing: 1px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.625;
  background-color: #100c13;
  width: 100%;
  min-height: 100vh;
  margin: 0 auto;
}

@media all and (min-width: 600px) {
  body {
    width: 600px;
  }
}

.layout-content {
  width: 100%;
  margin: 0 auto;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center bottom;
}

.layout-content .centered {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 90%;
  margin: 0 auto;
}

.layout-content .logo img {
  max-width: 100%;
  height: auto;
}

.layout-content .subtitle {
  margin-bottom: 2rem;
  color: #F8B36F;
  font-family: "Crimson", sans-serif;
  font-size: 2rem;
  font-style: normal;
  line-height: 2rem;
  text-align: center;
}

.layout-content .trailer {
  width: 75%;
  margin-bottom: 2rem;
}

.layout-content .trailer a {
  position: relative;
  padding: 56.75% 0 0 0;
  overflow: hidden;
  width: 100%;
}

.layout-content .trailer a:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 71px;
  height: 49px;
  background: url(/images/play-icon.png?c1d9d5d84ad76ea8596a91fdf1829a16);
  background-size: cover;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.layout-content .trailer a img {
  position: absolute;
  display: block;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  min-height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.layout-content .buttons {
  margin-bottom: 2rem;
  gap: 1rem;
}

.layout-content .buttons .btn {
  width: 500px;
  height: 100px;
  max-width: 100%;
  text-decoration: none !important;
  color: #fff;
  font-family: "Crimson", sans-serif;
  font-size: 2rem;
  font-style: normal;
  line-height: 2rem;
  letter-spacing: normal;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background 0.25s ease-in-out;
  border: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
  background: url(/images/btn-large.png?6fb8a93242db54d818eded03453fff2a);
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  position: relative;
}

.layout-content .buttons .btn span {
  padding: 0 80px 0 160px;
  text-shadow: 0 0 3px #000;
}

.layout-content .buttons .btn:focus-visible {
  box-shadow: 0 0 0 0.2rem #3A1D37 !important;
}

.layout-content .buttons .btn:before {
  content: "";
  position: absolute;
  left: 20px;
  top: 50%;
  width: 160px;
  height: 90px;
  transform: translate(0, -50%);
}

.layout-content .buttons .btn.steam:before {
  background: url(/images/btn-steam.svg?0327c8c625074b2ddcd2b9ff1810adb2);
  background-size: 60px 60px;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

.layout-content .buttons .btn.xbox:before {
  background: url(/images/btn-xbox.svg?16c483de9672a1099891927cf02e3695);
  background-size: 60px 60px;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

.layout-content .buttons .btn.ps:before {
  background: url(/images/btn-playstation.svg?50569c6478e2360542c148477091ef90);
  background-size: 60px 60px;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

.layout-content .buttons .btn.newsletter:before {
  background: url(/images/btn-newsletter.svg?c2fd93465477f44353f75a1b381a76df);
  background-size: 82px 50px;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

.layout-content .buttons .btn.website:before {
  background: url(/images/btn-website.svg?8e7704376accdabd3120533d960dbaeb);
  background-size: 118px 80px;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

.layout-content .buttons .btn.generic:before {
  background: url(/images/btn-generic.svg?165b47a8c87eb254a0e37269344ba4f1);
  background-size: 40px 40px;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

.layout-content .socials {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 35rem;
}

.layout-content .socials a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 120px;
  height: 119px;
  background: url(/images/btn-small.png?53caa09a3553f9e1ba60d944154e4425);
  text-decoration: none;
}

.layout-content .socials a i {
  color: #fff;
  font-size: 35px;
}

.layout-content .footer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
  text-align: center;
}

.layout-content .footer img {
  max-width: 250px;
}

.layout-content .footer p,
.layout-content .footer a {
  font-size: 10px;
  line-height: normal;
  color: #fff !important;
  width: -moz-fit-content;
  width: fit-content;
}

.layout-content .footer a {
  text-decoration: underline;
}