.circle{
	height: 400px; 
	width: 400px; 
	background: #b3ff00; 
	border-radius:450px;
	border: 12px solid black;
	box-shadow: inset 23px 101px 118px 2px rgb(49 93 0);

}
.circle-ball-outline{
	width: 50px;
	height: 50px;
	border-radius: 420px;
	border: 1px solid black	;
}
.ball{
	width: 40.47px;
	height: 40.47px;
	border-radius: 40px;
	background: #c9f147;
 	transition: .2s ease-in-out;
	z-index: 3;
	box-shadow:  inset 0px 0px 4px 2px rgb(0 0 0);

}
.ball-y{
	width: 27.47px;
	height: 40.47px;
    margin-top: 2.5px;
    left: 8px;
}
.ball-x{
	height: 27.47px;
	margin-left: 2.5px;	
	top: 8px;
}
.bar-x{
	background: #a8e100;;
    width: 410px;
    height: 42px;
    border: 6px solid black;
    box-shadow: inset 0 19px 19px 0 rgba(24 24 24 / 67%);

    border-radius: 5px;	
}
.bar-y{
	border-radius: 5px;
    background:#a8e100;
    width: 42px;
    height: 400px;
    border: 6px solid black;
    box-shadow: inset 0 0 20px 0 rgba(24 24 24 / 67%);
}
.ball-line-y{
	background-color: rgb(0, 0, 0);
    width: 42px;
    height: 1px;
    box-shadow: rgb(0, 0, 0) 0px 0px 5px 0px;
  	z-index: 8;
}
.ball-line-x{
	background-color: rgb(0, 0, 0);
	width: 1px;
	height: 42px;
	box-shadow: rgb(0, 0, 0) 0px 0px 5px 0px;
	z-index: 8;
}
@media only screen and (max-width: 600px) {
	.circle {
	    height: 230px;
	    width: 230px;
	}
	.bar-y.d-flex.flex-column{
		height: 230px !important;
	}
	.d-flex.flex-column.gap-5{
		margin-top: 93.75px !important;
	}
	.bar-x.d-flex.flex-row{
		width: 230px !important;
	}
	.d-flex.flex-row.gap-5{
		margin-left: 93.75px !important;
	}
}
@media only screen and (max-width: 290px) {
	.circle {
	    height: 150px !important ;
	    width: 150px !important ;
	    border: 8px solid black;
	}
	.bar-y.d-flex.flex-column{
		height: 150px !important;
		border: 3px solid black !important;
	}
	div#bar-y-ball{
	    margin-top: 0.5px;
        left: 1px;
	}
	.d-flex.flex-column.gap-5{
		margin-top: 50px !important;
	}
	/*.ball-line-y.position-absolute{*/
	/*    top: -10px !important;*/
	  
	/*}*/
	.bar-x.d-flex.flex-row{
		width: 150px !important;
		border: 3px solid black !important;
	}
	/*.ball-line-y.position-absolute{*/
	/*    top :-5px !important;*/
	/*}*/
	.d-flex.flex-row.gap-5{
		margin-left: 50px !important;
	}
	.ball{
		width: 30.47px !important ;
		height: 30.47px !important ;
	}
	.ball-outline{
		width: 30px !important ;
		height: 30px !important ;
	}
	.bar-y{
	    width: 32px !important ;
	    height: 400px !important ;
	    margin-top: 5.5px;
        left: 1px;
	}
	.ball-line-y{
	    width: 32px !important ;
	    height: 1px !important ;
	}
	.bar-x{
	    width: 410px !important ;
	    height: 32px !important ;
	}
	.ball-line-x{
		width: 1px !important ;
		height: 32px !important ;
	}
	.d-flex.flex-row.mt-2.gap-40 {
        gap: 20px !important;
    }
    div#bar-x-ball{
        margin-left: 8.5px !important;
        top: 1px !important;
    
    } div#bar-y-ball{
        margin-left: -0.5px !important;
        top: 6.5px !important;
    
    }
    .d-flex.circle-ball-outline.position-absolute{
        width: 35px !important ;
        height: 35px !important;
    }
  
}