body {
    background-color: #E3F2FD !important;
    position: relative;
    margin: 0;
    font-family: system-ui, -apple-system, sans-serif;
}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../images/100-best-games-hp-b.webp') no-repeat center center fixed;
    background-size: cover;
    opacity: 0.4;
    z-index: -1;
}

.navbar {
    background-color: #2196F3 !important;
}

.game-card {
    background-color: #0D47A1 !important;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    cursor: pointer;
}

.game-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(13, 71, 161, 0.4);
}

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

.game-img {
    transition: transform 0.4s ease;
    height: 160px;
    object-fit: cover;
}

@keyframes cardDeal {
    0% {
        opacity: 0;
        transform: translateY(60px) scale(0.8) rotate(-5deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0deg);
    }
}

.loader {
  --color-1: #de3500;
  --color-2: #0000;
  --color-3: #fff;
  --size: 1.5px;

  width: calc(48 * var(--size));
  height: calc(48 * var(--size));
  display: inline-block;
  position: relative;
  border: calc(3 * var(--size)) solid;
  border-color: var(--color-1) var(--color-2) var(--color-3) var(--color-2);
  border-radius: 50%;
  box-sizing: border-box;
  animation: 1s rotate linear infinite;
}
.loader:before,
.loader:after {
  content: '';
  top: 0;
  left: 0;
  position: absolute;
  border: calc(10 * var(--size)) solid transparent;
  border-bottom-color: var(--color-3);
  transform: translate(calc(-10 * var(--size)), calc(19 * var(--size))) rotate(-35deg);
}
.loader:after {
  border-color: var(--color-1) var(--color-2) var(--color-2) var(--color-2);
  transform: translate(calc(32 * var(--size)), calc(3 * var(--size))) rotate(-35deg);
}
@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}