#court_frame {
    padding-bottom: 63% !important;
}
#court_frame #inner_color {
    width: 84% !important;
    padding-bottom: 47% !important;
    margin-left: 8% !important;
    margin-top: 8.3% !important;
}
#inner_circle {
    width: 13.8%;
    padding-bottom: 13.6%;
    background-color: #ded40e;
    border-radius: 50%;
    position: absolute;
    display: inline-block;

    left: calc( 50% - 6.7% );
    top: calc( 50% - 12% );
}
#left3point {
width: 31.7%;
    padding-bottom: 46.6%;
    background-color: #ccd40e;
    position: absolute;
    display: inline-block;
    left: 0;
    top: calc( 50% - 42% );
    border-top-right-radius: 75% 50%;
    border-bottom-right-radius: 75% 50%;
}

#right3point {
width: 31.2%;
    padding-bottom: 46.6%;
    background-color: #ccd40e;
    position: absolute;
    display: inline-block;
    right: 0;
    top: calc( 50% - 42% );
    border-top-left-radius: 75% 50%;
    border-bottom-left-radius: 75% 50%;
}
#leftkey {
width: 64.8%;
    padding-bottom: 42.9%;
    background-color: #000000;
    position: absolute;
    display: inline-block;
    left: 0;
    top: calc( 50% - 14.1% );
}
#leftkeycircle {
    width: 21.3%;
    padding-bottom: 42.9%;
    background-color: green;
    position: absolute;
    display: inline-block;
    left: calc( 50% - -15% );
    top: calc( 50% - 14.1% );
    border-top-right-radius: 100% 50%;
    border-bottom-right-radius: 100% 50%;
}

#rightkey {
width: 64.8%;
    padding-bottom: 42.9%;
    background-color: #000000;
    position: absolute;
    display: inline-block;
    right: 0;
    top: calc( 50% - 14.1% );
}
#rightkeycircle {
    width: 21.3%;
    padding-bottom: 42.9%;
    background-color: green;
    position: absolute;
    display: inline-block;
    right: calc( 50% - -15% );
    top: calc( 50% - 14.1% );
    border-top-left-radius: 100% 50%;
    border-bottom-left-radius: 100% 50%;
}
#court_frame, #inner_color, #right3point, #left3point, #leftkey, #leftkeycircle, #rightkeycircle, #inner_circle, #rightkey {transition: all 0.5s ease;}

#court_frame.choice-1, #inner_color.choice-1, #right3point.choice-1, #left3point.choice-1 {background-color: #00562f;}
#court_frame.choice-2, #inner_color.choice-2, #right3point.choice-2, #left3point.choice-2 {background-color: #1b4d2d;}
#court_frame.choice-3, #inner_color.choice-3, #right3point.choice-3, #left3point.choice-3 {background-color: #375748;}
#court_frame.choice-4, #inner_color.choice-4, #right3point.choice-4, #left3point.choice-4 {background-color: #614f43;}
#court_frame.choice-5, #inner_color.choice-5, #right3point.choice-5, #left3point.choice-5 {background-color: #382728;}
#court_frame.choice-6, #inner_color.choice-6, #right3point.choice-6, #left3point.choice-6 {background-color: #73292f;}
#court_frame.choice-7, #inner_color.choice-7, #right3point.choice-7, #left3point.choice-7 {background-color: #bd9f6f;}
#court_frame.choice-8, #inner_color.choice-8, #right3point.choice-8, #left3point.choice-8 {background-color: #4e131e;}
#court_frame.choice-9, #inner_color.choice-9, #right3point.choice-9, #left3point.choice-9 {background-color: #1c1b57;}
#court_frame.choice-10, #inner_color.choice-10, #right3point.choice-10, #left3point.choice-10 {background-color: #5b5d62;}
#court_frame.choice-11, #inner_color.choice-11, #right3point.choice-11, #left3point.choice-11 {background-color: #002f54;}
#court_frame.choice-12, #inner_color.choice-12, #right3point.choice-12, #left3point.choice-12 {background-color: #00517f;}
#court_frame.choice-13, #inner_color.choice-13, #right3point.choice-13, #left3point.choice-13 {background-color: #8d9198;}
#court_frame.choice-14, #inner_color.choice-14, #right3point.choice-14, #left3point.choice-14 {background-color: #49c7ed;}
#court_frame.choice-15, #inner_color.choice-15, #right3point.choice-15, #left3point.choice-15 {background-color: #ffca6e;}
#court_frame.choice-16, #inner_color.choice-16, #right3point.choice-16, #left3point.choice-16 {background-color: #e35e44;}
#court_frame.choice-17, #inner_color.choice-17, #right3point.choice-17, #left3point.choice-17 {background-color: #c71823;}
#court_frame.choice-18, #inner_color.choice-18, #right3point.choice-18, #left3point.choice-18 {background-color: #000000;}

#leftkey.choice-1, #leftkeycircle.choice-1, #rightkeycircle.choice-1, #inner_circle.choice-1, #rightkey.choice-1 {background-color: #00562f;}
#leftkey.choice-2, #leftkeycircle.choice-2, #rightkeycircle.choice-2, #inner_circle.choice-2, #rightkey.choice-2 {background-color: #1b4d2d;}
#leftkey.choice-3, #leftkeycircle.choice-3, #rightkeycircle.choice-3, #inner_circle.choice-3, #rightkey.choice-3 {background-color: #375748;}
#leftkey.choice-4, #leftkeycircle.choice-4, #rightkeycircle.choice-4, #inner_circle.choice-4, #rightkey.choice-4 {background-color: #614f43;}
#leftkey.choice-5, #leftkeycircle.choice-5, #rightkeycircle.choice-5, #inner_circle.choice-5, #rightkey.choice-5 {background-color: #382728;}
#leftkey.choice-6, #leftkeycircle.choice-6, #rightkeycircle.choice-6, #inner_circle.choice-6, #rightkey.choice-6 {background-color: #73292f;}
#leftkey.choice-7, #leftkeycircle.choice-7, #rightkeycircle.choice-7, #inner_circle.choice-7, #rightkey.choice-7 {background-color: #bd9f6f;}
#leftkey.choice-8, #leftkeycircle.choice-8, #rightkeycircle.choice-8, #inner_circle.choice-8, #rightkey.choice-8 {background-color: #4e131e;}
#leftkey.choice-9, #leftkeycircle.choice-9, #rightkeycircle.choice-9, #inner_circle.choice-9, #rightkey.choice-9 {background-color: #1c1b57;}
#leftkey.choice-10, #leftkeycircle.choice-10, #rightkeycircle.choice-10, #inner_circle.choice-10, #rightkey.choice-10 {background-color: #5b5d62;}
#leftkey.choice-11, #leftkeycircle.choice-11, #rightkeycircle.choice-11, #inner_circle.choice-11, #rightkey.choice-11 {background-color: #002f54;}
#leftkey.choice-12, #leftkeycircle.choice-12, #rightkeycircle.choice-12, #inner_circle.choice-12, #rightkey.choice-12 {background-color: #00517f;}
#leftkey.choice-13, #leftkeycircle.choice-13, #rightkeycircle.choice-13, #inner_circle.choice-13, #rightkey.choice-13 {background-color: #8d9198;}
#leftkey.choice-14, #leftkeycircle.choice-14, #rightkeycircle.choice-14, #inner_circle.choice-14, #rightkey.choice-14 {background-color: #49c7ed;}
#leftkey.choice-15, #leftkeycircle.choice-15, #rightkeycircle.choice-15, #inner_circle.choice-15, #rightkey.choice-15 {background-color: #ffca6e;}
#leftkey.choice-16, #leftkeycircle.choice-16, #rightkeycircle.choice-16, #inner_circle.choice-16, #rightkey.choice-16 {background-color: #e35e44;}
#leftkey.choice-17, #leftkeycircle.choice-17, #rightkeycircle.choice-17, #inner_circle.choice-17, #rightkey.choice-17 {background-color: #c71823;}
#leftkey.choice-18, #leftkeycircle.choice-18, #rightkeycircle.choice-18, #inner_circle.choice-18, #rightkey.choice-18 {background-color: #000000;}