body{
    background-image: url(BG.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;

    color: white;
}

.container h1{
    text-align: center;
}

.container{
    padding: 10px 15px;

    border-radius: 15px;
    background-color: rgba(167, 155, 155, 0.4); 
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);

    top: 0;
}

ul{
    display: flex;
    justify-content: center;
    gap: 20px;
    list-style: none;

    font-size: 25px;
    font-family: 'Courier New', Courier, monospace;
}

ul li:hover{
    color: #00f2fe;
    transform: translateY(-5px);
    cursor: pointer;      
}

.games-container{
    margin-top: 50px;
    display: flex;
    gap: 50px;
}

.games img{
    height: 200px;
    border-radius: 12px;
}

.games button{
    height: 45px;
    width: 100px;
    font-size: 19px;
    border: 1px solid;
    border-color: cyan;
    border-radius: 10px;

    background: transparent;
    color: white;
}

.container a{
    text-decoration: none;
    color: white;
}

.games{
    text-align: center;

    background-color: rgba(167, 155, 155, 0.4); 
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2); 
    border-radius: 20px;
    border-color: cyan;
    width: 30%;
    margin-top: 40px;
    padding: 10px;   

    animation-name: upsdowns;
    animation-duration: 1.5s;
    animation-timing-function: ease-in-out; 
    animation-iteration-count: infinite;    
    animation-direction: alternate;   
}

@keyframes upsdowns{
    from{transform: translateY(10px)}
    to{transform: translateY(-10px)}
}

@keyframes sidetoside{
    from{transform: translateX(-10px)}
    to{transform: translateX(10px)}
}

@keyframes reversed{
    from{transform: translateX(10px)}
    to{transform: translateX(-10px)}
}

.games:hover{
    box-shadow: 0 0 50px 10px rgb(19, 233, 233);
}

.games button:hover{
    box-shadow: 0 0 10px 5px cyan;
}

.gamez{
    background-color: rgba(167, 155, 155, 0.4); 
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2); 
    border-radius: 20px;
    border-color: cyan;
    width: 30%;
    margin-top: 40px;
    padding: 10px;   
    
    text-align: center;

    animation-name: sidetoside;
    animation-duration: 1.5s;
    animation-timing-function: ease-in-out; 
    animation-iteration-count: infinite;    
    animation-direction: alternate;   

}

.gamez:hover{
    box-shadow: 0 0 50px 10px rgb(19, 233, 233);
}

.gamez button:hover{
    box-shadow: 0 0 10px 5px cyan;
}

.gamez img{
    height: 200px;
    border-radius: 12px;
}

.gamez button{
    height: 45px;
    width: 100px;
    font-size: 19px;
    border: 1px solid;
    border-color: cyan;
    border-radius: 10px;

    background: transparent;
    color: white;
}


.gamex{
    background-color: rgba(167, 155, 155, 0.4); 
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2); 
    border-radius: 20px;
    border-color: cyan;
    width: 30%;
    margin-top: 40px;
    padding: 10px;   
    
    text-align: center;

    animation-name: reversed;
    animation-duration: 1.5s;
    animation-timing-function: ease-in-out; 
    animation-iteration-count: infinite;    
    animation-direction: alternate;   

}

.gamex:hover{
    box-shadow: 0 0 50px 10px rgb(19, 233, 233);
}

.gamex button:hover{
    box-shadow: 0 0 10px 5px cyan;
}

.gamex img{
    height: 200px;
    border-radius: 12px;
}

.gamex button{
    height: 45px;
    width: 100px;
    font-size: 19px;
    border: 1px solid;
    border-color: cyan;
    border-radius: 10px;

    background: transparent;
    color: white;
}

.gamex, .gamez{
    margin-left: 150px;
}

 
@media (max-width: 768px) {
    .games-container {
        flex-direction: column;
        align-items: center;
        gap: 30px; 
    }

    .games img, .gamex img, .gamez img{
        height: 150px;
    }

    .games, .gamez, .gamex {
        width: 88%; 
        margin-left: 0; 
        margin-top: 20px;
    }

    .container ul{
        font-size: 20px;        
    }
}