/*common part*/
.ruler1,
.ruler2,
.ruler3,
.ruler4,
.ruler5,
.ruler6,
.ruler7,
.ruler8,
.ruler9,
.ruler10,
.ruler11,
.ruler12,
.ruler13,
.ruler14,
.ruler15,
.ruler16,
.ruler17,
.ruler18,
.ruler19,
.ruler20,
.ruler21,
.ruler22 {
    position: relative;
    width: 100%;
    margin: 20px auto;
    height: 14px;
}

/******************the different width of ruler has to be set here*****************************/
.ruler1 .cm,
.ruler2 .cm,
.ruler1 .mm,
.ruler2 .mm {
    position: absolute;
    border-left: 1px solid #555;
    height: 12px;
    width: 20%;
}

.ruler3 .cm,
.ruler4 .cm,
.ruler3 .mm,
.ruler4 .mm,
.ruler5 .cm,
.ruler6 .cm,
.ruler5 .mm,
.ruler6 .mm {
    position: absolute;
    border-left: 1px solid #555;
    height: 12px;
    width: 40%;
}

.ruler7 .cm,
.ruler8 .cm,
.ruler7 .mm,
.ruler8 .mm,
.ruler17 .cm,
.ruler18 .cm {
    position: absolute;
    border-left: 1px solid #555;
    height: 12px;
    width:66.6%;
}

.ruler9 .cm,
.ruler10 .cm,
.ruler9 .mm,
.ruler10 .mm {
    position: absolute;
    border-left: 1px solid #555;
    height: 12px;
    width:46.15%;
}


.ruler11 .cm,
.ruler12 .cm,
.ruler13 .cm,
.ruler14 .cm {
    position: absolute;
    border-left: 1px solid #555;
    height: 12px;
    width:33.33%;
}

.ruler15 .cm,
.ruler16 .cm,
.ruler19 .cm,
.ruler20 .cm,
.ruler21 .cm,
.ruler22 .cm {
    position: absolute;
    border-left: 1px solid #555;
    height: 12px;
    width:50%;
}


.ruler1 .cm:after,
.ruler2 .cm:after,
.ruler3 .cm:after,
.ruler4 .cm:after,
.ruler5 .cm:after,
.ruler6 .cm:after,
.ruler7 .cm:after,
.ruler8 .cm:after,
.ruler9 .cm:after,
.ruler10 .cm:after,
.ruler11 .cm:after,
.ruler12 .cm:after,
.ruler13 .cm:after,
.ruler14 .cm:after,
.ruler15 .cm:after,
.ruler16 .cm:after,
.ruler17 .cm:after,
.ruler18 .cm:after,
.ruler19 .cm:after,
.ruler20 .cm:after,
.ruler21 .cm:after,
.ruler22 .cm:after {
    position: absolute;
    bottom: 15px;
    font: 12px/1 sans-serif;
}

.ruler1 .mm,
.ruler2 .mm,
.ruler3 .mm,
.ruler4 .mm,
.ruler5 .mm,
.ruler6 .mm,
.ruler7 .mm,
.ruler8 .mm,
.ruler9 .mm,
.ruler10 .mm {
    height: 5px;
}


.ruler1 .mm:nth-of-type(5),
.ruler2 .mm:nth-of-type(5),
.ruler3 .mm:nth-of-type(5),
.ruler4 .mm:nth-of-type(5) {
    height: 10px;
}


.ruler1 .cm:nth-of-type(1),
.ruler2 .cm:nth-of-type(1),
.ruler4 .cm:nth-of-type(1){
    left: 0%;
}

/*************************separate setting for rulers in step 1*********************************/


.ruler1 .cm:nth-of-type(2),
.ruler2 .cm:nth-of-type(2) {
    left: 20%;
}

.ruler1 .cm:nth-of-type(3),
.ruler2 .cm:nth-of-type(3) {
    left: 40%;
}

.ruler1 .cm:nth-of-type(4),
.ruler2 .cm:nth-of-type(4) {
    left: 60%;
}

.ruler1 .cm:nth-of-type(5),
.ruler2 .cm:nth-of-type(5) {
    left: 80%;
}

.ruler1 .cm:nth-of-type(6),
.ruler2 .cm:nth-of-type(6) {
    left: 100%;
}

.ruler1 .cm:nth-of-type(1):after {
    content: "0";
}

.ruler1 .cm:nth-of-type(2):after {
    content: "10";
}

.ruler1 .cm:nth-of-type(3):after {
    content: "20";
}

.ruler1 .cm:nth-of-type(4):after {
    content: "30";
}

.ruler1 .cm:nth-of-type(5):after {
    content: "40";
}

.ruler1 .cm:nth-of-type(6):after {
    content: "50";
}

.ruler2 .cm:nth-of-type(2):after {
    content: "60";
}

.ruler2 .cm:nth-of-type(3):after {
    content: "70";
}

.ruler2 .cm:nth-of-type(4):after {
    content: "80";
}

.ruler2 .cm:nth-of-type(5):after {
    content: "90";
}

.ruler2 .cm:nth-of-type(6):after {
    content: "100";
}


.ruler1 .mm:nth-of-type(1),
.ruler2 .mm:nth-of-type(1),
.ruler3 .mm:nth-of-type(1),
.ruler4 .mm:nth-of-type(1) {
    left: 10%;
}

.ruler1 .mm:nth-of-type(2),
.ruler2 .mm:nth-of-type(2),
.ruler3 .mm:nth-of-type(2),
.ruler4 .mm:nth-of-type(2),
.ruler5 .mm:nth-of-type(1),
.ruler6 .mm:nth-of-type(1) {
    left: 20%;
}

.ruler1 .mm:nth-of-type(3),
.ruler2 .mm:nth-of-type(3),
.ruler3 .mm:nth-of-type(3),
.ruler4 .mm:nth-of-type(3) {
    left: 30%;
}

.ruler1 .mm:nth-of-type(4),
.ruler2 .mm:nth-of-type(4),
.ruler3 .mm:nth-of-type(4),
.ruler4 .mm:nth-of-type(4),
.ruler5 .mm:nth-of-type(2),
.ruler6 .mm:nth-of-type(2) {
    left: 40%;
}

.ruler1 .mm:nth-of-type(5),
.ruler2 .mm:nth-of-type(5),
.ruler3 .mm:nth-of-type(5),
.ruler4 .mm:nth-of-type(5) {
    left: 50%;
}

.ruler1 .mm:nth-of-type(6),
.ruler2 .mm:nth-of-type(6),
.ruler3 .mm:nth-of-type(6),
.ruler4 .mm:nth-of-type(6),
.ruler5 .mm:nth-of-type(3),
.ruler6 .mm:nth-of-type(3) {
    left: 60%;
}

.ruler1 .mm:nth-of-type(7),
.ruler2 .mm:nth-of-type(7),
.ruler3 .mm:nth-of-type(7),
.ruler4 .mm:nth-of-type(7) {
    left: 70%;
}

.ruler1 .mm:nth-of-type(8),
.ruler2 .mm:nth-of-type(8),
.ruler3 .mm:nth-of-type(8),
.ruler4 .mm:nth-of-type(8),
.ruler5 .mm:nth-of-type(4),
.ruler6 .mm:nth-of-type(4) {
    left: 80%;
}

.ruler1 .mm:nth-of-type(9),
.ruler2 .mm:nth-of-type(9),
.ruler3 .mm:nth-of-type(9),
.ruler4 .mm:nth-of-type(9) {
    left: 90%;
}

/*******************************separate settings for rulers in step 2*************************/


:root {
    --ruler3-cm2: "100";
    --ruler3-cm3: "100";
    --ruler4-cm2: "100";
    --ruler4-cm3: "100";
    --ruler4-cm4: "100";
    --ruler5-cm2: "100";
    --ruler5-cm3: "100";
    --ruler6-cm2: "100";
    --ruler6-cm3: "100";
    --ruler6-cm4: "100";
    --ruler7-cm2: "100";
    --ruler8-cm2: "100";
    --ruler8-cm3: "100";
    --ruler9-cm2: "100";
    --ruler9-cm3: "100";
    --ruler10-cm1: "100";
    --ruler10-cm2: "100";
    --ruler10-cm3: "100";
    --ruler11-cm2: "100";
    --ruler11-cm3: "100";
    --ruler12-cm1: "100";
    --ruler12-cm2: "100";
    --ruler12-cm3: "100";
    --ruler12-cm4: "100";
    --ruler13-cm2: "100";
    --ruler13-cm3: "100";
    --ruler13-cm4: "100";
    --ruler14-cm1: "100";
    --ruler14-cm2: "100";
    --ruler14-cm3: "100";
    --ruler14-cm4: "100";
    --ruler15-cm1: "100";
    --ruler16-cm2: "100";
    --ruler16-cm1: "100";
    --ruler17-cm1: "100";
    --ruler17-cm2: "100";
    --ruler18-cm2: "100";
    --ruler18-cm3: "100";
    --ruler19-cm1: "100";
    --ruler20-cm1: "100";
    --ruler19-cm2: "100";
    --ruler21-cm1: "100";
    --ruler22-cm1: "100";
}

/*position of each scale*/
.ruler3 .cm:nth-of-type(1),
.ruler5 .cm:nth-of-type(1),
.ruler7 .cm:nth-of-type(1),
.ruler9 .cm:nth-of-type(1),
.ruler11 .cm:nth-of-type(1),
.ruler13 .cm:nth-of-type(1) {
    left:0%;
    border: transparent;
}

.ruler12 .cm:nth-of-type(1){
    left: 0%;
}


.ruler3 .cm:nth-of-type(2),
.ruler5 .cm:nth-of-type(2) {
    left: 40%;
}

.ruler3 .cm:nth-of-type(3),
.ruler5 .cm:nth-of-type(3) {
    left: 80%;
}

.ruler4 .cm:nth-of-type(2),
.ruler6 .cm:nth-of-type(2) {
    left: 20%;
}

.ruler4 .cm:nth-of-type(3),
.ruler6 .cm:nth-of-type(3) {
    left: 60%;
}

.ruler4 .cm:nth-of-type(4),
.ruler6 .cm:nth-of-type(4) {
    left: 100%;
}

/*scales*/

.ruler3 .cm:nth-of-type(1),
.ruler7 .cm:nth-of-type(1),
.ruler9 .cm:nth-of-type(1),
.ruler11 .cm:nth-of-type(1),
.ruler12 .cm:nth-of-type(1),
.ruler13 .cm:nth-of-type(1):after {
    content:"";
}


.ruler3 .cm:nth-of-type(2):after {
    content:var(--ruler3-cm2);
}

.ruler3 .cm:nth-of-type(3):after {
    content:var(--ruler3-cm3);
}

.ruler4 .cm:nth-of-type(2):after {
    content:var(--ruler4-cm2);
}

.ruler4 .cm:nth-of-type(3):after {
    content:var(--ruler4-cm3);
}

.ruler4 .cm:nth-of-type(4):after {
    content:var(--ruler4-cm4);
}


/*************************** Separate Setting for rulers in Step 3 **********************************************/
.ruler5 .cm:nth-of-type(1),
.ruler6 .cm:nth-of-type(1),
.ruler8 .cm:nth-of-type(1) {
    left: 0%;
    border: transparent;
}

.ruler5 .cm:nth-of-type(2):after {
    content:var(--ruler5-cm2);
}

.ruler5 .cm:nth-of-type(3):after {
    content:var(--ruler5-cm3);
}

.ruler6 .cm:nth-of-type(1):after {
    content: "";
}

.ruler6 .cm:nth-of-type(2):after {
    content:var(--ruler6-cm2);
}


.ruler6 .cm:nth-of-type(3):after {
    content:var(--ruler6-cm3);
}

.ruler6 .cm:nth-of-type(4):after {
    content:var(--ruler6-cm4);
}
/**********************separate settings for rulers in Step 4 version 1**************************/

/*positions of cm scales*/

.ruler7 .cm:nth-of-type(2),
.ruler11 .cm:nth-of-type(3),
.ruler12 .cm:nth-of-type(3) {
    left: 66.67%;
}

.ruler8 .cm:nth-of-type(2),
.ruler11 .cm:nth-of-type(2),
.ruler12 .cm:nth-of-type(2){
    left: 33.3%;
}

.ruler8 .cm:nth-of-type(3),
.ruler12 .cm:nth-of-type(4){
    left: 100%;
}

/*set the cm scales*/

.ruler7 .cm:nth-of-type(2):after {
    content:var(--ruler7-cm2);
}

.ruler8 .cm:nth-of-type(1):after {
    content: "";
}

.ruler8 .cm:nth-of-type(2):after {
    content:var(--ruler8-cm2);
}

.ruler8 .cm:nth-of-type(3):after {
    content:var(--ruler8-cm3);
}

/*positions of mm scales*/
.ruler7 .mm:nth-of-type(1),
.ruler8 .mm:nth-of-type(1) {
    left: 25%;
}

.ruler7 .mm:nth-of-type(2),
.ruler8 .mm:nth-of-type(2) {
    left: 50%;
}

.ruler7 .mm:nth-of-type(3),
.ruler8 .mm:nth-of-type(3) {
    left: 75%;
}

/************************separating settings for Step 4 version 2**********************************/

.ruler9 .cm:nth-of-type(2){
    left: 46.15%;
}

.ruler9 .cm:nth-of-type(3){
    left: 92.31%;
}

.ruler10 .cm:nth-of-type(1) {
    left: 7.70%;
}

.ruler10 .cm:nth-of-type(2) {
    left: 53.85%;
}

.ruler10 .cm:nth-of-type(3) {
    left: 100%;
}

.ruler9 .cm:nth-of-type(2):after {
    content:var(--ruler9-cm2);
}
.ruler9 .cm:nth-of-type(3):after {
    content:var(--ruler9-cm3);
}

.ruler10 .cm:nth-of-type(1):after {
    content:var(--ruler10-cm1);
}
.ruler10 .cm:nth-of-type(2):after {
    content:var(--ruler10-cm2);
}
.ruler10 .cm:nth-of-type(3):after {
    content:var(--ruler10-cm3);
}
.ruler9 .mm:nth-of-type(1),
.ruler10 .mm:nth-of-type(1) {
    left: 33.3%;
    /* I don't know where these number comes from*/
}

.ruler9 .mm:nth-of-type(2),
.ruler10 .mm:nth-of-type(2) {
    left: 66.6%;
}



/*********************separate settings for rulers in Step 5 version 1********************/

.ruler12 .cm:nth-of-type(1):after {
    content: var(--ruler12-cm1);
}

.ruler11 .cm:nth-of-type(2):after {
    content: var(--ruler11-cm2);
}

.ruler12 .cm:nth-of-type(2):after {
    content: var(--ruler12-cm2);
}

.ruler11 .cm:nth-of-type(3):after {
    content: var(--ruler11-cm3);
}

.ruler12 .cm:nth-of-type(3):after {
    content: var(--ruler12-cm3);
}

.ruler12 .cm:nth-of-type(4):after {
    content: var(--ruler12-cm4);
}

/******************************** settings for rulers in Step 5 version 2 ************************/
.ruler13 .cm:nth-of-type(2){
    left: 28.57%;
}

.ruler13 .cm:nth-of-type(3){
    left: 57.14%;
}

.ruler13 .cm:nth-of-type(4){
    left: 85.71%;
}

.ruler14 .cm:nth-of-type(1) {
    left: 14.29%;
}

.ruler14 .cm:nth-of-type(2) {
    left: 42.86%;
}

.ruler14 .cm:nth-of-type(3) {
    left: 71.43%;
}

.ruler14 .cm:nth-of-type(4){
    left: 100%;
}

/*predetermine the value for each cm scale*/

.ruler13 .cm:nth-of-type(2):after {
    content: var(--ruler13-cm2);
}

.ruler13 .cm:nth-of-type(3):after {
    content: var(--ruler13-cm3);
}

.ruler13 .cm:nth-of-type(4):after {
    content: var(--ruler13-cm4);
}

.ruler14 .cm:nth-of-type(1):after {
    content: var(--ruler14-cm1);
}

.ruler14 .cm:nth-of-type(2):after {
    content: var(--ruler14-cm2);
}

.ruler14 .cm:nth-of-type(3):after {
    content: var(--ruler14-cm3);
}

.ruler14 .cm:nth-of-type(4):after {
    content: var(--ruler14-cm4);
}

/******************************** settings for rulers in Step 6 ************************/

.ruler15 .cm:nth-of-type(1) {
    left: 75%;
}

.ruler16 .cm:nth-of-type(1),
.ruler19 .cm:nth-of-type(1),
.ruler20 .cm:nth-of-type(1) {
    left: 25%;
}

.ruler16 .cm:nth-of-type(2),
.ruler19 .cm:nth-of-type(2) {
    left: 75%;
}

/*predetermine the scales of each cm*/
.ruler15 .cm:nth-of-type(1):after {
    content:var(--ruler15-cm1);
}

.ruler16 .cm:nth-of-type(1):after {
    content:var(--ruler16-cm1);
}


.ruler16 .cm:nth-of-type(2):after {
    content:var(--ruler16-cm2);
}

.ruler17 .cm:nth-of-type(1) {
    left: 0%;
}

.ruler18 .cm:nth-of-type(1) {
    left: 0%;
    border: transparent;
}

.ruler17 .cm:nth-of-type(1):after {
    content:var(--ruler17-cm1);
}

.ruler18 .cm:nth-of-type(1):after {
    content: "";
}

.ruler17 .cm:nth-of-type(2) {
    left: 66.66%;
}

.ruler18 .cm:nth-of-type(2) {
    left: 33.33%;
}

.ruler17 .cm:nth-of-type(2):after {
    content:var(--ruler17-cm2);
}

.ruler18 .cm:nth-of-type(2):after {
    content:var(--ruler18-cm2);
}


.ruler18 .cm:nth-of-type(3) {
    left: 100%;
}

.ruler18 .cm:nth-of-type(3):after {
    content:var(--ruler18-cm3);
}

.ruler19 .cm:nth-of-type(1):after {
    content:var(--ruler19-cm1);
}

.ruler19 .cm:nth-of-type(2):after {
    content:var(--ruler19-cm2);
}


.ruler20 .cm:nth-of-type(1):after {
    content:var(--ruler20-cm1);
}
/***************************** settings for rulers in Step 7 ***********************/
.ruler21 .cm:nth-of-type(1),
.ruler22 .cm:nth-of-type(1){
    left: 50%;
}

.ruler21 .cm:nth-of-type(1):after {
    content:var(--ruler21-cm1);
}

.ruler22 .cm:nth-of-type(1):after {
    content:var(--ruler22-cm1);
}