body {
    background-color: #184d47;
}
.carrom-frame {
    border: 5px solid brown;
    height: 400px;
    width: 400px;
    top:50%;
    Left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    border-radius: 20px;
    box-shadow: 0 0 10px 1px black;
    background: #faf0af;
}

/*Pockets*/
.pockets {
    height: 40px;
    width: 40px;
    position: absolute;
    border-radius: 50%;
    background-image: radial-gradient(Circle, rgb(60, 60, 60), rgba(0, 0, 0));
    }
    .pocket-1 {
    top:0;
    Left: 0;
    }
    .pocket-2 {
    top:0;
    right: 0;
    }
    .pocket-3 {
    bottom: 0;
    Left: 0
    }
    .pocket-4 {
    bottom: 0;
    right: 0;
    }
/* *End of Pockets*/


/*Bases*/
.base {
    border: 3px solid #97623a;
    position: absolute;
    transform: translate (-50%, -50%);
    border-radius: 15px;
}
.top-base {
    height: 5.5%;
    width: 60%;
    top:12%;
    Left: 20%;
    border-bottom: 1.3px solid #97623a;
} 
.right-base {
    height: 60%;
    width: 5.5%;
    top:20%;
    right: 12%;
    border-left: 1.3px solid #97623a;
}
.bottom-base {
    height: 5.5%;
    width: 60%;
    bottom: 12%;
    Left: 20%;
    border-top: 1.3px solid #97623a;
}
.left-base {
    height: 60%;
    width: 5.5%;
    top:20%;
    Left: 12%;
    border-right: 1.3px solid #97623a;
}
/*End of Bases*/


/*Orange Circles*/
.orange-circle {
    height: 14px;
    width: 14px;
    background: #e67904;
    position: absolute;
    border-radius: 50%;
    margin: 3px 2px;
    }
    .orange-circle-1 {
    top: 0%;
    Left: 0%;
    }
    .orange-circle-2 {
    top: 0%;
    right: 0%;
    }
    .orange-circle-3 {
    top: 0%;
    right: 5%;
    }
    .orange-circle-4 {
    bottom: 0%;
    right: 5%;
    }
    .orange-circle-5 {
    bottom: 0%;
    right: 0%;
    }
    .orange-circle-6 {
    bottom: 0%;
    left: 0%;
    }
    .orange-circle-7 {
        bottom: 0%;
        right: 13%;
    }
    .orange-circle-8 {
        top: 0%;
        right: 15%;
    }
    /* End of Orange Circles*/



    /*Outlines*/
.outline {
    height: 18px;
    width: 18px;
    border: 3px solid #97623a;
    border-radius: 50%;
    position: absolute;
    }
    .outline-1 {
    top: -2px;
    Left: -1%;
    }
    .outline-2 {
    top: -2px;
    right: -1%;
    }
    .outline-3 {
    top: -2px;
    Left: 0%;
    }
    .outline-4 {
    bottom: -2px;
    Left: 0%;
    }
    .outline-5 {
        bottom: -2px;
        right: -1%;
    }
    .outline-6 {
        bottom: -2px;
        Left: -1%;
    }
    .outline-7 {
        bottom: -2px;
        right: 0%;
    }
    .outline-8 {
        top: -2px;
        Left: -10%;
    }
/*End of Outlines*/


/* Coins */
.coins {
    position: absolute;
}

.black-coin-1 {
    bottom: 20%;
    left: 3%;
}
.black-coin-2 {
    bottom: 0%;
    right: 2%;
}
.black-coin-3 {
    right: 10%;
    top: 3%;
}

.white-coin-1 {
    right: 25%;
    top: 3%;
}
.white-coin-2 {
    left: 10%;
    top: -7%;
}
.white-coin-3 {
    bottom: 30%;
    right: 20%;
}
.white-coin-4 {
    left: 30%;
    bottom: -6%;
}
.red-coin {
    bottom: 31%;
    right: 20%;
}
.striker-coin {
    bottom: 12%;
    right: 40%;
}
/* End of Coins */


/*Corners*/
.corners {
    height: 40px;
    width: 40px;
    border: 11px solid rgba(240, 129, 7);
    position: absolute;
    transform: translate(-50%,-50%);
    }
    .corner-1 {
        border-right: 0px;
        border-bottom: 0px;
        border-radius: 50% 0 0 0;
        top:4.5%;
        Left: 4.5%;
        }
        .corner-2 {
        border-left: 0px;
        border-bottom: 0px;
        border-radius: 0 50% 0 0;
        top:4.5%;
        right: -8.2%;
        }
        .corner-3 {
        border-top:0px;
        border-left:0px;
        border-radius:0 0 50% 0;
        bottom: -8.3%;
        right: -8.2%;
        }
        .corner-4 {
        border-top:0px;
        border-right:0px;
        border-radius: 0 0 0 50%;
        bottom: -8.3%;
        Left:4.5%;
        }
/* End of Corners */



/*Arrows*/
.arrow {
    position: absolute;
    }
    .arrow-1 {
    top:11%;
    Left: 11%;
    }
    .arrow-2 {
    top:9%;
    right: 8%;
    }
    .arrow-3 {
    bottom: 9%;
    right: 9%;
    }
    .arrow-4 {
    bottom: 7%;
    Left: 9%;
    }


.circle {
    height: 152px;
    width: 152px;
    border: 1px solid #97623a;
    border-radius: 50%;
    position: absolute;
    top: 51.5%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.star{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}