body {font-family:monospace;padding: 20px;}

#game-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
}
.game-item {
    width: calc(25% - 10px);
    aspect-ratio: 635 / 291;
    background-size: cover;
    background-position: center;
    border-radius: 10px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s;
    cursor: pointer;
}
.game-item:hover {transform: scale(1.03);}

@media (max-width: 1024px) {
    .game-item {width: calc(33.33% - 10px);}
}
@media (max-width: 768px) {
    .game-item {width: calc(50% - 10px);}
}
@media (max-width: 480px) {.game-item {width: 100%;}
}
.popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
}
.popup-content {
    background: white;
    padding: 20px;
    border-radius: 10px;
    width: 75vw;
    max-width: 600px;
    position: relative;
    overflow-y: auto;
    max-height: 75vh;
}
html.dark-mode .popup-content {
    color: white;
    background: #0c0b0b;
}
.close-btn {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 20px;
    transition: color 200ms linear;
    cursor: pointer;
}
.close-btn:hover {
    color: #c51a00;
    cursor: pointer;
}
#popup-images {
    width: 100%;
    margin-top: 10px;
    border-radius: 10px;
}
img,video {
    max-width: 100%;
    margin-top: 20px;
}
h2 {
    font-size: clamp(20px, 3vw, 24px);
}
p,a {
    font-size: clamp(13px, 2vw, 16px);
}