@import url("https://fonts.googleapis.com/css2?family=Nerko+One&display=swap");
* {
  background-color: #272b30;
  font-family: "Comfortaa", cursive;
}
body {
  background-color: #272b30;
  position: relative;
}

/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! dont't forgit to remove the display none */
/* #header,
#home {
  display: none;
} */

.game-detail-section {
  /* display: none; */
}
/* ! Header Style */

#header {
  position: relative;
}
.header-background img {
  height: 30vh;
  object-fit: cover;
}

/* ! NavBar Style */
.navbar-section {
  position: absolute;
  content: "";
  left: 50%;
  /* width: 70%; */
  border-radius: 20px;
  transform: translate(-50%, -50%);
}
nav {
  border-radius: 20px;
  box-shadow: 0 0 10px rgb(0 0 0 / 0.7);
}

.navbar {
  border-radius: inherit;
}
.navBar-background {
  background-color: #3a497b;
}
.navbar-brand {
  background-color: #3a497b !important;
}
.navbar-brand span {
  background-color: #3a497b !important;
  padding-top: 5px;
}
.navbar-brand img {
  background-color: inherit !important;
  width: 2.5rem;
}
.navbar-collapse {
  flex-grow: 0 !important;
}

.navbar-nav {
  --bs-nav-link-color: #fff !important;
  --bs-nav-link-hover-color: #0d6efd !important;
  --bs-nav-link-disabled-color: #0d6efd !important;
  --bs-navbar-active-color: #0d6efd !important ;
  font-family: "Comfortaa", cursive;
  font-size: 0.7rem;
  background-color: #3a497b;
}
.nav-item {
  background-color: #3a497b !important;
  margin-right: 5px;
}
/* ! Main-Home Style */

#homeBody {
  padding: 5rem 0rem 2rem 0rem;
}

/* ! Card Style */

.main-card-body {
  transition: all 0.5s;
  background-color: #272b30;
  cursor: pointer;
}

.main-card-body:hover {
  transform: scale(1.05, 1.05);
}
.main-card-body:hover .card-img-top {
  filter: none;
}
.main-card-body:hover .gameStatus {
  background-color: #0d6efd;
}
.img-container {
  border-radius: inherit;
}

.card .card-img-top {
  filter: grayscale(80%);
  transition: filter 1s;
}
.gameTitle {
  margin-bottom: 0;
  font-size: 0.9rem;
}
.gameStatus {
  margin-bottom: 0;
  background-color: #4168a1;
  transition: background-color 1s;
  padding: 0.1rem 0.6rem;
  border-radius: 4px;
  font-size: 0.9rem;
}
.card-body {
  height: 8rem !important;
  text-overflow: ellipsis;
  overflow: hidden;
}
.card .card-footer {
  border: none;
  background-color: #272b30 !important;
}
.card-text {
  font-size: 0.78rem !important;
  opacity: 0.5;
  font-family: "Comfortaa", cursive;
  font-weight: 500;
  text-overflow: ellipsis;
}
.genre {
  margin: 0;
  font-size: 0.7rem;
  background: #32383e;
  border-radius: 5px;
  padding: 3px 5px;
}
.platform {
  margin: 0;
  font-size: 0.7rem;
  background: #32383e;
  border-radius: 5px;
  padding: 3px 5px;
}

/*!? ///////////////////////////////////////////////////////////////////// */
/*!? ///////////////////    Game Details Page   ////////////////////////// */
/*!? ///////////////////////////////////////////////////////////////////// */
.game-detail-section {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: inherit;
  content: "";
  height: 100vh;
  width: 100%;
  z-index: 20;
  padding: 2rem;
}

.hstack-text {
  font-size: 2rem;
  font-family: "Nerko One", cursive;
  font-weight: 200;
}
.hstack-btn {
  font-size: 1.5rem;
}

.game-type {
  background-color: #0dcaf0;
  display: inline-block;
  padding: 4px 9px;
  margin-left: 0.7rem;
  border-radius: 7px;
  font-size: 0.8rem;
  color: #000;
  font-weight: 700;
}

.details-desc-container .details-desc {
  font-size: 14px;
}

.show-game-btn {
  border: 2px solid #ffc107;
  padding: 0.6rem 1.1rem;
  border-radius: 12px;
  color: #fff;
  font-weight: 500;
  font-size: 0.9rem;
  transition: background-color 0.4s;
}

.show-game-btn:hover {
  background-color: #ffc107;
}

.game-link {
  color: #fff;
  text-decoration: none;
  background-color: inherit;
}