@font-face {
  font-family: KawaHand;
  src: url("kawahand.ttf");
}

@font-face {
  font-family: SdHand;
  src: url("sdhand.ttf");
}

@font-face {
  font-family: Hxjff;
  src: url("hxjff-regular.ttf");
}

@font-face {
  font-family: KindergartenClassroom;
  src: url("kindergarten-classroom.ttf");
}




html {
  width: 100%;
  height: 100%;
  background: #ff67f4 url('eyeroom.png'); /* Replace with your image */
  background-size: cover; /* Makes it cover the whole viewport */
  background-repeat: no-repeat; /* Prevent tiling */
  background-attachment: fixed; /* Keeps it fixed during scroll */
  background-position: center; /* Center the image */
  /*background: #F9E2FF;
   scrollbar-width: none; Hide scrollbar in Firefox */
}

/* html::-webkit-scrollbar {
  display: none; Hide scrollbar in Chrome/Safari 
}*/

.banner {
  height: 150px;
}

body {
  font-family: KindergartenClassroom;
  font-size: 20px;
  color: black; 
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100vh; 
}

/*
body::after {
  content: "";
  position: fixed;
  top: 0;
  right: 0;
  width: 50vw;
  height: 100vh;
  pointer-events: none; 
  background: white;
  mix-blend-mode: difference;
  z-index: 100;
}


.grid-container {
  display: grid;
  grid-template-rows: auto 1fr;  header height adjusts, content fills 
  min-height: 100vh;
}*/


.header {
  height: 20vh;
  z-index: 2;
  background: 
    url("header.png");
  background-size: 100% 100%;
  overflow: hidden;
  padding: 0 5%;                       /* horizontal padding */
  margin-bottom: 1em;
  column-gap: 1rem;                     /* spacing between columns */
}

.center-image {
  display: block;       /* Makes the image behave like a block element */
  margin: 0 auto;       /* Auto left & right margin centers it horizontally */
  max-width: 100%;
}

.sd-handtext {
  font-family:SdHand;
}




.content-container {
  width: 90%;
  max-width: 1500px;
  margin: 0 auto; /* centers it */
}

/* main containers*/

.major-container {
  width: 90%;
  max-width: 1500px;
  margin: 2rem auto;
}

.minor-container {
  width: 90%;
  max-width: 1200px;
  margin: 2rem auto;
}

.meta {
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2), 0 1px 5px 0 rgba(0,0,0,0.19);
    background: white;
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 1em;
}

#logoCanvas {
  height:14vh;
  width: auto;
  position: absolute;
  top: 20vh;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
}

.meta-title {
  padding: 2px 6px;
  background: 
    url("paper_texture.png"),
    linear-gradient(
      to right,
      #ff67f4 0%,
      #B4A4DE 48%, /* end of pink */
      #888888 52%, /* start of grey */
      #AC0000 100%
    );
  border-radius: 8px;
  margin-bottom: 1em;
color: #ede3ee;
}


h1 {
  font-family: SdHand;
  font-size: 4rem;
  margin-bottom: 1rem;
  font-weight:normal;
}
h1 a {
  text-decoration: none;
}

h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

h3 {
  margin: 0 0 0.5rem;
  color: #FB62BC;
}


button {
  font-family: KawaHand;
  font-size: 20px;
  background-color: #FBAFE0;
  color: #FB62BC;
  padding: 2px 6px;
  border-radius: 4px;
  margin-right: 4px;
  display: inline-block;
  border: none;
  cursor: pointer;
  transition: transform 0.3s ease;
}
button:hover {
  transform: scale(1.1);
  z-index: 10;
}

a {
  color: #FB62BC;
}

.tag-button {
  font-family: KawaHand;
  font-size: 20px;
  background-color: #FBAFE0;
  color: #FB62BC;
  padding: 2px 6px;
  border-radius: 4px;
  margin-right: 4px;
  display: inline-block;
  border: none;
  cursor: pointer;
  transition: transform 0.3s ease;
}
.tag-button:hover {
  transform: scale(1.1);
  z-index: 10;
}

.text-img {
  height: 1em;
}

.tags-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
  padding: 1em;
  margin: auto;
}

/* comms grid */

.comms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
  padding: 1em;
  margin: auto;
}

.comms-item {
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2), 0 1px 5px 0 rgba(0,0,0,0.19);
  flex: 0 0 calc(100% / 9);
  padding: 0px;
  margin: 10px;
  border-radius: 8px;
  z-index: 1;
  cursor: pointer;
  transition: transform 0.3s ease;
}
.comms-item:hover {
  transform: scale(1.05);
  z-index: 10;
}


/* carousel */

.carousel-container {
  position: relative;
  margin: auto;
  margin-bottom: 1em;
}

.carousel-track {
  display: flex;
  overflow-x: hidden;
  overflow-y: visible;
  scroll-behavior: smooth;
  scrollbar-width: none; /* Hide scrollbar in Firefox */
  background: url("carousel.png");
  background-size: 100% 100%;
  border-radius: 8px;
  isolation: isolate;
  /* padding: 20px 0; */
}

.carousel-track::-webkit-scrollbar {
  display: none; /* Hide scrollbar in Chrome/Safari */
}

.carousel-item {
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2), 0 1px 5px 0 rgba(0,0,0,0.19);
  background: 
    url("cardboard.jpg");
  background-size: auto 100%;
  flex: 0 0 calc(100% / 9);
  padding: 10px;
  margin: 10px;
  border-radius: 8px;
  z-index: 1;
  cursor: pointer;
  transition: transform 0.3s ease;
}
.carousel-item:hover {
  transform: scale(1.05);
  z-index: 10;
  mix-blend-mode: difference;
}

.carousel-item text {
  color: white;
  font-size: 15px;
}

.game-tags text {
  background-color: #FBAFE0;
  color: #FB62BC;
  padding: 2px 6px;
  border-radius: 4px;
  margin-right: 4px;
  display: inline-block;
  font-family: KawaHand;
}


.carousel-item img {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.arrow {
  border: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  padding: 0px;
  cursor: pointer;
  z-index: 2;
  transition: transform 0.3s ease;
}
.arrow:hover {
  transform: translateY(-50%) scale(1.2);
  z-index: 11;
}

.arrow.left {
  left: -2%;
}

.arrow.right {
  right: -2%;
}

.window {
  position: fixed;
  z-index: 9999;
  background: rgba(255, 0, 255, 0.2); /* slightly transparent */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); /* for Safari */
  border: 1px solid black;
  text-align: left;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
}

.titlebar {
  padding: 10px;
  cursor: move;
  z-index: 10;
  color: #fff;
}
.hideBtn {
  background-color: black;
  color: magenta;
  border: black outset;
  border-radius: 0px;
} 
.hideBtn:active {
  border: black inset;
  }