gamestyles.css

html, body {
    font-family: arial, helvetica, sans-serif;
    margin: 0px;
    padding: 0px;
    /*overflow: hidden;*/
}

h1 {
    margin-top: 10px;
    padding: 0px;
    font-size: 3em;
    text-align: center;
}

#femmes .card.hidden { display: none; }
#badgers, #femmes {
    width: 100%;
    height: calc(100% - 332px);
    overflow-y: auto;
    text-align: center;
    vertical-align: top;
}
#badgers { box-shadow: inset 0px 0px 10px #3A3A3A; }

#badgers .card, #femmes .card {
    display: inline-block;
    margin: 10px;
    padding: 10px;
    border: 4px solid #000000;
    border-radius: 8px;
    background-color: #E3E3E3;
    min-width: 276px;
    max-width: 276px;
    /*min-height: 458px;*/
    max-height: 458px;
    cursor: pointer;
    transition: 0.3s;
    left: calc(50% - 276px);
    vertical-align: top;
    background-size: cover;
    background-position: center center;
    /*bottom: calc(85% - 468px);*/
}

#badgers .card { background-image: url("i/c/badgercard.jpg"); }
#femmes .card { background-image: url("i/c/femmecard.jpg"); }

#badgers .card:hover, #femmes .card:hover { border-color: #FF0000; }
#badgers .card h2, #femmes .card h2 { margin: 0px auto 8px auto; }
#badgers .card h3, #femmes .card h3 { font-weight: normal; margin: 0px; }
#badgers .card p, h3, ul, #femmes .card p, h3, ul { text-align: left; }
#badgers .card img.icon, #femmes .card img.icon { height: 256px; transition: 1s; transform: rotateY(0deg); }
#badgers .card ul, #femmes .card ul { list-style: none; margin: 2px; columns: 2; padding-left: 4px; }
#badgers .card p, #femmes .card p { margin: 5px 10px; max-width: 256px; min-height: 72px; max-height: 72px; }

#badgers .selected {
    position: absolute;
    left: 110%;
    bottom: 217px;
    animation: badger-pos 2.5s ease-out forwards;
}
#femmes .selected {
    position: absolute;
    left: -10%;
    top: 115px;
    animation: femme-pos 2.5s ease-out forwards;
}
#badgers .selected img.icon, #femmes .selected img.icon { transform: rotateY(180deg); }
#badgers .selected.hit { animation: badger-pos 2s ease-in-out forwards, hit 0.1s linear 3; }
#femmes .selected.hit { animation: femme-pos 2s ease-in-out forwards, hit 0.1s linear 3; }

@keyframes badger-pos {
    100% {
        left: calc(10% - 34px);
        bottom: 217px;
    }
}
@keyframes femme-pos {
    100% {
        left: calc(90% - 290px);
        top: 115px;
    }
}
@keyframes buttons-rise {
    100% {
        bottom: 0px;
    }
}
@keyframes hit {
    100% { transform: translateX(0px); }
    50% { transform: translateX(-10px); }
    0% { transform: translateX(0px); }
}

#box {
    display: none;
    position: absolute;
    bottom: -220px;
    left: 0px;
    right: 0px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 25px;
    padding: 20px;
    border: 4px solid #000000;
    background-color: rgba(255, 255, 255, 1);
    width: 80%;
    height: 132px;
    z-index: 1;
    transition: 0.2s;
}
#box.rise { animation: buttons-rise 1s ease-out forwards; }

#buttons li {
    transition: 0.3s;
}

#buttons ul {
    columns: 2;
    padding: 0px;
    margin: 0px;
    list-style: none;
}

#buttons li:nth-child(even) {
    margin-bottom: 0px;
}

#buttons ul li {
    font-size: 2em;
    padding: 8px 0px;
    margin-bottom: 10px;
    border: 4px solid #000000;
    text-align: center;
    cursor: pointer;
}

#buttons ul li:hover { background-color: rgba(0, 0, 0, 0.2); }

#msgbox {
    text-align: center;
    font-size: 2em;
    display: none;
    width: 100%;
    margin-left: -20px;
    padding: 0px 20px;
    z-index: -1;
}

/*#counter.hide { display: none; }*/
#counter {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    text-align: center;
    background-color: rgba(255, 255, 255, .75);
    z-index: 10;
}

#counter #options {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    margin: auto;
    width: 30%;
    padding: 14px;
    background-color: #FFFFFF;
    box-shadow: 0px 5px 10px #454545;
}

#options ul {
    width: 100%;
    display: inline-block;
    list-style-type: none;
    text-align: center;
    columns: 2;
    padding: 0px;
    margin: 0px;
}

#options ul :last-child {
    column-span: all;
    background-color: rgba(255, 0, 0, .2);
    margin: 0px;
}

#options ul li {
    font-size: 2em;
    cursor: pointer;
    padding: 8px;
    margin-bottom: 10px;
    border: 4px solid black;
}
#options ul li:hover { background-color: rgba(0, 0, 0, 0.2); }
#options ul li:hover:last-child { background-color: rgba(255, 0, 0, 0.4); }

.health {
    padding: 4px;
    height: 3em;
    text-align: center;
}
.health img {
    height: 3em;
    margin: 0px 2px;
}

.hide { 
    display: none;
}