/* ==========================
   FUENTE
========================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;700&display=swap');

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}


/* ==========================
   FONDO
========================== */

body{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(135deg,#2E7D32,#43A047,#66BB6A);

    padding:20px;

}


/* ==========================
   CONTENEDOR GENERAL
========================== */

.pantalla{

    width:100%;

    max-width:600px;

    background:white;

    border-radius:25px;

    padding:40px;

    box-shadow:0px 15px 45px rgba(0,0,0,.30);

    animation:aparecer .5s ease;

}


/* ==========================
   TITULOS Y TEXTO
========================== */

h1{

    text-align:center;

    color:#2E7D32;

    font-size:38px;

    margin-bottom:15px;

}

p{

    text-align:center;

    font-size:18px;

    margin-bottom:30px;

    color:#555;

}


/* ==========================
   LISTA DE JUEGOS
========================== */

.listaJuegos{

    display:flex;

    flex-direction:column;

    gap:16px;

}

.tarjetaJuego{

    display:flex;

    align-items:center;

    gap:16px;

    padding:20px;

    text-decoration:none;

    background:#E8F5E9;

    border:2px solid #A5D6A7;

    border-radius:18px;

    transition:.25s;

}

.tarjetaJuego:hover{

    transform:translateY(-3px);

    background:#C8E6C9;

    border-color:#2E7D32;

}

.tarjetaJuego .emoji{

    font-size:36px;

    flex-shrink:0;

}

.tarjetaJuego .info{

    display:flex;

    flex-direction:column;

    flex:1;

    min-width:0;

}

.tarjetaJuego .titulo{

    font-size:20px;

    font-weight:700;

    color:#1B5E20;

}

.tarjetaJuego .descripcion{

    font-size:14px;

    color:#4E7C50;

}

.tarjetaJuego .flecha{

    font-size:26px;

    font-weight:bold;

    color:#2E7D32;

    flex-shrink:0;

}


/* ==========================
   ANIMACIONES
========================== */

@keyframes aparecer{

    from{
        opacity:0;
        transform:translateY(30px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}


/* ==========================
   RESPONSIVE
========================== */

@media(max-width:600px){

    h1{
        font-size:28px;
    }

    .tarjetaJuego{
        flex-wrap:wrap;
    }

    .tarjetaJuego .titulo{
        font-size:18px;
    }

}