/* take note na ang vh sa viewport height nya vw viewport width */
/* unya percentage nag depende rana sa pixel*/
/* take note na ang relative ang parent nya ang absolute maoy child kibali ug naay circle mao nang relative ang sud ana mao ang absolute */
/* kanang naay mga :active , :hover ,:normal pseudo element na */

/* pointer-events: none; */

/* so mao ni ang style sa tibuok page */
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  /* font ni sa tanan sud sa body */
  font-family: 'exo', 'chakra petch';

  /* pra ma center */
  text-align: center;

  /* pra wa nay margin */
  margin: 0;
}
/* so kani is pra sa page  */
.page {
  /* tanan nga naay class nga page ma hide nimo */
  display: none;

  /* distance sa ibabaw */
  margin-top: 50px;
}

#intro {
  /* kina unhan nga page maoy makita */
  display: block;

  /* sukod  sa imong intro box */
  width: 100%;

  height: 50vh;

  /* background cover kanang kape */
  background-image: url('gif/bg.gif');

  /* div nimos intro ma cover ani */
  background-size: cover;

  /* ug asa ang position sa background */
  background-position: bottom;

  /*pra dle mo balik balik or duplicate kay tungod sa size sa gif  */
  background-repeat: no-repeat;

  display: block;
}
/* so mao ni ang imong background color theme kibali sa tanan nga sud sa body  */
.BodyIntro {
  background-color: black;
}

/* para ra nis mga  ge dl na font kay way lagmi ang mga local hahahaa */
@font-face {
  font-family: 'Rusone';
  src: url(fonts/RussoOne-Regular.ttf) format('truetype');
}
@font-face {
  font-family: 'chakra petch';
  src: url(fonts/ChakraPetch-BoldItalic.ttf) format('truetype');
}
@font-face {
  font-family: 'exo';
  src: url(fonts/Exo2-SemiBold.ttf) format('truetype');
}
@font-face {
  font-family: 'Medieval';
  src: url(fonts/MedievalSharp-Regular.ttf) format('truetype');
}

@font-face {
  font-family: 'Audio Wide';
  src: url(fonts/Audiowide-Regular.ttf) format('truetype');
}

@font-face {
  font-family: 'Press Start 2P';
  src: url(fonts/PressStart2P-Regular.ttf) format('truetype');
}

/* ----------------------------------------------------------------------------------------------------- */
/* so kani mao nig mag lakaw lakaw sa intro */

.ml {
  position: fixed;

  /*Y position ni padong saka ba o ubos */
  top: 580px;
  /* mao nig x pakilid */
  left: -200px;
  /* kadak on sa gif */
  width: 180px;
  /* layering ni sija dapit himbaw */
  z-index: 10;
  /* value sa element usually 0 - 1 rna */
  opacity: 1;

  /* gamit animation nga naay class mlWalk. 15 secs ang duration, 
    constant rag speed,unya balik balik. */
  animation: mlWalk 15s linear infinite;
  animation-delay: 15s;
}
@keyframes mlWalk {
  /* direction rani pra mahibal an asa gawas ug padong */
  from {
    left: -200px;
  }

  to {
    left: 100vw;
  }
}

.codm {
  position: fixed;

  top: 510px;

  right: -200px;

  width: 130px;

  z-index: 10;

  opacity: 1;

  animation: codmWalk 15s linear infinite;
  animation-delay: 15s;
}

@keyframes codmWalk {
  from {
    right: -200px;
  }

  to {
    right: 100vw;
  }
}

.minecraft {
  position: fixed;

  top: 440px;

  left: -220px;

  width: 150px;

  opacity: 0.9;

  /* para dile kaajo pajok */
  filter: brightness(1.15) saturate(1.3);
  /* way interactions neutral ra */
  pointer-events: none;
  /* naay delay gamay compared sa ml  og codm */
  animation: minecraftWalk 30s linear infinite;
}

@keyframes minecraftWalk {
  /* pasabot ani nga lajo pa pra naas gawas sa screen */
  0% {
    left: -220px;
    opacity: 1;
  }

  /* mao ni ning mo gawas na */
  50% {
    left: calc(100vw + 220px);
    opacity: 1;
  }

  /* itago inig kaduha nga wave pra ang ml napod */
  50.1% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}
/* coc ni */
.coc {
  position: fixed;

  top: 630px;

  right: -220px;

  width: 150px;

  opacity: 0.9;

  filter: brightness(1.15) saturate(1.3);

  pointer-events: none;

  animation: cocWalk 30s linear infinite;
}

@keyframes cocWalk {
  0% {
    right: -220px;
    opacity: 1;
  }

  50% {
    right: calc(100vw + 220px);
    opacity: 1;
  }

  50.1% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}
/* mao diay ning heade kanang jerome cezar */

.jrm {
  font-weight: 500;
  display: inline;
  font-family: 'Rusone';
  font-size: 100px;
  color: skyblue;
  -webkit-text-stroke: 1px white;
  background-color: rgb(55, 7, 55);
  width: 350px;
  padding: 20px;
  margin: 100px auto;

  text-align: center;
  background: url(gif/stars.gif) 500px;
  pointer-events: none;
  border: 5px solid white; /* Gold tube */

  /* ja kaning shadow is where nga naay rainbow glow */
  box-shadow:
    0 0 5px gold,
    0 0 15px cyan,
    0 0 25px magenta;

  /* unya mao ning mo rotate nga rainbow or raibow border */
  border-image: conic-gradient(
      gold,
      red,
      orange,
      yellow,
      lime,
      cyan,
      blue,
      violet,
      gold
    )
    1;
  /* kanang tanan color ma display in just 3 seconds */
  animation: rgb 3s linear infinite;
}

@keyframes rgb {
  /* so mao rana ang pathway kanang deg kay colors hue may atong ge gamit*/
  from {
    filter: hue-rotate(0deg);
  }
  to {
    filter: hue-rotate(360deg);
  }
}
.jrm span {
  display: inline-block;

  color: white;

  -webkit-text-stroke: 1px white;

  animation: letterGlow 2s linear infinite;
}
.jrm span:nth-child(1) {
  animation-delay: 0s;
}
.jrm span:nth-child(2) {
  animation-delay: 0.15s;
}
.jrm span:nth-child(3) {
  animation-delay: 0.3s;
}
.jrm span:nth-child(4) {
  animation-delay: 0.45s;
}
.jrm span:nth-child(5) {
  animation-delay: 0.6s;
}
.jrm span:nth-child(6) {
  animation-delay: 0.75s;
}

.jrm span:nth-child(8) {
  animation-delay: 0.9s;
}
.jrm span:nth-child(9) {
  animation-delay: 1.05s;
}
.jrm span:nth-child(10) {
  animation-delay: 1.2s;
}
.jrm span:nth-child(11) {
  animation-delay: 1.35s;
}
.jrm span:nth-child(12) {
  animation-delay: 1.5s;
}

@keyframes letterGlow {
  0% {
    color: white;

    text-shadow:
      0 0 5px red,
      0 0 15px red;
  }

  25% {
    color: white;

    text-shadow:
      0 0 5px yellow,
      0 0 15px yellow;
  }

  50% {
    color: white;

    text-shadow:
      0 0 5px lime,
      0 0 15px lime;
  }

  75% {
    color: white;

    text-shadow:
      0 0 5px cyan,
      0 0 15px cyan;
  }

  100% {
    color: white;

    text-shadow:
      0 0 5px magenta,
      0 0 15px magenta;
  }
}

/* ----------------------------------------------------------------------------------------------------- */

.CasualGamer {
  font-family: 'Orbitron', sans-serif;

  font-size: 20px;

  color: white;

  text-align: center;

  /* mao nag bakal nga color */
  background: linear-gradient(135deg, #777, #333, #111, #666);

  padding: 10px 50px;

  border: 1px solid #aaa;
  /* 0 x axis 0 y axis nya 15px is the strength sa blur the higher the number the mild ang blur */
  box-shadow:
    inset 0 0 15px black,
    0 0 15px black;

  width: fit-content;

  margin: 60px auto;

  /* para nis buho */
  position: relative;

  overflow: hidden;
}

/* buho */
.CasualGamer::before {
  content: '';

  position: absolute;

  width: 10px;
  height: 10px;

  background: #111;

  border-radius: 50%;

  top: 15px;
  left: 30px;

  opacity: 0.8;
}

/* para mo sinaw */

.CasualGamer::after {
  content: '';

  position: absolute;

  top: 0;
  left: -100%;

  width: 50%;
  height: 100%;

  /*reflection rani*/
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.5),
    transparent
  );

  /* mao ni ang magpa lihok sa reflection */
  animation: shine 3s infinite;
}

/* nya mao ni ijang nilihokan */
@keyframes shine {
  0% {
    left: -100%;
  }

  50% {
    left: 150%;
  }

  100% {
    left: 150%;
  }
}

/* -------------------------------------------------------------------------- */

/* mga buttons nata  */
.pixelHome {
  /* pasabot anang fix kay bisan ug unsaon nimog scroll dle na mautro */
  position: fixed;

  top: 5px;

  left: 20px;

  /* mao ni pra sija ang pinaka atubangan  sa layer */
  z-index: 9999;

  width: 150px;

  height: 40px;

  background: #202020;

  color: white;

  border: 4px solid #ffffff;

  outline: 4px solid #000000;

  font-family: 'Press Start 2P', monospace;

  font-size: 14px;

  letter-spacing: 2px;

  /* para mahimong kamot imong cursor hahaha */
  cursor: pointer;

  transition: 0.15s;

  box-shadow:
    6px 6px 0 #000,
    0 0 10px rgba(0, 150, 255, 0.3);
}

/* para hover effect */
.pixelHome:hover {
  background: #2c6fff;
  /* para sa lift effect */
  transform: translateY(-3px);

  box-shadow:
    8px 8px 0 #000,
    0 0 20px #00bfff,
    0 0 35px #0099ff;
}

.pixelBack {
  position: fixed;

  top: -55px;

  left: 20px;

  z-index: 9999;

  width: 130px;

  height: 35px;

  background: #202020;

  color: white;

  border: 4px solid #ffffff;

  outline: 4px solid #000000;

  font-family: 'Press Start 2P', monospace;

  font-size: 14px;

  letter-spacing: 2px;

  cursor: pointer;

  transition: 0.15s;

  box-shadow:
    6px 6px 0 #000,
    0 0 10px rgba(0, 150, 255, 0.3);
}

.pixelBack:hover {
  background: #2c6fff;

  transform: translateY(-3px);

  box-shadow:
    8px 8px 0 #000,
    0 0 20px #00bfff,
    0 0 35px #0099ff;
}

/* mao nig effect inig click or kanang murag ma press down */
.pixelBack:active {
  transform: translateY(3px);

  box-shadow: 2px 2px 0 #000;
}

.Group {
  position: fixed;

  top: 6px;

  left: 20px;

  z-index: 9999;

  width: 130px;

  height: 35px;

  background: #202020;

  color: white;

  border: 4px solid #ffffff;

  outline: 4px solid #000000;

  font-family: 'Press Start 2P', monospace;

  font-size: 14px;

  letter-spacing: 2px;

  cursor: pointer;

  transition: 0.15s;

  box-shadow:
    6px 6px 0 #000,
    0 0 10px rgba(0, 150, 255, 0.3);
}

.Group:hover {
  background: #2c6fff;

  transform: translateY(-3px);

  box-shadow:
    8px 8px 0 #000,
    0 0 20px #00bfff,
    0 0 35px #0099ff;
}

/* mao nig effect inig click or kanang murag ma press down */
.Group:active {
  transform: translateY(3px);

  box-shadow: 2px 2px 0 #000;
}
/* --------------------------------------------------------------------------------------- */

/* nag consist ni sa coinslot ug slot text */
.introContainer {
  position: relative;

  width: 100%;

  height: 100vh;
}

.coinSlot {
  position: absolute;

  left: 700px;

  top: 150px;
}

.slotText {
  position: relative;
  top: -50px;
  left: -40px;
  font-family: 'Orbitron', sans-serif;

  color: gold;

  font-size: 18px;

  font-weight: bold;

  letter-spacing: 10px;

  text-shadow:
    0 0 10px gold,
    0 0 20px orange;
}

/* mao nig buho paras coin */

.slotHole {
  width: 120px;

  height: 12px;

  margin-top: 12px;

  border-radius: 20px;

  background: #111;

  border: 2px solid #555;

  box-shadow:
    inset 0 0 10px black,
    0 0 8px rgba(255, 215, 0, 0.4);
}

/* here ang dragable nga coin */
.coin {
  position: absolute;

  left: 108vh;

  top: 10.5vh;

  width: 70px;

  height: 80px;

  cursor: grab;
}

/* mao ni ang coin */

.front {
  border-radius: 50%;
  display: flex;

  /* kaning tulo tungod kay relative man ang position ma inherit nas shine effect sa ubos kay pra ang shine sud ras coin, nya ang overflow mao nag osik sa shine */
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;

  /* mao ni ang color sa coin ug porma kibali mura ug painting wanay drawing */
  background: linear-gradient(
    145deg,
    #fff8b5 0%,
    #ffe44d 25%,
    #ffcc00 50%,
    #d89a00 75%,
    #fff2a0 100%
  );

  border: 4px solid #ffd700;

  font-size: 42px;

  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.8),
    inset 0 -4px 8px rgba(0, 0, 0, 0.35);
}

/* mao na nig shine effecct  */

.front::before {
  content: '';

  position: absolute;

  top: -20%;

  left: -120%;

  width: 40%;

  height: 140%;

  background: rgba(255, 255, 255, 0.55);

  transform: rotate(25deg);

  animation: coinShine 2.5s linear infinite;
}

@keyframes coinShine {
  0% {
    left: -120%;
  }

  100% {
    left: 160%;
  }
}

/* hover effect ni */

.coin:hover {
  cursor: grab;

  transform: scale(1.08);

  filter: brightness(1.12);
}

/* mao ning pag gujod */
.coin.dragging {
  cursor: grabbing;

  transform: translateY(-50px) scale(1.08);
}

/* mao ni if mo gana ang pag insert sa coin sa slot hole */
.coinSlot.active .slotHole {
  box-shadow:
    0 0 15px gold,
    0 0 30px orange,
    inset 0 0 12px white;
}

/* animation sa pag insert sa coin */
.coin.insert {
  animation: insertCoin 0.6s forwards;
}

@keyframes insertCoin {
  0% {
    transform: translateY(-50px) scale(1);

    opacity: 1;
  }

  60% {
    transform: translateY(-145px) scale(0.85);
  }

  100% {
    transform: translateY(-165px) scale(0.15);

    opacity: 0;
  }
}

/* ------------------------------------------------------------------------- */
/* mao nig loading effect pra ma ka sud sa homepage */
#loadingScreen {
  position: fixed;

  top: 0;
  left: 0;

  width: 100%;
  height: 100vh;

  background: #000;

  display: none;

  justify-content: center;

  align-items: center;

  flex-direction: column;

  z-index: 99999;
}

.loadingTitle {
  position: relative;

  font-family: 'Press Start 2P', monospace;
  color: silver;
  font-size: 20px;

  letter-spacing: 2px;

  margin-bottom: 40px;

  font-family: 'Press Start 2P', monospace;

  background: linear-gradient(90deg, blue, #00ffff, white);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: normal;
  letter-spacing: 2px;

  animation: loadingGlitch 0.2s infinite;
}

@keyframes loadingGlitch {
  0% {
    transform: translate(0);
  }

  20% {
    transform: translate(-2px, 1px);
  }

  60% {
    transform: translate(-1px, 2px);
  }

  100% {
    transform: translate(0);
  }
}
.loadingBar {
  margin-bottom: 20px;
  width: 1120px;
  height: 36px;
  border: 4px solid;
  border-image: linear-gradient(90deg, black, blue, purple, white) 1;
  image-rendering: pixelated;
}

/* ================================= */

#loadingFill {
  width: 0%;

  height: 100%;

  background: repeating-linear-gradient(
    90deg,
    purple 0px,
    blue 16px,
    white 32px
  );
}

/* ================================= */

img.broomm {
  position: relative;

  width: 100vh;

  margin-bottom: 20px;

  animation: broomFloat 3s ease-in-out infinite;
}

@keyframes broomFloat {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-15px);
  }

  100% {
    transform: translateY(0px);
  }
}

/* home  page na ni */
.playerHub {
  text-align: center;

  margin-top: 40px;
}

.playerHub h1 {
  color: #ffd700;

  font-size: 50px;

  font-family: 'Rusone';

  text-shadow:
    0 0 15px gold,
    0 0 30px orange;
}

.playerHub h2 {
  color: white;

  font-family: 'Audio Wide';

  margin-top: 10px;
}

.playerHub p {
  color: #cccccc;

  margin-top: 10px;

  font-size: 18px;
}

/* -------------------------------------------------------- */
/* mao nig mga g.if nga duck cat ug si bmo hhahahaah */

.portalMenu {
  display: flex;

  justify-content: center;

  align-items: flex-end;

  gap: 120px;

  margin-top: 80px;
}

.portal {
  display: flex;

  flex-direction: column;

  align-items: center;

  cursor: pointer;

  animation: portalFloat 3s ease-in-out infinite;

  transition: 0.25s;
}

@keyframes portalFloat {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-15px);
  }

  100% {
    transform: translateY(0px);
  }
}

/* mao nig text sa ubos */
.portal span {
  margin-top: 20px;

  color: white;

  font-family: 'Audio Wide';

  font-size: 18px;

  letter-spacing: 2px;
}

.portal:hover {
  transform: scale(1.08);
}

.aboutPortal:hover .portalFrame {
  box-shadow:
    0 0 25px cyan,
    0 0 50px cyan;
}

.gamesPortal:hover .portalFrame {
  box-shadow:
    0 0 25px magenta,
    0 0 50px purple;
}

.contactPortal:hover .portalFrame {
  box-shadow:
    0 0 25px lime,
    0 0 50px green;
}

/* mso nig kanang nag lutaw */
@keyframes portalFloat {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-15px);
  }

  100% {
    transform: translateY(0);
  }
}

/* ------------------------------------------------------------------------------------------- */

/* sa about page ni */
.pixelChat {
  position: relative;

  top: 19vh;
  width: 200vh;

  margin-bottom: 5px;

  padding: 5px;
  background: linear-gradient(to bottom, #0b1d33, #12345a, #08111f);

  border: 6px solid #ffffff;
  margin: auto;
  outline: 6px solid blueviolet;

  image-rendering: pixelated;

  box-shadow:
    0 0 10px rgba(255, 255, 255, 0.3),
    0 0 20px rgba(0, 170, 255, 0.5),
    0 0 40px rgba(0, 170, 255, 0.4),
    0 0 70px rgba(0, 170, 255, 0.25),
    8px 8px 0 #000;
  animation: chatGlow 2.5s ease-in-out infinite;
}
@keyframes chatGlow {
  0% {
    box-shadow:
      0 0 10px rgba(255, 255, 255, 0.2),
      0 0 20px rgba(0, 170, 255, 0.3),
      0 0 35px rgba(0, 170, 255, 0.2),
      8px 8px 0 #000;
  }

  50% {
    box-shadow:
      0 0 20px rgba(255, 255, 255, 0.4),
      0 0 35px rgba(0, 170, 255, 0.6),
      0 0 60px rgba(0, 170, 255, 0.5),
      0 0 90px rgba(0, 170, 255, 0.35),
      8px 8px 0 #000;
  }

  100% {
    box-shadow:
      0 0 10px rgba(255, 255, 255, 0.2),
      0 0 20px rgba(0, 170, 255, 0.3),
      0 0 35px rgba(0, 170, 255, 0.2),
      8px 8px 0 #000;
  }
}

/* mao na nig imong jema */
.chatText {
  color: white;

  font-family: 'chakra petch';

  font: size 14px;

  line-height: 1.9;

  text-align: justify;
}

/* mao nig bold nga text */
.chatText strong {
  color: #9ed9ff;
}

.pixelChat:hover {
  box-shadow:
    8px 8px 0 #000,
    0 0 20px rgba(80, 180, 255, 0.5);
}

/* ----------------------------------------------------------------------------------------- */

/* game page nani */

#games {
  min-height: 100vh;

  padding: 50px;

  background: radial-gradient(
    circle at top,
    #1d4d80 0%,
    #102c4d 40%,
    #071321 100%
  );

  position: relative;

  overflow: hidden;
}

/* mao nig glow */

#games::before {
  content: '';

  position: absolute;

  width: 700px;
  height: 700px;

  background: rgba(0, 255, 255, 0.08);

  border-radius: 50%;

  top: -250px;
  right: -150px;

  filter: blur(80px);
}

#games::after {
  content: '';

  position: absolute;

  width: 500px;
  height: 500px;

  background: rgba(0, 120, 255, 0.08);

  border-radius: 50%;

  bottom: -200px;
  left: -150px;

  filter: blur(80px);
}
/* mao nig header   my favorite games*/
.gameTitle {
  text-align: center;

  color: white;

  font-family: 'Press Start 2P';

  font-size: 34px;

  letter-spacing: 3px;

  text-shadow:
    0 0 10px cyan,
    0 0 25px #00bfff,
    0 0 40px white;
}
/* select a game to view............ */
.gameSubtitle {
  text-align: center;

  color: #bfefff;

  font-size: 18px;

  margin-top: 15px;

  margin-bottom: 55px;

  font-family: 'Audiowide';
}
/* 
positioning sa mga logo og games */
.gameContainer {
  display: flex;

  justify-content: space-between;

  gap: 40px;
}

.gameCategory {
  width: 48%;

  padding: 30px;

  background: rgba(255, 255, 255, 0.05);

  border: 4px solid rgba(255, 255, 255, 0.15);

  border-radius: 18px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);

  box-shadow:
    0 0 25px rgba(0, 255, 255, 0.25),
    10px 10px 0 black;
}

.gameCategory h2 {
  text-align: center;

  color: white;

  font-family: 'Press Start 2P';

  font-size: 18px;

  padding-bottom: 18px;

  margin-bottom: 35px;

  border-bottom: 3px solid cyan;

  text-shadow: 0 0 10px cyan;
}

.gameRow {
  display: flex;

  justify-content: center;

  gap: 35px;
}
/* game card */

.gameCard {
  width: 150px;

  padding: 18px;

  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.08),
    rgba(255, 255, 255, 0.03)
  );

  border: 3px solid rgba(255, 255, 255, 0.2);

  border-radius: 16px;

  transition: 0.3s;

  box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.05);
}

.gameCard:hover {
  transform: translateY(-10px) scale(1.05);

  border-color: cyan;

  box-shadow:
    0 0 25px cyan,
    0 0 45px rgba(0, 255, 255, 0.4);
}
/* this is the game logo */
.gameLogo {
  width: 110px;

  height: 110px;

  object-fit: contain;

  transition: 0.3s;

  background: none;

  border: none;

  outline: none;

  border-radius: 50%;

  padding: 0;
}

.gameCard:hover .gameLogo {
  transform: rotate(-5deg) scale(1.08);
}
/* label sa game logo majo pag game logo hhaahaha */
.gameCard span {
  display: block;

  margin-top: 15px;

  color: white;

  text-align: center;

  font-family: 'Press Start 2P';

  font-size: 11px;

  line-height: 1.6;
}

/* color themes nis mga game */

/* Mobile Legends */

.gameCard:nth-child(1):hover {
  box-shadow:
    0 0 25px #00bfff,
    0 0 50px cyan;
}

/* CODM */

.gameCategory:first-child .gameCard:nth-child(2):hover {
  box-shadow:
    0 0 25px #ff4d4d,
    0 0 50px red;
}

/* Minecraft */

.gameCategory:last-child .gameCard:nth-child(1):hover {
  box-shadow:
    0 0 25px lime,
    0 0 50px green;
}

/* Coc */

.gameCategory:last-child .gameCard:nth-child(2):hover {
  box-shadow:
    0 0 25px gold,
    0 0 50px orange;
}

/* so mao na ni ron mao ni ang kong e click na nimog ang game  */
.gamePageTitle {
  text-align: center;

  color: white;

  font-family: 'Press Start 2P';

  font-size: 32px;

  margin-top: 30px;

  text-shadow:
    0 0 10px cyan,
    0 0 25px #00bfff;
}
/* nya mao ni ang game logo */
.gamePageLogo {
  display: block;

  width: 100px;

  margin: 30px auto;

  transition: 0.3s;

  image-rendering: auto;
}
/* iyahang video frame kanang gawas sa video */
.highlightFrame {
  position: relative;
  width: 190px;
  bottom: 350px;
  left: 400px;
  max-width: 90%;

  margin: 5px auto;

  padding: 30px;

  background: linear-gradient(to bottom, #08111f, #12345a, #08111f);

  border: 6px solid white;

  outline: 6px solid black;

  box-shadow:
    10px 10px 0 black,
    0 0 20px cyan;
}
/* nya mao ni ag kadtong naay featured title */
.highlightTitle {
  text-align: center;

  color: white;

  font-family: 'Press Start 2P';

  font-size: 20px;

  text-shadow:
    0 0 10px cyan,
    0 0 20px #00bfff;
}

/* ja lastly ang video */
.highlightVideo {
  position: relative;
  left: -10px;
  display: block;

  width: 200px;

  margin: 25px auto -10px auto;

  border: 5px solid white;

  background: black;

  cursor: pointer;

  transition: 0.35s;
}

/* Hover */

.highlightVideo:hover {
  transform: scale(1.01);

  box-shadow:
    0 0 20px cyan,
    0 0 40px #00bfff,
    0 0 70px #00ffff;
}

/* ag pack click nga animation  */

.highlightVideo:active {
  transform: scale(0.995);
}

/* ngari tong mga jema naho */
.gameInfo {
  width: 1000px;
  min-height: 400px;
  padding: 10px;

  box-sizing: border-box;

  background: linear-gradient(to bottom, #08111f, #12345a, #08111f);

  border: 6px solid white;

  outline: 6px solid black;

  color: white;

  font-family: 'Audiowide';

  box-shadow:
    10px 10px 0 black,
    0 0 20px cyan;
}

.gameInfo p {
  margin: 10px 0 0 0;

  font-size: 19px;

  line-height: 1.7;

  color: #d9f8ff;
}

.gameInfo h2 {
  font-family: 'Press Start 2P';

  color: white;

  text-shadow: 0 0 10px cyan;
}

/* nya gawas na dire ang back button */
.pixelBack {
  display: block;

  margin: 60px auto;
}

.mlbbpage {
  background: linear-gradient(to bottom, #061424, #0f4c81, #061424);
}

.mlbbpage .gamePageTitle {
  text-shadow:
    0 0 10px #00bfff,
    0 0 25px cyan,
    0 0 45px white;
}

.mlbbpage .gameInfo {
  border-color: #4fd8ff;

  box-shadow:
    10px 10px 0 black,
    0 0 25px #00bfff;
}

.mlbbpage .highlightFrame {
  border-color: #4fd8ff;

  box-shadow:
    10px 10px 0 black,
    0 0 25px cyan;
}

.mlbbpage .highlightTitle {
  color: #7be8ff;
}

.mlbbpage .gamePageLogo {
  filter: drop-shadow(0 0 20px cyan) drop-shadow(0 0 40px #00bfff);
}

/* //call of duty mobile */

.codmPage {
  background: linear-gradient(to bottom, #180000, #5d0000, #180000);
}

.codmPage .gamePageTitle {
  text-shadow:
    0 0 10px red,
    0 0 25px #ff4d4d,
    0 0 45px white;
}

.codmPage .gameInfo {
  border-color: #ff5050;

  box-shadow:
    10px 10px 0 black,
    0 0 25px red;
}

.codmPage .highlightFrame {
  border-color: #ff5050;

  box-shadow:
    10px 10px 0 black,
    0 0 25px red;
}

.codmPage .highlightTitle {
  color: #ff7b7b;
}

.codmPage .gamePageLogo {
  filter: drop-shadow(0 0 20px red) drop-shadow(0 0 40px #ff3333);
}

/* ag minecraft ni */
.mcPage {
  background: linear-gradient(to bottom, #081b08, #2e7d32, #081b08);
}

.mcPage .gamePageTitle {
  text-shadow:
    0 0 10px lime,
    0 0 25px #32cd32,
    0 0 45px white;
}

.mcPage .gameInfo {
  border-color: #6eff6e;

  box-shadow:
    10px 10px 0 black,
    0 0 25px lime;
}

.mcPage .highlightFrame {
  border-color: #6eff6e;

  box-shadow:
    10px 10px 0 black,
    0 0 25px lime;
}

.mcPage .highlightTitle {
  color: #9cff9c;
}

.mcPage .gamePageLogo {
  filter: drop-shadow(0 0 20px lime) drop-shadow(0 0 40px green);
}
/* clash of clans ni */
.cocPage {
  background: linear-gradient(to bottom, #3b2200, #8a5a00, #3b2200);
}

.cocPage .gamePageTitle {
  text-shadow:
    0 0 10px gold,
    0 0 25px orange,
    0 0 45px white;
}

.cocPage .gameInfo {
  border-color: gold;

  box-shadow:
    10px 10px 0 black,
    0 0 25px gold;
}

.cocPage .highlightFrame {
  border-color: gold;

  box-shadow:
    10px 10px 0 black,
    0 0 25px gold;
}

.cocPage .highlightTitle {
  color: #ffe16b;
}

.cocPage .gamePageLogo {
  filter: drop-shadow(0 0 20px gold) drop-shadow(0 0 40px orange);
}

/* ------------------------------------------------------------------------------------------------------------ */
/* projects ni */

#projects {
  min-height: 100vh;

  padding: 50px;

  background:
    linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.75)),
    url('gif/projectbg.gif');

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;
}

.projectTitle {
  text-align: center;

  font-family: 'Press Start 2P';

  font-size: 34px;

  color: white;

  letter-spacing: 3px;

  text-shadow:
    0 0 10px cyan,
    0 0 20px dodgerblue,
    0 0 40px white;
}

.projectSubtitle {
  text-align: center;

  margin-top: 25px;

  margin-bottom: 60px;

  font-family: 'Audiowide';

  font-size: 18px;

  color: #bdefff;
}

.projectContainer {
  display: flex;

  justify-content: center;

  gap: 45px;

  flex-wrap: wrap;
}

.projectCard {
  width: 300px;

  padding: 30px;

  text-align: center;

  background: rgba(255, 255, 255, 0.05);

  border: 4px solid rgba(255, 255, 255, 0.18);

  border-radius: 18px;

  box-shadow:
    10px 10px 0 black,
    0 0 25px cyan;

  transition: 0.35s;
}

.projectCard:hover {
  transform: translateY(-12px);

  box-shadow:
    10px 10px 0 black,
    0 0 35px cyan,
    0 0 60px deepskyblue;
}

.projectLogo {
  width: 120px;

  transition: 0.35s;
}

.projectCard:hover .projectLogo {
  transform: scale(1.1);

  filter: drop-shadow(0 0 18px cyan);
}

.projectCard h2 {
  margin-top: 25px;

  font-family: 'Press Start 2P';

  font-size: 17px;

  color: #9ce8ff;

  text-shadow: 0 0 10px cyan;
}

.projectCard p {
  margin-top: 20px;

  font-family: 'Audiowide';

  font-size: 16px;

  line-height: 1.7;

  color: white;
}

.projectButton {
  margin-top: 30px;

  width: 100%;

  padding: 15px;

  border: 4px solid white;

  outline: 4px solid black;

  background: gold;

  color: black;

  font-family: 'Press Start 2P';

  font-size: 11px;

  cursor: pointer;

  transition: 0.25s;

  box-shadow: 5px 5px 0 black;
}

.projectButton:hover {
  background: #00d9ff;

  color: white;

  transform: translateY(-4px);

  box-shadow:
    8px 8px 0 black,
    0 0 18px cyan,
    0 0 35px deepskyblue;
}

.projectButton:active {
  transform: translateY(3px);

  box-shadow: 2px 2px 0 black;
}

/* Activity 1 */

.projectCard:nth-child(1) {
  border-color: #00ff88;

  box-shadow:
    10px 10px 0 black,
    0 0 20px #00ff88;
}

.projectCard:nth-child(1) h2 {
  color: #8dffd2;
}

/* Activity 2 */

.projectCard:nth-child(2) {
  border-color: #ffb300;

  box-shadow:
    10px 10px 0 black,
    0 0 20px gold;
}

.projectCard:nth-child(2) h2 {
  color: #ffe17d;
}

/* Activity 3 */

.projectCard:nth-child(3) {
  border-color: #00bfff;

  box-shadow:
    10px 10px 0 black,
    0 0 20px cyan;
}

.projectCard:nth-child(3) h2 {
  color: #9ce8ff;
}
/* ------------------------------------------------------------- */

/* sa contacts ni */
#contact {
  min-height: 100vh;

  padding: 50px;

  background: linear-gradient(to bottom, #071321, #12345a, #071321);
}
/* kanang player connection */

.contactTitle {
  text-align: center;

  color: white;

  font-family: 'Press Start 2P';

  font-size: 34px;

  letter-spacing: 3px;

  text-shadow:
    0 0 10px cyan,
    0 0 25px #00bfff,
    0 0 40px white;
}
/* basta kanang choose */
.contactSubtitle {
  text-align: center;

  color: #bdefff;

  font-family: 'Audiowide';

  font-size: 18px;

  margin-top: 20px;

  margin-bottom: 60px;
}
/* positioning ni nila sa mga gipang butang naho */

.contactContainer {
  display: flex;

  justify-content: center;

  gap: 80px;

  flex-wrap: wrap;
}
/* himbaw card daw  */
.contactCard {
  width: 280px;

  padding: 30px;

  text-align: center;

  text-decoration: none;

  color: white;

  background: rgba(255, 255, 255, 0.05);

  border: 4px solid rgba(255, 255, 255, 0.15);

  border-radius: 18px;

  transition: 0.35s;

  box-shadow: 10px 10px 0 black;
}

.contactCard h2 {
  font-family: 'Press Start 2P';

  font-size: 18px;

  margin-top: 25px;
}

.contactCard p {
  font-family: 'Audiowide';

  font-size: 18px;

  margin-top: 15px;
}

.contactClick {
  display: block;

  margin-top: 30px;

  font-family: 'Press Start 2P';

  font-size: 11px;
}

.contactLogo {
  width: 110px;

  transition: 0.35s;
}
/* ja mao na nig facebook */

.contactCard:first-child {
  border-color: #1877f2;

  box-shadow:
    10px 10px 0 black,
    0 0 20px #1877f2;
}

.contactCard:first-child h2 {
  color: #8ec5ff;

  text-shadow: 0 0 10px #1877f2;
}

.contactCard:first-child:hover {
  transform: translateY(-10px);

  box-shadow:
    10px 10px 0 black,
    0 0 35px #1877f2,
    0 0 60px #1877f2;
}

.contactCard:first-child:hover .contactLogo {
  transform: scale(1.08);

  filter: drop-shadow(0 0 20px #1877f2);
}

/* sa DISCORD */

.contactCard:last-child {
  border-color: #5865f2;

  box-shadow:
    10px 10px 0 black,
    0 0 20px #5865f2;
}

.contactCard:last-child h2 {
  color: #b5bcff;

  text-shadow: 0 0 10px #5865f2;
}

.contactCard:last-child:hover {
  transform: translateY(-10px);

  box-shadow:
    10px 10px 0 black,
    0 0 35px #5865f2,
    0 0 60px #5865f2;
}

.contactCard:last-child:hover .contactLogo {
  transform: scale(1.08);

  filter: drop-shadow(0 0 20px #5865f2);
}

.contactClick {
  color: white;

  letter-spacing: 1px;

  transition: 0.3s;
}

.contactCard:hover .contactClick {
  color: #fff;

  text-shadow: 0 0 10px white;
}

hr {
  width: 70%;

  margin-top: 30px;

  margin-bottom: 30px;
}

img {
  width: 200px;

  /* Space around the image */
  margin: 10px;
}

img.abt {
  position: relative;

  top: 70px; /* ⭐ Move up */

  margin: auto;

  width: 150px;

  image-rendering: pixelated;
  object-fit: cover;
  border: 4px double;
  border-radius: 500px;
  image-rendering: pixelated;
  border: 4px solid transparent;

  background:
    linear-gradient(black, black) padding-box,
    repeating-conic-gradient(red, white, blue, pink, black) border-box;

  box-shadow:
    0 0 20px cyan,
    0 0 10px blue,
    0 0 12px purple,
    0 0 20px magenta;

  animation: rgbGlow 3s linear infinite;
}
@keyframes rgbGlow {
  from {
    filter: hue-rotate(0deg);
  }

  to {
    filter: hue-rotate(360deg);
  }
}

.ghost,
.pacman {
  position: fixed;
  top: 25%;
  width: 100px;
  image-rendering: pixelated;
  left: -50px;
}

/* Ghosts */
.ghost1 {
  top: 32%;
  width: 50px;
  animation: chase 10s linear infinite;
  animation-delay: 3.5s;
}

.ghost2 {
  top: 32%;
  width: 50px;
  animation: chase 10s linear infinite;
  animation-delay: 3s;
}

.ghost3 {
  top: 30%;
  width: 100px;
  animation: chase 10s linear infinite;
  animation-delay: 2s;
}

/* Pac-Man */
.pacman {
  top: 25%;
  width: 150px;
  animation: chase 10s linear infinite;
  animation-delay: 5s;
}

@keyframes chase {
  0% {
    left: -50px;
  }

  100% {
    left: 110%;
  }
}

video {
  width: 400px;

  margin: 10px;

  border: 1px black;
}

/* g.i.f */

#about {
  background-image: url(gif/forabout.gif);
  position: relative;
  bottom: 70px;
}
.homePage {
  position: relative;
}

.homeBanner {
  display: block;
  width: 100%;
  height: 40vh;
  object-fit: cover;
  object-position: bottom;
}

.playerHub {
  position: absolute;

  top: 20%;

  left: 50%;

  transform: translate(-50%, -50%);

  z-index: 2;

  text-align: center;

  color: white;

  width: 100%;
}

.playerHub h1,
.playerHub h2,
.playerHub p {
  text-shadow:
    2px 2px 5px black,
    0 0 10px black;
}