main.css

body {
    background: orange;
}

#buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}


.card {
    float: left;
    margin: 1px;
    position: relative;
    height: 60vh;
    width: 50vh;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: all 600ms;
    transition: all 600ms;
    z-index: 20;
}

.card div {
        position: absolute;
        height: 100%;
        width: 100%;
        background-size: 100% 100%;
        text-align: center;
        line-height: 100%;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        border-radius: 2px;
    }
.card .back {
        background: aquamarine;
        font-size: 100px;
        -webkit-transform: rotateX(180deg);
        transform: rotateX(180deg);
    }
#description {
    
    width: 100%;
    height: 60%;
    font-size: 2vh;
    position: relative;
}
#players {
    height: 40%;
    width: 100%;
    font-size: 2vh;
    position: relative;
}


.card.flipped {
    transform: rotateX(180deg);
    -webkit-transform: rotateX(180deg);
}