body {
    overscroll-behavior: contain;
    background-image: url('../res/439.jpg');    
    background-repeat: repeat;
    caret-color: transparent;
  }
.container {
    height: 98vh;
    width: 98vw;
    text-align: center;
    z-index: 1;
    /*background-color: white;*/
}
.field {
    margin:auto;
    background-image: url('../res/nahtloses-gruenes-grasmuster_1284-52275.avif');    
    /*background-image: url('../res/turf-surface-texture.jpg');        */
    background-size: contain;

    height: 90vh;
    width: 90vh;
    display: grid;
}
.snake1{
    border: solid black;
}
.snake2{
    border: none;
}

#damage {  
    position: absolute;
    color:rgba(256,256,256,0);
    font-size:50px;    
    top: 0;
    left:0;
    right:0;
    border-radius: 90vh;  
    margin:auto;    
    height: 90vh;
    width: 90vh;
    line-height: 90vh;
}
#damage.animate {
    z-index:10;
    border: 35px solid rgba(192, 57, 43, 1);
    animation:0.6s ease-in 0s grow;    
    animation-fill-mode: forwards;
}

@keyframes grow {
    0% {
        -webkit-transform: scale( 0 );-moz-transform: scale( 0 );-o-transform: scale( 0 );-ms-transform: scale( 0 );transform: scale( 0 );
    }    
    30% {
        color:rgba(256,256,256,1);
        font-size:300px;            
        -webkit-transform: scale( 1.5 );
        -moz-transform: scale( 1.5 );
        -o-transform: scale( 1.5 );-ms-transform: scale( 1.5 );
        transform: scale( 1.5 );
        border-color: rgba(0,0,0,0);          
    }
    100%{
        color:rgba(256,256,256,0.2);
        font-size:300px;          
        -webkit-transform: scale( 1.5 );
        -moz-transform: scale( 1.5 );
        -o-transform: scale( 1.5 );-ms-transform: scale( 1.5 );
        transform: scale( 1.5 );
        border-color: rgba(0,0,0,0);       
        display:none
    }
}
.player0 {
    background-color: blue;
}

.player1 {
    background-color: red;
}
  
@media (orientation: portrait) {
    #damage{
        height: 90vw;
        width: 90vw;
    }
    .field {
        height: 90vw;
        width: 90vw;
    }
    .container {
        height: 98vh;
        width: 98vw;
    }
}



