@keyframes turn {
            0%   {background-color: rgb(150, 0, 0);}
            1%  {background-color: initial;}
        }

        body{
            margin: 0;
        }

        h1{
            font-size: 25px;
        }

        canvas{
            border: 1px solid;
            box-shadow: 5px 5px #CCC;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
            max-width: 95%;
        }
        .score-red{
            background-color: red;
            width: 30px;
            height: 30px;  
            font-size: 20;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 50%;
        }
        .score-blue{
            background-color: blue;
            width: 30px;
            height: 30px;  
            font-size: 20;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 50%;
        }
        .active-turn{
            animation: 1s turn;
            animation-iteration-count: infinite;
        }
        main{
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;
        }
        .panel{
            padding: 10px;
            display:  flex;
            flex-direction: column;
            min-width: 200px;
        }
        .score{
            width: 100%;
            display: flex;
            flex-wrap:wrap;
            margin-bottom: 5px;
        }
        .turn-message{
            width: 100%;
            color: white;
            text-align: center;
            padding: 5px;        
            background-color: red;    
        }
        button{
            cursor:pointer;
            margin: 5px;
            padding: 5px;
        }