*{
    box-sizing: border-box;
    margin:0px;
    padding:0px;
}
body{
    font-family: sans-serif;
}
.theme{
    background-color: rgb(210, 224, 228);
    /* background-color: white; */
}

.gamecardgrid{
   display: grid;
   grid-template-columns: auto auto auto auto;
   grid-column-gap: 0.5rem;
   grid-row-gap:1.5rem;
   justify-items: center;
   /* FIXME: remake at some point with bootstrap in mind */
}

.gamecard{
    width: 8vh; 
    height: 12vh;
    border: 0px !important;

    -webkit-transform-style: preserve-3d;

    transform-style: preserve-3d;

    -webkit-transition: transform .7s;
    -moz-transition:transform .7s;
    -o-trasition: transform .7s;

    transition: transform .7s ;
}

.gamecard:hover{
    -ms-transform: scale(1.15);
    -webkit-transform: scale(1.15);
    -moz-transform: scale(1.15);
    -o-transform: scale(1.15);

    transform: scale(1.15);

    -webkit-transition:rotate(.2s);
    -moz-transition: rotate(.2s);
    -o-transition: rotate(.2s);

    transition: rotate(.2s);

}

.gamecard:active{
    -ms-transform: scale(1.15);
    -webkit-transform: scale(1.15);
    -moz-transform: scale(1.15);
    -o-transform: scale(1.15);

    transform: scale(1.15);

    transition: rotate(.2s);
}

.gamecard.flip {
    -ms-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);

    transform: rotateY(180deg);
}

.cardimg,
.cardbg{
    width: 100%;
    height: 100%;
    position: absolute;
    /* border-radius: 5px; */

    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
}

.cardimg{
    -ms-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);

    transform: rotateY(180deg);
}

ul#highscore-list li:first-child  {
    font-weight: bold;
    font-size:27px;
}

.deck-selector {

    border-top-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border-top-right-radius: 8px;
    border-bottom-left-radius: 8px;
    border:gold 2px solid;
}
.deck-selector:hover {
    border:green 2px solid;
}
.deck-selector:active {
    -ms-transform: scale(1.05);
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -o-transform: scale(1.05);

    transform:scale(1.05);
}