:root {
    --black: #282828; 
    --blue: #2892f9; 
    --red: #fb2f27;
    --yellow: #fdfe29;
}
*{
    margin: 0;
    padding: 0; 
}
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    font-size: 14px;
    font-weight: bold;
} 

.rings{
    background: #fff;
    width: 425px;
    height: 425px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    border: 1px solid var(--black);
}
.ring-1{
    background: #fff;
    width: calc(100% - 42.5px);
    height: calc(100% - 42.5px);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;  
    position: relative;
    border: 1px solid var(--black);
    color: black;
}
.ring-2{
    background: var(--black);
     width: calc(100% - 42.5px);
    height: calc(100% - 42.5px);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    border: 1px solid white;
    color: white;
}
.ring-3{
    background: var(--black);
     width: calc(100% - 42.5px);
    height: calc(100% - 42.5px);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    border: 1px solid white;
    color: white;
}
.ring-4{
    background: var(--blue);
     width: calc(100% - 42.5px);
    height: calc(100% - 42.5px);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;  
    position: relative;
    border: 1px solid var(--black);
    color: black;
}
.ring-5{
    background: var(--blue);
    width: calc(100% - 42.5px);
    height: calc(100% - 42.5px);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    border: 1px solid var(--black);
}
.ring-6{
    background: var(--red);
     width: calc(100% - 42.5px);
    height: calc(100% - 42.5px);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    border: 1px solid var(--black);
}
.ring-7{
    background: var(--red);
     width: calc(100% - 42.5px);
    height: calc(100% - 42.5px);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    border: 1px solid var(--black);
}
.ring-8{
    background: var(--yellow);
     width: calc(100% - 42.5px);
    height: calc(100% - 42.5px);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    border: 1px solid var(--black);
}
.ring-9{
    background: var(--yellow);
     width: calc(100% - 42.5px);
    height: calc(100% - 42.5px);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    border: 1px solid var(--black);
}
.ring-10{
    background: var(--yellow);
     width: calc(100% - 21.25px);
    height: calc(100% - 21.25px);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    border: 1px solid var(--black);
}

.num{
 position: absolute;
  top: 50%;
  left: 10px;
  transform: translate(-50%, -50%);
}

.num-right{
  position: absolute;
  top: 50%;
  right:2px;
  transform: translate(-50%, -50%);
}

.ring-1::after,
.ring-2::after,
.ring-3::after,
.ring-4::after,
.ring-5::after,
.ring-6::after,
.ring-7::after,
.ring-8::after,
.ring-9::after {
 position: absolute;
 transform: translateX(50%);
 margin: auto;
font-size: 14px;
font-weight: bold;

}
.ring-1::after {
    content: "1";
    transform: translateY(-202px);
}

.ring-2::after {
    content: "2";
    transform: translateY(calc(-202px + 21px));
    color: black;
    
}

.ring-3::after {
    content: "3";
    transform: translateY(calc( -202px + (21px * 2)));
    color: white;
}

.ring-4::after {
    content: "4";
    transform: translateY(calc( -202px + (21px * 3)));
    color: white;
}

.ring-5::after {
    content: "5";
    transform: translateY(calc( -202px + (21px * 4)));
}

.ring-6::after {
    content: "6";
    transform: translateY(calc( -202px + (21px * 5)));
}

.ring-7::after {
    content: "7";
    transform: translateY(calc( -202px + (21px * 6)));
}

.ring-8::after {
    content: "8";
    transform: translateY(calc( -202px + (21px * 7)));
}
.ring-9::after {
    content: "9";
    transform: translateY(calc( -202px + (21px * 8)));
}


.ring-1::before,
.ring-2::before,
.ring-3::before,
.ring-4::before,
.ring-5::before,
.ring-6::before,
.ring-7::before,
.ring-8::before,
.ring-9::before {
 position: absolute;
 transform: translateX(50%);
 margin: auto;
font-size: 14px;
font-weight: bold;
color: var(--black);

}
.ring-1::before {
    content: "1";
    transform: translateY(202px);
}

.ring-2::before {
    content: "2";
    transform: translateY(calc(202px - 21px));
    
}

.ring-3::before {
    content: "3";
    transform: translateY(calc( 202px - (21px * 2)));
    color: white;
}

.ring-4::before {
    content: "4";
    transform: translateY(calc( 202px - (21px * 3)));
    color: white;
}

.ring-5::before {
    content: "5";
    transform: translateY(calc( 202px - (21px * 4)));
}

.ring-6::before {
    content: "6";
    transform: translateY(calc( 202px - (21px * 5)));
}

.ring-7::before {
    content: "7";
    transform: translateY(calc( 202px - (21px * 6)));
}

.ring-8::before {
    content: "8";
    transform: translateY(calc( 202px - (21px * 7)));
}
.ring-9::before {
    content: "9";
    transform: translateY(calc( 202px - (21px * 8)));
}