body {
background-color: #e5e5e5;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.clock {
width: 300px;
height: 300px;
background-color: #adadad;
border-radius: 50%;
border: 1px solid black;
position: relative;
.clock .nums {
--rotation: 0;
position: absolute;
width: 100%;
height: 100%;
text-align: center;
transform: rotate(var(--rotation));
font-size: medium;
.clock .n01 {
--rotation: 30deg;
.clock .n02 {
--rotation: 60deg;
.clock .n03 {
--rotation: 90deg;
.clock .n04 {
--rotation: 120deg;
.clock .n05 {
--rotation: 150deg;
.clock .n06 {
--rotation: 180deg;
.clock .n07 {
--rotation: 210deg;
.clock .n08 {
--rotation: 240deg;
.clock .n09 {
--rotation: 270deg;
.clock .n10 {
--rotation: 300deg;
.clock .n11 {
--rotation: 330deg;
.clock .n12 {
--rotation: 360deg;