* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    background-color: #333;
    display: grid;
    place-content: center;
    /* height: 40rem; */
    /* width: 85rem; */
    width: 100vw;
    overflow: hidden;
    height: 100vh;

}

main {
    margin: auto;
    width: max-content;
    height: max-content;
    position: relative;
    scale: 0.8;

}

.clockcirc1 {
    width: 25rem;
    height: 25rem;
    background-color: white;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    margin: auto;

}

.outerdots p,
.bigdots p {
    width: 2rem;
    height: 1rem;
    background-color: transparent;
    transform-origin: 0 0;
    top: 50%;
    left: 50%;
    height: 50%;
    width: 2px;
    position: absolute;
    transform: rotate(calc(6deg*var(--xx)));
}

.outerdots p::before {
    content: '';
    width: 10px;
    height: 10px;
    /* background-color: #333f99; */
    /* background: linear-gradient(to bottom, #8F9396 1%, #111619 3%, #434949 5%, #BABEC1 14%, #E2E6E9 19%, #E2E6E9 22%, #828689 40%); */
    background: linear-gradient(to bottom, #8F9396 1%, #111619 3%, #434949 5%, #BABEC1 14%, #434949 19%, #434949 22%, #434949 40%);
    position: absolute;
    bottom: 0;
    border-radius: 50%;
    box-shadow: 3px 5px 5px;
    inset: 97%;
}

.clockcircNumbers {
    position: absolute;
    transform-origin: 0 0;
    width: 24rem;
    height: 24rem;
    border-radius: 50%;
    background-color: #333f99;
    inset: 0.5rem;
    /* background: linear-gradient(to bottom, #8F9396 1%, #111619 3%, #434949 5%, #BABEC1 14%, #E2E6E9 19%, #E2E6E9 22%, #828689 40%);
    background: linear-gradient(to bottom, #8F9396 2%, #111619 4%, #434949 9%, #BABEC1 15%, #E2E6E9 19%, #E2E6E9 22%, #373D3D 46%);
    background: repeating-linear-gradient(90deg,
            rgba(0, 0, 0, 0.1),
            rgba(0, 0, 0, 0.3) 1px,
            transparent 1px,
            transparent 3px,
            rgba(0, 0, 0, 0.3) 3px,
            rgba(0, 0, 0, 0.2) 4px,
            transparent 4px,
            transparent 6px,
        );
    background: linear-gradient(90deg,
            #0A181A 46%,
            #A3A8AB 50%,
            #F9FEFF 72%,
            #FAFBFF 80%,
            #D6DBDC 90%,
            #0A0B10 94%); */
    background: linear-gradient(-138deg,
            #373D7D 0%,
            #2E305B 22%,
            #2E305B 23%,
            #2E305B 64%,
            #373D7D 100%);
}

/* .minutecounts p {
    position: absolute;
    text-align: center;
    transform-origin: left;
    top: 50%;
    inset: 10%;
    left: 50%;
    color: white;
    font-size: 2rem;
    transform: rotate(calc(30deg*var(--xxmin)));
    display: inline;
}

.minutecounts .withnum span {
    transform: rotate(calc(-30deg*var(--xxmin)));
} */
.num {
    position: absolute;
    transform: rotate(calc(30deg * var(--i)));
    text-align: center;
    inset: 10px;
    color: white;
    font-size: 1.6rem;
    font-weight: 900;
}


.nonum {
    width: 5px;
    transform-origin: 0 0;
    left: 50%;
    top: 50%;
    height: 46%;
    background-color: transparent;
}

.nonum::after {
    width: 7px;
    height: 20px;
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    display: block;
    background: linear-gradient(to bottom, #E2E6E9 50%, #828689 0%, #E2E6E9 5%, #BABEC1 100%, #E2E6E9 1%, #E2E6E9 2%, #828689 0%);
}

.nonum {
    position: absolute;

}

.diff {

    transform-origin: 0 0;
    left: 50%;
    top: 50%;
    position: absolute;
    height: 46%;
    width: 10px;
    background-color: transparent;

}

/* top right bottom left  */
.diff::after {
    content: '';
    position: absolute;
    border-width: 0rem 1.2rem 1.9rem 1.2rem;
    bottom: 0;
    right: -1rem;
    border-color: transparent transparent #E2E6E9 transparent;
    border-style: solid;
}

.diff::before {
    content: '';
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background-color: #E2E6E9;
    position: absolute;
    bottom: 0;
    box-shadow: #333 2px 0px 9px 2px;
    z-index: 1;
    left: -0.05rem;
    bottom: 0.1rem;
}

.incompletesecs p,
.completesecs p {
    background-color: #ff3c41;
    height: 45%;
    width: 2px;
    position: absolute;
    transform-origin: 0 0;
    top: 50%;
    right: 50%;
    transform: rotate(calc(6deg*var(--inc)));
}

.incompletesecs p::after,
.completesecs p::after {
    content: '';
    height: 0.8rem;
    width: 3px;
    position: absolute;
    background-color: #E2E6E9;
    bottom: 0;

}

/* .incompletesecs p:nth-child(12)::after {
    left: -0.3rem;
} */

.incompletesecs p:first-child,
.incompletesecs p:nth-child(6),
.incompletesecs p:nth-child(11),
.incompletesecs p:nth-child(16) {
    display: none;
}

.lastcirc {
    position: absolute;
    width: 17.8rem;
    height: 17.8rem;
    inset: 3.5rem;
    /* border: 10px double #E2E6E9; */
    background-color: #333f99;
    border-radius: 50%;
    box-shadow: #828689 0px 0px 0px 6px;
    /* background: linear-gradient(to bottom, #E2E6E9 50%, #828689 0%, #E2E6E9 5%, #BABEC1 100%, #E2E6E9 1%, #E2E6E9 2%, #828689 0%); */

    background: linear-gradient(10deg,
            #373D7D 0%,
            #373D7D 20%,
            #2E305B 10%,
            #333f99 4%,
            #373D7D 2%);

}


.completesecs p {
    z-index: 1;
    transform: rotate(calc(6deg*var(--comp)));
    height: 34.8%;
    background-color: transparent;

}

.completesecs p::after {
    height: 7px;
    width: 2px;
}

.completesecs p:nth-child(1)::after,
.completesecs p:nth-child(6)::after,
.completesecs p:nth-child(11)::after,
.completesecs p:nth-child(16)::after,
.completesecs p:nth-child(21)::after,
.completesecs p:nth-child(26)::after,
.completesecs p:nth-child(31)::after,
.completesecs p:nth-child(36)::after,
.completesecs p:nth-child(41)::after,
.completesecs p:nth-child(46)::after,
.completesecs p:nth-child(51)::after,
.completesecs p:nth-child(56)::after {
    height: 10px;
    width: 4px;
}

.bigdots p {
    z-index: 1;
    transform-origin: 0 0;
    height: 30.7%;
    width: 2px;
    transform: rotate(calc(30deg * var(--dots)));
    background-color: transparent;
}

.bigdots p:nth-child(3)::after,
.bigdots p:nth-child(2)::after,
.bigdots p:nth-child(5)::after,
.bigdots p:nth-child(6)::after,
.bigdots p:nth-child(8)::after,
.bigdots p:nth-child(9)::after,
.bigdots p:nth-child(11)::after,
.bigdots p:nth-child(12)::after {
    content: '';
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 50%;
    position: absolute;
    bottom: 0;
    left: -6px;
    box-shadow: #BABEC1 -0.6px 0.5px 0px 2px;
    background-color: white;
}



.bigdots p:nth-child(1)::after,
.bigdots p:nth-child(4)::after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 0.5rem;
    height: 1.5rem;
    border-radius: 0;
    box-shadow: #BABEC1 -0.6px 0.5px 0px 2px;
    background-color: white;
    right: -1.5px;
}

.bigdots p:nth-child(7)::after {
    /* box-shadow: #BABEC1 -0.6px 0.5px 0px 2px; */
    content: '';
    bottom: 0rem;
    position: absolute;
    right: -0.7rem;
    border-width: 0rem 0.8rem 1.8rem 0.8rem;
    border-color: transparent transparent #E2E6E9 transparent;
    border-style: solid;
}

/* .bigdots p:nth-child(10)::after {
    box-shadow: #BABEC1 -0.6px 0.5px 0px 2px;
    content: '';
    bottom: 0rem;
    position: absolute;
} */
.bigdots .ten {
    font-size: 1.5rem;
    position: absolute;
    top: 45%;
    left: 17.5rem;
    bottom: 0;
    background-color: white;
    width: max-content;
    height: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0px 5px;
    border: 1px solid #5454be;
    /* border-radius: 2px; */
    z-index: 1;
}

.bigdots .ten::after {
    content: '';
    width: 2.8rem;
    height: 2rem;
    position: absolute;
     background-color: rgba(255, 255, 255, 0.009);
    opacity: .4;
    z-index: 30;
    border: 0.2px solid rgba(255, 255, 255, 0.01);
    border-radius: 10px;
    z-index: 3;
}



.king {
    position: absolute;
    background-color: white;
    height: 2rem;
    width: 2px;
    transform: rotate(calc(-11deg*var(--k)));
    top: 30%;
    z-index: 1;
    right: 50%;
    transform-origin: bottom;

}

.kingsbot {
    position: absolute;
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    background-color: #5454be;
    top: 35%;
    right: 48.5%;
    border: 3px solid white;
    z-index: 1;

}

.king::after {
    content: '';
    width: 2.5px;
    height: 2.5px;
    background-color: white;
    position: absolute;
    top: 0;
}

.circCenter {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: #ff3c41;
    box-shadow: #5a5d5f 0px 0px 0px 8px;
    position: absolute;
    top: 49.1%;
    right: 49.2%;
    z-index: 4;

}

.minutes,
.hours,
.seconds {
    width: .7rem;
    height: 5.6rem;
    background-color: #d0d0d0;
    position: absolute;
    top: 50%;
    right: 50%;
    z-index: 1;
    border-radius: 100% 100% 100% 100%;
    transform-origin: top;
}

.hours {
    height: 4rem;
    width: .5rem;
    transform: rotate(40deg);
    z-index: 4;
    background-color: white;
    border: 2px solid #d0d0d0;


}

.hours b {
    position: absolute;
    width: 1rem;
    height: 1rem;
    background-color: #8F9396;
    top: 2rem;
    right: -5px;
    border-radius: 50%;
}

.hours .v {
    transform: rotate(calc(120deg*var(--v)));
    background-color: #d0d0d0;
    width: 49%;
    height: 1px;
    position: absolute;
    transform-origin: 0 0;
    top: 50%;
    right: 4%;
}


.seconds {
    width: 2px;
    height: 8rem;
    z-index: 5;
}



.seconds::after {
    content: '';
    position: absolute;
    width: 0.7rem;
    height: 0.7rem;
    background-color: white;
    bottom: 2.2rem;
    right: -4px;
    border-radius: 50%;
    box-shadow: #BABEC1 -0.6px 0.5px 0px 1px;
}

.seconds::before {
    background-color: #d0d0d0;
    content: '';
    position: absolute;
    width: 2px;
    height: 4rem;
    top: -4rem;
}

.seconds b {
    position: absolute;
    width: 0.7rem;
    height: 0.7rem;
    background-color: white;
    top: -4rem;
    right: -4.5px;
    border-radius: 50%;
    box-shadow: #BABEC1 -0.6px 0.5px 0px 1px;
}

.name,
.name2 {
    position: absolute;
    color: rgba(255, 255, 255, 0.9);
    z-index: 1;
    font-size: 1.5rem;
    top: 38%;
    right: 40%;
}

.name2 {
    font-size: 9px;
    top: 44.5%;
    right: 37%;
}

.minutes::before {
    background-color: white;
    height: 3rem;
    width: 0.3rem;
    position: absolute;
    top: 1.7rem;
    right: 2.5px;
    content: '';
}

.comments {
    color: white;
    display: flex;
    flex-direction: column;
    position: absolute;
    color: rgba(255, 255, 255, 0.9);
    z-index: 1;
    font-size: 9px;
    text-align: center;
    bottom: 30%;
    right: 35%;
}


.wristband p.center1 {
    height: 5rem;
    width: 15rem;
    background-image:
        linear-gradient(180deg,
            #7F8384 0%,
            #7B7B7D 0%,
            #B1B2B4 6%,
            #CFCFD1 30%,
            #C4C4C6 60%,
            #2D3132 89%,
            #3F4042 94%,
            #ECEDEF 96%,
            #C3C3C5 97%,
            #606163 99%);
    box-shadow: black 0px 0px 5px 1px;
    /* border-radius: 5% / 0 0 100% 100%; */
    border-radius: 20% 20% 20% 15%;
    position: absolute;
    /* top: -1rem; */
    left: 5rem;
}

.wristband p.center2 {
    width: 4.85rem;
    height: 4rem;
    border-radius: 7% / 0 0 100% 100%;
        background: linear-gradient(180deg,
            #F7F7F7 0%,
            #575B5E 33%,
            #000000 34%,
            #000000 40%,
            #EDEDEF 40%,
            #EDEDEF 41%,
            #000000 42%,
            #202123 42%,
            #878B8C 43%,
            #000000 44%,
            #45494A 45%,
            #D9DADC 47%,
            #000000 48%,
            #000000 52%,
            #D4D5D7 53%,
            #E1E1E1 64%,
            #E1E1E1 74%,
            #9B9C9E 91%,
            #000000 92%,
            #000000 96%,
            #A7A8AA 98%,
            #222828 100%);
            
    rotate: 360deg;
    position: absolute;
    top: -3.3rem;
    left: 10rem;
}

.wristband p.center3,.wristband p.center4, .wristband p.center5{
    /* border-radius: 7% / 0 0 100% 100%; */
    background-image:
        linear-gradient(180deg,
            #9B9C9E 0%,
            #D6D7D9 12%,
            #000100 18%,
            #161A1B 20%,
            #363A3B 22%,
            #393D3E 23%,
            #717274 42%,
            #D7D8DA 74%,
            #D7D8DA 81%,
            #000100 83%,
            #5C5D5F 86%,
            #353638 89%,
            #F4F8F9 93%,
            #000100 94%);
    /* rotate: 360deg; */
    transform: rotate3d(100deg);
    position: absolute;
    top: -4.6rem;
    left: 10.08rem;
    width: 4.85rem;
    height: 1rem;

}
.wristband p.center4{
    background-image:
        linear-gradient(180deg,
            #9B9C9E 0%,
            #D6D7D9 12%,
            #D6D7D9 18%,
            #D6D7D9 20%,
            #D6D7D9 22%,
            #393D3E 23%,
            #717274 42%,
            #D7D8DA 74%,
            #D7D8DA 81%,
            #000100 83%,
            #5C5D5F 86%,
            #353638 89%,
            #F4F8F9 93%,
            #000100 94%);
    top: -5.9rem;
}
.wristband p.center5{
    background-image:
    linear-gradient(360deg,
        #D7D8DA 74%,
        #D7D8DA 81%,
        #D7D8DA 83%,
        #D7D8DA 86%,
        #353638 89%,
        #F4F8F9 93%,
        #D7D8DA 94%);
        transform: rotate(180deg);
top: -7.15rem;
}
.bothEdge p.left1,
.bothEdge p.right1 {
    width: 4.4rem;
    height: 6rem;
    background-image:
        linear-gradient(180deg,
            #2D3132 5%,
            #7B7B7D 0%,
            #B1B2B4 6%,
            #CFCFD1 30%,
            #2D3132 80%,
            #7B7B7D 99%);
    position: absolute;
    left: 2.3rem;
    top: -1rem;
    box-shadow: #333 5px 10px 7px;

}

.bothEdge p.right1 {
    left: 18.3rem;
    box-shadow: #333 -4px 10px 7px;



}

.bothEdge p.left1::after {
    content: '';
    position: absolute;
    border-width: 0rem 0rem 9rem 2rem;
    border-color: transparent transparent transparent #333333;
    border-style: solid;
}

.bothEdge p.right1::after {
    content: '';
    position: absolute;
border-bottom: 9rem solid transparent;
border-right: 2rem solid #333;
border-left: 0rem solid transparent;
border-top: 0rem solid transparent;
right: 0;

}

.bothEdge p.right2,
.bothEdge p.left2{
    background-image:
    linear-gradient(180deg,
        #2D3132 5%,
        #7B7B7D 0%,
        #B1B2B4 6%,
        #CFCFD1 30%,
        #2D3132 80%,
        #7B7B7D 99%);
             box-shadow:
        inset -1px 0 1px 0px rgba(0, 0, 0, 0.5),
        inset 1px 0 1px 0px rgba(0, 0, 0, 0.5);
    height: 4rem;
    width: 3.35rem;
    position: absolute;
    right: 6.8rem;
    top: -4.3rem;
    border-radius: 0% 20% 10% 0%;

}
.wristband .bothEdge p.right2::after,.bothEdge p.left2::after{
    content:'';
    border-bottom: 3rem solid transparent;
border-right: 0.5rem solid #333;
border-left: 0rem solid transparent;
border-top: 0rem solid transparent;
right: 0;
position: absolute;
}


.bothEdge p.left2{
left: 6.8rem;
border-radius: 10% 0% 0% 10%;


}
.bothEdge p.left2::after{
    border-left: 0.5rem solid #333;
    border-right: 0rem solid transparent;
    left: 0;
 }

.bothEdge p.left3, .bothEdge p.right3{
    top: -6.2rem;
    height: 3rem;
}
.bothEdge p.left4, .bothEdge p.right4{
    top: -7.5rem;
    height: 2rem;
  background-image:  linear-gradient(180deg,
    #2D3132 5%,
    #7B7B7D 0%,
    #2D3132 6%,
    #CFCFD1 30%,
    #2D3132 0%,
    #B1B2B4 9%);
         box-shadow:
    inset -1px 0 5px 0px rgba(0, 0, 0, 0.5),
    inset 1px 0 1px 0px rgba(0, 0, 0, 0.5);
    rotate: -2deg;
}

.setter p.settertop{
    height: 2.8rem;
    width: 4rem;
    position: absolute;
    right: -1.5rem;
    top: 8.3rem;
    background: linear-gradient(90deg,
    #F7F7F7 0%,
    #575B5E 33%,
    #000000 34%,
    #000000 40%,
    #EDEDEF 40%,
    #EDEDEF 41%,
    #000000 42%,
    #202123 42%,
    #878B8C 43%,
    #000000 44%,
    #45494A 45%,
    #D9DADC 47%,
    #000000 48%,
    #000000 52%,
    #D4D5D7 53%,
    #E1E1E1 64%,
    #E1E1E1 74%,
    #9B9C9E 91%,
    #000000 92%,
    #E1E1E1 96%,
    #A7A8AA 98%,
    #E1E1E1 100%);
box-shadow: 2px 0px -10px;
z-index: -1;
}
.setter .settertop::after,
.setter .settertop::before{
    content: '';
    border-left: 2rem solid transparent;
    border-top: 1rem solid #333;
    border-right: 2rem solid transparent;
    position: absolute;
    right: -2rem;
}
.setter .settertop::before{
    border-top: 1rem solid #333;
    bottom: 0;
    transform: rotate(180deg);
}
.setter p.setterbottom{
top: 14rem;
}

.setter p.settercenter{
    height: 4rem;
    width: 2rem;
    background-color: #333;
    position: absolute;
    right: -2rem;
    bottom: 10rem;
    z-index: -2;
}

.setter p.settercenter::after{
    content: '';
    position: absolute;
    height: 2.5rem;
    width: 1rem;
    right: 5px;
    border-radius: 0% 40%  40% 0%;
    background-image: 
    linear-gradient(180deg,
      #9B9C9E 0%,
      #D6D7D9 12%,
      #3B3F40 18%,
      #161A1B 20%,
      #363A3B 22%,
      #393D3E 23%,
      #717274 42%,
      #D7D8DA 74%,
      #D7D8DA 81%,
      #5D6162 83%,
      #5C5D5F 86%,
      #353638 89%,
      #F4F8F9 93%,
      #000100 94%);
bottom: 0.95rem;
  box-shadow:
      inset -1px 0 2px 0 rgba(255,255,255,0.5),
      inset 1px 0 2px 0 rgba(255,255,255,0.5);
}
.setter p.settercenter b{
    position: absolute;
    width: 1.3rem;
    height: 5px;
    background: linear-gradient(180deg,
    #F7F7F7 0%,
    #575B5E 33%,
    #000000 34%,
    #000000 40%,
    #EDEDEF 40%,
    #EDEDEF 41%,
    #000000 42%,
    #202123 42%,
    #878B8C 43%,
    #000000 44%,
    #45494A 45%,
    #D9DADC 47%,
    #000000 48%,
    #000000 52%,
    #D4D5D7 53%,
    #E1E1E1 64%,
    #E1E1E1 74%,
    #9B9C9E 91%,
    #000000 92%,
    #000000 96%,
    #A7A8AA 98%,
    #222828 100%);
     box-shadow:
inset -1px 0 1px 0px rgba(0, 0, 0, 0.5),
inset 1px 0 1px 0px rgba(0, 0, 0, 0.5);
    right: 1rem;
    bottom: calc(5.8px * var(--ss));
    z-index: 1;
}
.setter p.settercenter b:nth-child(7),
.setter p.settercenter b:nth-child(5){
    background: linear-gradient(180deg,
    #F7F7F7 0%,
    #575B5E 33%,
    #000000 34%,
    #000000 40%,
    #000000 42%,
    #202123 42%,
    #878B8C 43%,
    #000000 44%,
    #45494A 45%,
    #D9DADC 47%,
    #000000 48%,
    #000000 52%,
    #9B9C9E 91%,
    #000000 92%,
    #000000 96%,
    #A7A8AA 98%,
    #222828 100%);
}
.wristband2{
    position: absolute;
    bottom: 0;
    transform: rotate(180deg);
    right:0 ;
    z-index: -1;
}
.wristband2 .bothEdge p.right2{
    left: 14.9rem;
    
}
/* background: linear-gradient(180deg,
            #F7F7F7 0%,
            #575B5E 33%,
            #000000 34%,
            #000000 40%,
            #EDEDEF 40%,
            #EDEDEF 41%,
            #000000 42%,
            #202123 42%,
            #878B8C 43%,
            #000000 44%,
            #45494A 45%,
            #D9DADC 47%,
            #000000 48%,
            #000000 52%,
            #D4D5D7 53%,
            #E1E1E1 64%,
            #E1E1E1 74%,
            #9B9C9E 91%,
            #000000 92%,
            #000000 96%,
            #A7A8AA 98%,
            #222828 100%);
            
             box-shadow:
        inset -1px 0 1px 0px rgba(0, 0, 0, 0.5),
        inset 1px 0 1px 0px rgba(0, 0, 0, 0.5);
        
            Has a special purpose*/


            /*  border-radius: 7% / 0 0 100% 100%;
    background-image:
        linear-gradient(180deg,
            #9B9C9E 0%,
            #D6D7D9 12%,
            #000100 18%,
            #161A1B 20%,
            #363A3B 22%,
            #393D3E 23%,
            #717274 42%,
            #D7D8DA 74%,
            #D7D8DA 81%,
            #000100 83%,
            #5C5D5F 86%,
            #353638 89%,
            #F4F8F9 93%,
            #000100 94%);
    rotate: 360deg;
    

    from github center1
    */

    @media(max-width: 645px) {
        main{
            scale: 0.65;
        }
    }