@import url('https://fonts.googleapis.com/css2?family=Rancho&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Neonderthaw&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Short+Stack&display=swap');

body{
    margin:0;
    background:radial-gradient(#29d4c6,#dbf7f4);
    
    /*
    background:radial-gradient(#FF00FF,#FCEE21);
    rose : FF00FF
    jaune : FCEE21
    */
}
*{
    box-sizing: border-box;
}

html{
    min-height: 100vh;
}

#page-title{
    /* background-color: #b83c0b;*/ 
    display:grid;
    grid-template-columns:repeat(3,auto);
    font-size:50px;
    font-family: 'Short Stack', cursive;
    color :#02473644;
    justify-content:center;
}

#game-container{
    display:grid;
    grid-template-columns:repeat(4,auto);
    grid-gap:10px;
    margin: 50px;
    justify-content:center;
    /* pour gérer la 3D*/
    perspective:500px;
}

.card{
    position:relative;
    background-color: #17b8aa;
    border-radius:12px;
    height: 175px;
    width:125px;
}

.card-face{
    position:absolute;
    width:100%;
    height:100%;
    display:flex;
    z-index: 20;
    justify-content:center; /* Centrer horizontalement */
    align-items:center; /* Centrer Verticalement */
    border-radius:12px;
    border-width:2px;
    border-style:solid;
    backface-visibility: hidden;
    transition:transform 600ms ease-in-out;
}

.card-front{
    flex-direction:column;
    border-color : #cf0775; 
    background-color: #f75196;
    transform:rotateY(180deg);
}

.card-back{
    border-color : #ffffff; 
    background-color: #023d38;
}

.card.visible .card-back{
/*.card:hover .card-back{*/
    transform:rotateY(-180deg);
}

.card.visible .card-front{
/*.card:hover .card-front{*/
    transform:rotateY(0);
}

.dos{
    position:flex-start;
    width:90px;
    height:90px;
    transition:width 100ms ease-in-out,height 100ms ease-in-out;
}

.card-back:hover .dos{
    width:110px;
    height:110px;
}

.idea{
    position:flex-start;
    width:90px;
    height:90px;
    transition:transform 100ms ease-in-out;
    transform:scale(0.9);
    /*background-color:#e9e507;*/
    justify-content:center; /* Centrer horizontalement */
    align-items:center; /* Centrer Verticalement */
}


.defi{
    /*background-color:#e97407;*/
    /*position:flex;*/
    color:whitesmoke;
    font-size:17px;
    font-family: 'Short Stack', cursive;
    justify-content:center; /* Centrer horizontalement */
    align-items:center; /* Centrer Verticalement */
}



.card-front:hover .idea{
    transform:scale(1);
}

@media(max-width:600px){
    #game-container{
        grid-template-columns: repeat(2,auto);
    }
}