/* Body background stays the same */
#body {
    background: #000000 url("https://i.imgur.com/sjNYKsP.png") repeat !important;
    color: #ffffff; /* default text white */
}

/* Ensure wrappers are transparent */
#frame,
#contents {
    background: transparent !important;
    color: inherit; /* inherit white from body */
}

/* Main column: darker overlay */
#main_column {
    position: relative;
    background: rgba(0, 0, 0, 0.5); /* slightly darker black overlay */
    color: #ffffff; /* default text white */
}

/* Children fully transparent but inherit text color */
#main_column > * {
    background: transparent !important;
    position: relative;
    z-index: 2;
    color: inherit;
}

/* Overlay layer (optional extra control) */
#main_column::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); /* same darker overlay */
    pointer-events: none;
    z-index: 1;
}

/* #game_strip: change only black text to grey while keeping whites intact */
#game_strip,
#game_strip * {
    color: #636363; /* light grey default for previously black text */
}

/* Preserve any explicitly white text inside #game_strip */
#game_strip *[style*="color:#ffffff"],
#game_strip *[style*="color:#fff"] {
    color: #ffffff !important;
}

/* Images inside .contents scale to container width */
.contents img {
    max-width: 100%;  /* scale down if needed */
    height: auto;     /* maintain aspect ratio */
}

/* Images inside .image also scale to container width */
.image img {
    max-width: 100%;  /* fill width without exceeding container */
    height: auto;     /* maintain aspect ratio */
}

/* Remove hover expansion */
.image img:hover {
    max-width: 100%;  /* keep same width on hover */
    margin-left: 0;
    transform: none;
}

#left_hover_arrow img:hover,
#right_hover_arrow img:hover {
    margin: auto;
    transform: none;
}

div.image {
    overflow: visible !important;
}