@import url('https://fonts.googleapis.com/css2?family=Rubik&display=swap');

html, body {
  font-family: 'Rubik', sans-serif;
  height: 100%;
  width: 100%;
}

#circleBase {
  position: relative;
	width: 305px;
	height: 305px;
/* 	-webkit-box-shadow:inset 0px 0px 0px 10px #f00;
  -moz-box-shadow:inset 0px 0px 0px 10px #f00;
  box-shadow:inset 0px 0px 0px 10px #f00; */
  background-color: black;
	border-radius: 50%;
	transform: rotate(0deg);
	transition: transform 0.2s linear;
}

#circular-text, #circular-text-base {
  position: absolute;
  background-color: black;
  color: white;
  border-radius: 100%;
  transform: translate(25px, 13px);
  text-align: center;
}
#circular-text-base {
  background-color: white;
  color: black;
  transform: translate(0px, -10px);
}
#circular-text-base span {
  background-color: white;
  color: black;

}

#circular-text span {
  background-color: black;
  color: white;
}
span {
  position: absolute;
  width: 25px;
  top: -4%;
  left: -4%;
  user-select: none;
}