@font-face {
  font-family: "Clash Grotesk";
  src: url("//cdn.fontshare.com/wf/4LBWQBEAT7WMBLPYHDTSGFMVYM7YP52X/7KPUND2QF7YEOZXDNBOHQRJKQWHIG2TW/O7I6PUTWFICZ67CVKIGGMX2EF3RHEAKS.woff2")
      format("woff2"),
    url("//cdn.fontshare.com/wf/4LBWQBEAT7WMBLPYHDTSGFMVYM7YP52X/7KPUND2QF7YEOZXDNBOHQRJKQWHIG2TW/O7I6PUTWFICZ67CVKIGGMX2EF3RHEAKS.woff")
      format("woff"),
    url("//cdn.fontshare.com/wf/4LBWQBEAT7WMBLPYHDTSGFMVYM7YP52X/7KPUND2QF7YEOZXDNBOHQRJKQWHIG2TW/O7I6PUTWFICZ67CVKIGGMX2EF3RHEAKS.ttf")
      format("truetype");
  font-weight: 200;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Clash Grotesk";
  src: url("//cdn.fontshare.com/wf/SINQ57HHHPFVR2H2M32ZNEFSVLE2LFD2/7IAKEQYNYVZZQGJW7R4Y7C5IZ7XHSFQO/DKSXVIDJANOLWNE4OACLWSGITSUTBGB3.woff2")
      format("woff2"),
    url("//cdn.fontshare.com/wf/SINQ57HHHPFVR2H2M32ZNEFSVLE2LFD2/7IAKEQYNYVZZQGJW7R4Y7C5IZ7XHSFQO/DKSXVIDJANOLWNE4OACLWSGITSUTBGB3.woff")
      format("woff"),
    url("//cdn.fontshare.com/wf/SINQ57HHHPFVR2H2M32ZNEFSVLE2LFD2/7IAKEQYNYVZZQGJW7R4Y7C5IZ7XHSFQO/DKSXVIDJANOLWNE4OACLWSGITSUTBGB3.ttf")
      format("truetype");
  font-weight: 300;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Clash Grotesk";
  src: url("//cdn.fontshare.com/wf/O462VY6O6FTQCS72XVMTQHXAM4NN5CY3/TWF57ITZORMJ3MEWLQQIVO6BMXIB6FUR/MJQFMMOTEGNXDVM7HBBDTQHTVB2M7Y6G.woff2")
      format("woff2"),
    url("//cdn.fontshare.com/wf/O462VY6O6FTQCS72XVMTQHXAM4NN5CY3/TWF57ITZORMJ3MEWLQQIVO6BMXIB6FUR/MJQFMMOTEGNXDVM7HBBDTQHTVB2M7Y6G.woff")
      format("woff"),
    url("//cdn.fontshare.com/wf/O462VY6O6FTQCS72XVMTQHXAM4NN5CY3/TWF57ITZORMJ3MEWLQQIVO6BMXIB6FUR/MJQFMMOTEGNXDVM7HBBDTQHTVB2M7Y6G.ttf")
      format("truetype");
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: "Clash Grotesk";
  src: url("//cdn.fontshare.com/wf/MKEEQN57GWBZOSYWCRODNJOOZNPLMAKN/5SPTSZGHEACWWLF34DQ4WAA4OGU6PQIF/KN7DX4F6PXB74R6L2K2Y4NH3CB7FC53Q.woff2")
      format("woff2"),
    url("//cdn.fontshare.com/wf/MKEEQN57GWBZOSYWCRODNJOOZNPLMAKN/5SPTSZGHEACWWLF34DQ4WAA4OGU6PQIF/KN7DX4F6PXB74R6L2K2Y4NH3CB7FC53Q.woff")
      format("woff"),
    url("//cdn.fontshare.com/wf/MKEEQN57GWBZOSYWCRODNJOOZNPLMAKN/5SPTSZGHEACWWLF34DQ4WAA4OGU6PQIF/KN7DX4F6PXB74R6L2K2Y4NH3CB7FC53Q.ttf")
      format("truetype");
  font-weight: 600;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: "Clash Grotesk";
  src: url("./Fonts/ClashGrotesk-Bold.woff2") format("woff2"),
    url("./Fonts/ClashGrotesk-Bold.woff") format("woff"),
    url("./Fonts/ClashGrotesk-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: "Clash Grotesk";
  src: url("./Fonts/ClashGrotesk-Medium.woff2") format("woff2"),
    url("./Fonts/ClashGrotesk-Medium.woff") format("woff"),
    url("./Fonts/ClashGrotesk-Medium.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}

* {
  color: #fff;
  text-align: center;
  font-family: "Clash Grotesk", "Courier New", Courier, monospace;
  font-weight: 700;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: #221c57;
}

#unity-canvas {
  width: 100%;
  height: 100%;
  margin: 0;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: #221c57;
}

h1 {
  font-size: 5.3rem;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

p {
  font-family: "ClashGrotesk-Medium", sans-serif;
  font-size: 1rem;
  margin-bottom: 1.2rem;
}

a {
  cursor: pointer;
}

a:link {
  text-decoration: inherit;
  color: inherit;
}

a:visited {
  text-decoration: inherit;
  color: inherit;
}

/* #region TEMPORARY */

h1 {
  font-family: "Clash Grotesk", sans-serif;
}

#hero {
  position: fixed;
  width: 100%;
  bottom: 30px;
}

#social-cont {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
  position: fixed;
  width: 100%;
}

.link-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;

}

svg{
  transition: all 0.2s ease-in-out;
}

.link-logo:hover svg{
  transform: translateY(-4px);
}

/* #endregion TEMPORARY */
#navbar {
  /* background-color: #095fbb86; */
  width: 100%;
  height: 50px;
  z-index: 4;
  padding: 10px;
  position: absolute;
}

#navbar-content {
  max-width: 1200px;
  margin: auto;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 20px;
}

.navbar-links {
  list-style: none;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 20px;
}

#unity-mask {
  width: 100%;
  height: 100%;
  z-index: 1;
  position: relative;
}

#page {
  width: 100%;
  height: 100%;
  z-index: 2;
  overflow-y: scroll;
  overflow-x: hidden;
  scroll-behavior: smooth;
  position: relative;
  /* scroll-snap-type: y mandatory; */
}

#hero-cont {
  position: absolute;
  bottom: 36px;
  width: 100%;
}

#title {
  width: 100%;
  min-width: 900px;
  margin: 0 0 0 2rem;
  font-size: 110px;
  text-align: start;

  display: flex;
  flex-direction: row;
  --text-anim-delay: 80ms;
  
}

.anim-riseup-letter-cont{
  overflow: hidden;
  position: relative;
  height: 110px;

}
.anim-riseup-letter{
  position: relative;
  bottom: -110%;
  display: inline-block;
  animation: riseUp 0.4s ease forwards;
}

.anim-riseup-letter-cont:nth-child(1) .anim-riseup-letter {
  animation-delay: calc(var(--text-anim-delay) * 1);
}
.anim-riseup-letter-cont:nth-child(2) .anim-riseup-letter {
  animation-delay: calc(var(--text-anim-delay) * 2);
}
.anim-riseup-letter-cont:nth-child(3) .anim-riseup-letter {
  animation-delay: calc(var(--text-anim-delay) * 3);
}
.anim-riseup-letter-cont:nth-child(4) .anim-riseup-letter {
  animation-delay: calc(var(--text-anim-delay) * 4);
}
.anim-riseup-letter-cont:nth-child(5) .anim-riseup-letter {
  animation-delay: calc(var(--text-anim-delay) * 5);
}
.anim-riseup-letter-cont:nth-child(6) .anim-riseup-letter {
  animation-delay: calc(var(--text-anim-delay) * 6);
}
.anim-riseup-letter-cont:nth-child(7) .anim-riseup-letter {
  animation-delay: calc(var(--text-anim-delay) * 7);
}
.anim-riseup-letter-cont:nth-child(8) .anim-riseup-letter {
  animation-delay: calc(var(--text-anim-delay) * 8);
}
.anim-riseup-letter-cont:nth-child(9) .anim-riseup-letter {
  animation-delay: calc(var(--text-anim-delay) * 9);
}
.anim-riseup-letter-cont:nth-child(10) .anim-riseup-letter {
  animation-delay: calc(var(--text-anim-delay) * 10);
}
.anim-riseup-letter-cont:nth-child(11) .anim-riseup-letter {
  animation-delay: calc(var(--text-anim-delay) * 11);
}
.anim-riseup-letter-cont:nth-child(12) .anim-riseup-letter {
  animation-delay: calc(var(--text-anim-delay) * 12);
}
.anim-riseup-letter-cont:nth-child(13) .anim-riseup-letter {
  animation-delay: calc(var(--text-anim-delay) * 13);
}
.anim-riseup-letter-cont:nth-child(14) .anim-riseup-letter {
  animation-delay: calc(var(--text-anim-delay) * 14);
}


@keyframes riseUp {
  to {
    bottom: 0;
  }
}

#subtitle {
  font-size: 1.6rem;
  text-align: start;
  display: block;
  margin: 0;
  margin-left: 2.5rem;
  /* line-height: 10; */
}

#scroll-link-cont {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 60px;
  overflow: hidden;
}

#scroll-link {
  font-size: 1.6rem;

  text-align: center;
  z-index: 2;
  right: 0;
  left: 0;
}

.scroll-arrow-cont {
  display: flex;
  flex-direction: column;
  height: 60px;
  transform: scaleX(2);
  padding-top: 2px;
}

.scroll-arrow-part {
  border: 2px solid #fff;
  border-top-width: 0px;
  border-right-width: 0px;
  transform: rotate(-45deg);
  width: 12px;
  height: 12px;
  border-bottom-left-radius: 2px;

  animation: scroll-arrow-part-anim 1000ms ease-in-out 0s infinite alternate both;
}
.scroll-arrow-part:nth-child(2) {
  animation-delay: 500ms;
}
.scroll-arrow-part:nth-child(3) {
  animation-delay: 1000ms;
}

@keyframes scroll-arrow-part-anim {
  from {
    border-color: #fff;
    transform: rotate(-45deg) scale(1.02);
  }

  to {
    border-color: #ffffff09;
    transform: rotate(-45deg) scale(0.96);
  }
}

#games {

  min-width: 100vw;
  min-height: 100vh;
  padding: 10px;
  gap: 10px;
  width: 100%;
  z-index: 2;
  position: relative;
  top: 0;
  overflow: hidden;
  scroll-snap-align: start;

  background-color: #000000bb;
  height: fit-content;
}

.section-title {
  margin: 0 auto;
  text-align: start;
  max-width: 1000px;
  margin-top: 20px;
}

.game-cards-cont {
  margin: auto;
  display: flex;
  flex-direction: row;
  max-width: 800px;
  width: 100%;
  justify-content: center;
  align-items: baseline;
  gap: 15px;
  overflow: hidden;
  flex-wrap: wrap;
  height: fit-content;

  padding: 20px;
  padding-top: 20px;
}

.slick-list {
  height: 100%;
  max-height: 100%;
}

.slick-track {
  display: flex !important;
  flex-direction: row;
  gap: 15px;
  max-height: 100%;
}



.game-card {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border: 1px solid #358a81;
  border-radius: 10px;
  cursor: pointer;
  z-index: 5;
  max-height: 240px;
  max-width: 25%;
}



.game-card.featured {
  background: #000;
}


.game-card:nth-child(1) {
  border-color: #ac9232;
}

.game-card:nth-child(2) {
  border-color: #095fbb;
}


.game-card-shadow{
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  box-shadow: none;
  transition: all 0.2s ease-in-out;
}

.game-card:hover  .game-card-shadow{
  box-shadow: inset 30px 30px 25px #000000b4, inset -30px -30px 25px #000000b4;
}


.game-card-img {
  height: 100%;
  
  object-fit: contain;
  z-index: -1;
  transition: all 0.4s ease;
}

.game-card:hover .game-card-img {
  transform: scale(1.08);
}

.game-card-title {
  position: absolute;
  bottom: 10px;
  font-weight: 600;
  padding: 2px;
  margin: 0;
  margin-left: 10px;
  transition: all 0.2s ease-in-out;
  font-size: 1rem;
}

.game-card.featured .game-card-title{
 bottom: unset;
 top: 10px; 
 right: 10px;
}

.game-card:hover .game-card-title {
  bottom: 30px;
}


.game-card.regular{
  min-width: 250px;
}


.game-card.regular .game-card-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;

}


.game-card-btn{
  background-color: #000;
  padding: 5px 15px;
  color: #fff !important;
  font-size: 12px;
  border-radius: 15px;
  position: absolute;
  right: 10px;
  bottom: -35px;
  border: 1px solid #ffffff7c;
  transition: bottom 0.45s ease, transform 0.3s ease;
}

.game-card:hover .game-card-btn{
  bottom: 10px;
}

.game-card-btn:hover{
  transform: scale(1.08);
}