styles.css

#messages {
    display:none;
}

i {
    border-radius: 21px;
    padding: 9px;
    transition: 0.2s ease-out;
    width: 80px;
    display: inline-block
}

table {
    width: 100%;
}

#game {
    font-family: Helvetica, Arial, "Lucida Grande", sans-serif; 
    width: 340px;
    text-align: center
}

.leg {
    box-shadow: 7px 7px 28px 0px rgba(50, 50, 50, 0.6);
    height: 55px;
    width: 12px;
    border-radius: 0 0 8px 8px;
    float: left
}

.right {
    border: 0px solid #00f;
    float: right
}

table {
    border: 0px solid #00f;
    box-shadow: 7px 7px 28px 0px rgba(50, 50, 50, 0.6);
    padding: 7px;
    border-spacing: 4px;
    border-radius: 8px 8px 0 0
}

td {
    border: 0px solid #00f;
    border-radius: 2000px;
    box-shadow: inset 7px 7px 20px 0px rgba(50, 50, 50, 0.4);
    opacity: 1;
    height: 40px;
    background: #fff
}

button {
    margin: 20px auto 0
}

#game,
table {
    margin: 30px auto 0
}
.leg,
table {
    background: #00f
}

td:hover {
    opacity: 0.6
}

td.Red,
td.Yellow {
    box-shadow: inset 0 0 25px rgba(99, 99, 99, 0.7)
}

.Red:hover,
.Yellow:hover {
    opacity: 1
}

.Yellow {
    background: #ff0
}

.Red {
    background: #f00;
    color: #fff
}

@media (min-width: 500px) {
    #game {
        width: 405px;
    }
    
    td {
        height: 47px;
        border-width: 1px
    }
    
    .leg {
        width: 13px;
        height: 60px
    }
}

@media (min-width: 600px) {
    #game {
        width: 503px;
    }
    
    td {
        height: 59px;
        border-width: 2px
    }
    
    .leg {
        width: 14px;
        height: 80px
    }
    
    button {
        margin: 30px auto 0;
        padding: 4px 10px
    }
}

@media (min-width: 700px) {
    #game {
        width: 601px;
    }
    
    td {
        height: 71px;
        border-width: 3px
    }
    
    .leg {
        width: 16px;
        height: 90px
    }
    
    button {
        padding: 5px 20px
    }
    
    td {
        box-shadow: inset 15px 15px 15px 0px rgba(50, 50, 50, 0.25)
    }
    
    td.Red,
    td.Yellow {
        box-shadow: inset 0 0 20px rgba(99, 99, 99, 0.8)
    }
    
    .leg,
    table {
        box-shadow: 15px 15px 15px 0px rgba(50, 50, 50, 0.3)
    }
}

@media (max-width: 370px) {
    #game {
        width: 249px;
    }
    
    td {
        height: 29px;
        border-width: 0
    }
    
    .leg {
        width: 8px;
        height: 40px
    }
    button {
        margin: 10px auto 0
    }
    
    td {
        box-shadow: inset 3px 3px 10px 0px rgba(50, 50, 50, 0.4)
    }
    
    td.Red,
    td.Yellow {
        box-shadow: inset 0 0 10px rgba(99, 99, 99, 0.7)
    }
    
    .leg,
    table {
        box-shadow: 3px 3px 10px 0px rgba(50, 50, 50, 0.6)
    }
}

@media (max-width: 280px) {
    #game {
        width: 200px;
    }
    
    td {
        height: 22px;
    }
    
    * {
        box-shadow: none!important
    }
}