CSS Variables for Game Colors
:root {
    --exploding-kittens:#ff6f61;
    --battleship:#1e90ff; 
    --classroom-pirates:#32cd32;
    --pokemon-hunters:#ff4500;
}

/* ======================================
   PAGE HERO
====================================== */

.page-hero{

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-dark)
    );

    color:white;

    padding:80px 0;

}

.page-hero h1{

    color:white;

}

.page-hero p{

    color:rgba(255,255,255,.85);

}

/* ======================================
   GAME CARDS
====================================== */

.card-body h4{

    color:white;

}

.card-body p{

    color:white;


}

.card-body i{

    color:white;

}


#exploding-kittens-card{

    background-image: linear-gradient(135deg, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('/static/images/games/exploding_kittens/backgrounds/Intro_image.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

}

#battleship-card{

    background-image: linear-gradient(135deg, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('/static/images/games/battleship/backgrounds/battleship_background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

}

#classroom-pirates-card{

    background-image: linear-gradient(135deg, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('/static/images/games/classroom_pirates/backgrounds/into_background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

}

#pokemon-hunters-card{

    background-image: linear-gradient(135deg, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('/static/images/games/pokemon_hunters/backgrounds/intro_background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

}