body {
    background: linear-gradient(-45deg, #0f0f0f, #6a00ff, #00d4ff, #1a1a1a);
    background-size: 400% 400%;
    animation: gradientBG 10s ease infinite;
    padding-top: 70px;
}

html{
    scroll-behavior: smooth;
}

@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.navbar {
    background: linear-gradient(-45deg, #000000, #0d6efd, #00d4ff, #000000);
    background-size: 400% 400%;
    animation: gradientBG 10s ease infinite;
}
.navbar .nav-link,
.navbar .navbar-brand{
    color: white;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
}

/*evitar que el nav tape los juegos*/
#listGames{
    scroll-margin-top: 80px;
}
#faqs{
    scroll-margin-top: 80px;
}

/*card de la imagen*/
.card-img-top{
    height: 180px;
    width: 100%;
    object-fit: cover;
    border-bottom: 1px solid #444;
}

.card{
    transition: all 0.3s ease;
    background-color: #1a1a1a;
    border: none;
}
.card:hover{
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(13, 110, 253, 0.5)
}

/**display del botón buscar**/
#btnBuscar{
    display: none;

    position: fixed;
    bottom: 20px;
    right: 20px;

    width: 55px;
    height: 55px;

    border-radius: 50%;
    border: none;

    font-size: 22px;

    background: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    
    color: white;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    transition: all 0.3s ease;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

#btnBuscar:hover{
    transform: scale(1.1);
    background: rgba(255, 255, 255, 0.2);
}

/*efectos para el btn de agregar*/
.resultado.resaltado{
    background-color: #2d2f33;
    color: white;
}

#btnAgregarManual {
    transition: all 0.3s ease;
}

#btnAgregarManual:hover {
    transform: scale(1.05);
}

#btnAgregarManual:active {
    transform: scale(0.95);
}

.titulo-gamer span{
    display: inline-block;
    opacity: 0;
    transform: translateY(-50px) scale(0.5);
    animation: aparecer 0.5s forwards;
}

/*delay progresivo jeje*/
.titulo-gamer span:nth-child(1){animation-delay: 0.1s;}
.titulo-gamer span:nth-child(2){animation-delay: 0.2s;}
.titulo-gamer span:nth-child(3){animation-delay: 0.3s;}
.titulo-gamer span:nth-child(4){animation-delay: 0.4s;}
.titulo-gamer span:nth-child(5){animation-delay: 0.5s;}
.titulo-gamer span:nth-child(6){animation-delay: 0.6s;}
.titulo-gamer span:nth-child(7){animation-delay: 0.7s;}
.titulo-gamer span:nth-child(8){animation-delay: 0.8s;}
.titulo-gamer span:nth-child(9){animation-delay: 0.9s;}

@keyframes aparecer{
    to{
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/*glitch suave*/
.titulo-gamer{
    color: white;
    position: relative;
    animation: glitch 2s infinite;
    text-shadow: 
    0 0 5px #000,
    0 0 10px #000,
    0 0 20px #0d6efd;

}
@keyframes glitch{
    0% {transform: translate(0);}
    20% {transform: translate(-1px, -1px);}
    40% {transform: translate(1px, -1px);}
    60% {transform: translate(-1px, 0);}
    80% {transform: translate(1px, 1px);}
    100% {transform: translate(0);}

}

/*decoración para el footer*/
.footer{
    background-color: #121212;
    color: white;
    border-top: 1px solid rgba(255,255,255,0.1);
}
.footer a{
    color: #0d6efd;
    transition: color 0.3s;
}
.footer a:hover{
    color: #66b2ff;
    text-shadow: 0 0 5px #0d6efd;
}
/*estilos texto del inicio*/
.texto-inicio{
    color: #ffffff;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.8),
                 0 0 10px rgba(0, 212, 255, 0.4);
}