div#game {
	
    
    max-width: calc(100vw - 300px);
    width :    calc(100vw - 300px);
    height: 100vh;
    margin-left: 150px;
    
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
    -webkit-perspective: 1200px;
            perspective: 1200px;
    
}

div.score {
    
    position: fixed;
    top     : 150px;
    left    :  25px;
    padding :  10px;
    padding-left   : 30px;
    padding-right  : 30px;
    background:#888;
    color   :  #fff;
    font-size: 300%;
    font-family: Arial;
    z-index :  10  ;
    border-radius  : 20%; 
    
}

div.score#score_2 {
    left: calc(100% - 115px);
}

div.player {
    background-position: center;
    background-repeat  : no-repeat;
    background-size    : contain;
    position: fixed;
    padding: 0;
    top   :  50px;
    width : 100px;
    height: 100px;
    z-index: 10  ;
    transition: display 0ms ease 500ms;
}

div#player_2 {
    background-image: url(img/rob2.png);
    left: calc(100% - 120px);
}

div#player_1 {
    background-image: url(img/rob1.png);
    left: 15px;
}

div.player.invisible {
    display: none;
}

div.rainbow {
    transition: background 999ms linear;
}


div.card {
     
    z-index: -1  ;
    float  : left;
    margin : auto;
    
    background:  #5cf;
    background-size:0px;
    background-position: center;
    background-repeat  : no-repeat;
    transition: 000ms background-size  ease 000ms,
                000ms background-color ease 000ms,
                500ms transform        ease   0ms,
                200ms box-shadow       ease   0ms;
    box-shadow: 0 0 6px 1px #f9c;
    /*backface-visibility: hidden;*/
}

div.card:hover {
    box-shadow: 0 0 12px 4px #f9c;
    z-index: 1000;
}

div.card.turned:hover {
    box-shadow: 0 0 12px 4px #5cf;
}

div.card.turned {
    background: #f9c;
    transform : rotate3d(1,0,0,180deg);
    box-shadow: 0 0 6px 1px #5cf;
}

div.card.true {
    background: #2CCD3A;
}

div.card.false {
    background: rgba(232,17,35 ,1);
}

div.card.turned,
div.card.true  ,
div.card.false {
    background-position: center;
    background-repeat  : no-repeat;
    background-size    : contain;
}


/* CARD SIZES */ 

div.card {
    
    width :  15vw;
    height:  15vw;
    margin:   1vw;
    
}

/* Prozentangaben, -> größere Displays, kleinere Prozente */

@media( max-width:480px ){
    
    div.card {
        width :  40vw;
        height:  40vw;
        margin:   2vw;
    }
    
    div#game {
        width : 100vw;
        height: 100vh;
    }
    
}

#end{
    display: none;
    
    position: fixed;
    top     :  50% ;
    left    :  50% ;
    transform: translate(-50%,-50%);
    z-index : 99999; 
    
    padding: 50px;
    border-radius: 20px;
    
    font-size: 30px;
    font-family: "arial";
    text-align: center;
    
    color: #fff;
    background: #a5a;
    box-shadow: 25px 25px 25px 8px #111;
    
    cursor: pointer;
}

#end:hover{
    background: #f9c;
}