body {
    background-color: #000000;
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    color: #fff;
    overflow-x: hidden;
}

header {
    text-align-last: center;
    font-size: 30px;
    transform: scale(1.0);
    padding: 1px 0;
    position: relative;
    z-index: 100; 
    background-color: black; 
}

.pixel-pulse {
    animation: pixelPulse 1.5s infinite;
}

@keyframes pixelPulse {
    0%, 100% {
        transform: scale(1);
        text-shadow: 0 0 2px #0ff, 0 0 5px #0ff;
    }
    50% {
        transform: scale(1.1);
        text-shadow: 0 0 10px #ab1cd9fc, 0 0 20px #0ff;
    }
}

#timeline-wrapper {
    position: relative;
    z-index: 1;
    margin-top: 10px; 
    max-width: 1500px;
    margin: 0 auto;
}

.scale-container {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    transform-origin: center center; 
    transition: transform 0.3s ease;
    display: flex;
    justify-content: center; 
}


#pacman-board img {
    position: relative;
    width: 1500px;
    height: 750px;
    top: 01vh; 
    left: 01vw;
    padding: 20px 0;
    max-width: 100%;
    z-index: 0;
}

#chess .clickable-img {
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    top: 17vh;
    left: 5vw;
    transition: transform 0.2s ease-in-out;
}

#go .clickable-img {
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    top: 22vh;
    left: 32vw;
    transition: transform 0.2s ease-in-out;
}

#poker .clickable-img {
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    top: 9vh;
    left: 52vw;
    transition: transform 0.2s ease-in-out;
}

#monopoly .clickable-img {
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    top: 17vh;
    left: 72vw;
    transition: transform 0.2s ease-in-out;
}

#pong .clickable-img {
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    top: 47vh;
    left: 62vw;
    transition: transform 0.2s ease-in-out;
}

#space .clickable-img {
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 57%;
    top: 67vh;
    left: 72vw;
    transition: transform 0.2s ease-in-out;
}

#tetris .clickable-img {
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    top: 82vh;
    left: 62vw;
    transition: transform 0.2s ease-in-out;
}

#mario .clickable-img {
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    top: 92vh;
    left: 42vw;
    transition: transform 0.2s ease-in-out;
}

#minecraft .clickable-img {
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    top: 62vh;
    left: 32vw;
    transition: transform 0.2s ease-in-out;
}

#gta .clickable-img {
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    top: 72vh;
    left: 5vw;
    transition: transform 0.2s ease-in-out;
}

#gameover .clickable-img {
    position: absolute;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    top: 550px;
    left: 680px;
    transition: transform 0.2s ease-in-out;
}

#pacman .clickable-img {
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    top: 44vh;
    left: 47vw;
    transition: transform 0.2s ease-in-out;
}

p {
    text-align: center;
    padding-left: 300px;
    padding-right: 300px;
}

.clickable-img:hover {
    transform: scale(1.3);
}

@media screen and (max-width: 1400px) {
    .scale-container {
        transform: scale(0.9);
    }
}

@media screen and (max-width: 1100px) {
    .scale-container {
        transform: scale(0.75);
    }
}

@media screen and (max-width: 768px) {
    .scale-container {
        transform: scale(0.6);
    }
}

@media screen and (max-width: 480px) {
    .scale-container {
        transform: scale(0.45);
    }
}