body {
    margin: 0;

    background-color: lightgray;
}
.clock{
    position: relative;
    width: 272px;
    height: 272px;
    background: #FFFFFF;
}
.backg{
  width: 264px;
  height: 264px;
  padding-left:6px;
    padding-top: 8px;
}
.clock_frame{
    width: 264px;
    height: 264px;
    left: 8px;
    top: 6px;
    border-radius: 50%;
    background: linear-gradient(180deg, #757575 0%, #1D1D1B 100%);
    border: 2px solid #1F272A;
    box-sizing: border-box;
    box-shadow: inset 1px 3px #8d8d8d ;
}
.oval{
    position: absolute;
    width: 230px;
    height: 230px;
    top: 25px;
    left: 22px;
    border-radius: 50%;
    border: 1px solid #252d2f;
    background: #FFFFFF;
    box-shadow: inset 1px 1px 0 rgba(47, 47, 80, 0.2);
}

.ticks{
    position: absolute;
    width: 217px;
    height: 217px;
    left: 28px;
    top: 28px;
}
.minor{
    position: absolute;
    width: 215.92px;
    height: 215.92px;
    left:-28px;
    top: -28px;
}
.major{
    position: absolute;
    width: 210px;
    height: 210px;
    left:-28px;
    top: -28px;

}
.numerals{
    position: absolute;
    width: 181px;
    height: 194.08px;
    left: 46px;
    top: 40px;
}

.hand_cap{
    position: absolute;
    z-index: 10;
    width: 13px;
    height: 13px;
    left: 130px;
    top: 130px;
    border-radius: 50%;
    background: linear-gradient(180deg, #FFFFFF 0%, #BFBFBF 100%);
}

.hours-container,
.minutes-container,
.seconds-container{
    position: absolute;
    width: 171px;
    height: 171px;
    left: 54px;
    top: 50px;

}
.hours{
    left: 52%;
    position: absolute;
    top: 15%;
    transform-origin: 50% 100%;
    width: 5.97px;
    height: 71px;
    background: #050606;
    border-radius: 1px;
    transform: rotate(-34deg);
}

.minutes{
    background: #050606;
    left: 46%;
    position: absolute;
    top: 5%;
    transform-origin: 50% 100%;
    transform: rotate(20deg);
    width: 5.98px;
    height: 91px;
}

.seconds {
    background: #E9343F;
    left: 49.5%;
    position: absolute;
    top: 0.9%;
    transform-origin: 50% 80%;
    width: 3px;
    height: 102px;
    z-index: 8;
}
@keyframes rotate {
    100% {
        transform: rotateZ(360deg);
    }
}
.hours-container {
    animation: rotate 43200s infinite linear;
}
.minutes-container {
    animation: rotate 3600s infinite steps(60);
}
.seconds-container {
    animation: rotate 60s infinite steps(60);
}






.h12{
    position: absolute;
    width: 3px;
    height: 12px;
    left: 135px;
    top: 28px;
    z-index: 4;
    transform: rotate(0deg);
    background: #1A1917;
}
.h1{
    position: absolute;
    width: 3px;
    height: 12px;
    left: 188px;
    top: 41.79px;
    transform: rotate(30deg);
    background: #1A1917;
}
.h2{
    position: absolute;
    width: 3px;
    height: 12px;
    left: 229px;
    top: 79px;
    transform: rotate(60deg);
    background: #1A1917;
}
.h3{
    position: absolute;
    width: 3px;
    height: 12px;
    left: 244px;
    top: 131px;
    transform: rotate(90deg);
    background: #1A1917;
}
.h4{
    position: absolute;
    width: 3px;
    height: 12px;
    left: 230px;
    top: 188px;
    transform: rotate(120deg);
    background: #1A1917;
}
.h5{
    position: absolute;
    width: 3px;
    height: 12px;
    left: 192.05px;
    top: 228px;
    transform: rotate(150deg);
    background: #1A1917;
}
.h6{
    position: absolute;
    width: 3px;
    height: 12px;
    left: 136px;
    top: 243px;
    transform: rotate(0deg);
    background: #1A1917;
}
.h7{
    position: absolute;
    width: 3px;
    height: 12px;
    left: 82px;
    top: 228px;
    transform: rotate(210deg);
    background: #1A1917;
}
.h8{
    position: absolute;
    width: 3px;
    height: 12px;
    left: 42px;
    top: 187px;
    transform: rotate(240deg);
    background: #1A1917;
}
.h9{
    position: absolute;
    width: 3px;
    height: 12px;
    left: 29px;
    top: 133px;
    transform: rotate(270deg);
    background: #1A1917;
}
.h10{
    position: absolute;
    width: 3px;
    height: 12px;
    left: 44px;
    top: 81px;
    transform: rotate(300deg);
    background: #1A1917;
}
.h11{
    position: absolute;
    width: 3px;
    height: 12px;
    left: 84px;
    top: 42px;
    transform: rotate(330deg);
    background: #1A1917;
}

.n12{
    position: absolute;
    left: 83px;
    top: 0;
    z-index: 4;
    font-family: "HelveticaNeue";
    font-size: 20px;
    line-height: normal;
    text-align: center;

    color: #0E0E0C;
}
.n1{
    position: absolute;
    left: 132px;
    top: 13px;
    z-index: 4;
    font-family: "HelveticaNeue";
    font-size: 20px;
    line-height: normal;
    text-align: center;

    color: #0E0E0C;
}
.n2{
    position: absolute;
    left: 168px;
    top: 47px;
    z-index: 4;
    font-family: "HelveticaNeue";
    font-size: 20px;
    line-height: normal;
    text-align: center;
    color: #0E0E0C;
}
.n3{
    position: absolute;
    left: 181px;
    top: 85px;
    z-index: 4;
    font-family: "HelveticaNeue";
    font-size: 20px;
    line-height: normal;
    text-align: center;
    color: #0E0E0C;
}
.n4{
    position: absolute;
    left: 168px;
    top: 137px;
    z-index: 4;
    font-family: "HelveticaNeue";
    font-size: 20px;
    line-height: normal;
    text-align: center;
    color: #0E0E0C;
}
.n5{
    position: absolute;
    left: 132px;
    top: 169px;
    z-index: 4;
    font-family: "HelveticaNeue";
    font-size: 20px;
    line-height: normal;
    text-align: center;

    color: #0E0E0C;
}
.n6{
    position: absolute;
    left: 88px;
    top: 181px;
    z-index: 4;
    font-family: "HelveticaNeue";
    font-size: 20px;
    line-height: normal;
    text-align: center;

    color: #0E0E0C;
}
.n7{
    position: absolute;
    left: 45px;
    top: 169px;
    z-index: 4;
    font-family: "HelveticaNeue";
    font-size: 20px;
    line-height: normal;
    text-align: center;

    color: #0E0E0C;
}
.n8{
    position: absolute;
    left: 7px;
    top: 137px;
    z-index: 4;
    font-family: "HelveticaNeue";
    font-size: 20px;
    line-height: normal;
    text-align: center;
    color: #0E0E0C;
}
.n9{
    position: absolute;
    left: -5px;
    top: 85px;
    z-index: 4;
    font-family: "HelveticaNeue";
    font-size: 20px;
    line-height: normal;
    text-align: center;
    color: #0E0E0C;
}
.n10{
    position: absolute;
    left: 5px;
    top: 43px;
    z-index: 4;
    font-family: "HelveticaNeue";
    font-size: 20px;
    line-height: normal;
    text-align: center;
    color: #0E0E0C;
}
.n11{
    position: absolute;
    left: 32px;
    top: 13px;
    z-index: 4;
    font-family: "HelveticaNeue";
    font-size: 20px;
    line-height: normal;
    text-align: center;

    color: #0E0E0C;
}


.h1m1{
    position: absolute;
    width: 1.02px;
    height: 5.12px;
    left: 146.8px;
    top: 28.54px;
    background: #1A1917;
    transform: rotate(6deg);
}
.h1m2 {
    position: absolute;
    width: 1.02px;
    height: 5.12px;
    left: 158.56px;
    top: 30.26px;
    background: #1A1917;
    transform: rotate(12deg)
}
.h1m3 {
    position: absolute;
    width: 1.02px;
    height: 5.12px;
    left: 169.54px;
    top: 33.15px;
    background: #1A1917;
    transform: rotate(18deg);
}
.h1m4 {
    position: absolute;
    width: 1.02px;
    height: 5.12px;
    left: 180.16px;
    top: 37.17px;

    background: #1A1917;
    transform: rotate(24deg);
}

.h12m4{
    position: absolute;
    width: 1.02px;
    height: 5.12px;
    left: 124.65px;
    top: 28.65px;
    background: #1A1917;
    transform: rotate(-6deg);
}
.h12m3 {
    position: absolute;
    width: 1.02px;
    height: 5.12px;
    left: 113.44px;
    top: 30.48px;

    background: #1A1917;
    transform: rotate(-12deg);
}
.h12m2 {

    position: absolute;
    width: 1.02px;
    height: 5.12px;
    left: 102.48px;
    top: 33.47px;

    background: #1A1917;
    transform: rotate(-18deg);
}
.h12m1 {
    position: absolute;
    width: 1.02px;
    height: 5.12px;
    left: 91.9px;
    top: 37.59px;

    background: #1A1917;
    transform: rotate(-24deg);
}

.h2m1{
    position: absolute;
    width: 1.02px;
    height: 5.12px;
    left: 199.86px;
    top: 48.42px;

    background: #1A1917;
    transform: rotate(36deg);
}
.h2m2{
    position: absolute;
    width: 1.02px;
    height: 5.12px;
    left: 208.72px;
    top: 55.53px;

    background: #1A1917;
    transform: rotate(42deg);
}
.h2m3 {
    position: absolute;
    width: 1.02px;
    height: 5.12px;
    left: 216.79px;
    top: 63.52px;

    background: #1A1917;
    transform: rotate(48deg);
}
.h2m4{
    position: absolute;
    width: 1.02px;
    height: 5.12px;
    left: 223.98px;
    top: 72.31px;

    background: #1A1917;
    transform: rotate(54deg);
}

.h11m4{
    position: absolute;
    width: 1.02px;
    height: 5.12px;
    left: 72.31px;
    top: 49.02px;

    background: #1A1917;
    transform: rotate(-36deg);
}
.h11m3{
    position: absolute;
    width: 1.02px;
    height: 5.12px;
    left: 63.52px;
    top: 56.21px;

    background: #1A1917;
    transform: rotate(-42deg);
}
.h11m2{
    position: absolute;
    width: 1.02px;
    height: 5.12px;
    left: 55.53px;
    top: 64.28px;

    background: #1A1917;
    transform: rotate(-48deg);
}
.h11m1{
    position: absolute;
    width: 1.02px;
    height: 5.12px;
    left: 48.42px;
    top: 73.14px;

    background: #1A1917;
    transform: rotate(-54deg);
}

.h3m1{
    position: absolute;
    width: 1.02px;
    height: 5.12px;
    left: 235.41px;
    top: 91.9px;

    background: #1A1917;
    transform: rotate(66deg);
}
.h3m2{
    position: absolute;
    width: 1.02px;
    height: 5.12px;
    left: 239.53px;
    top: 102.48px;

    background: #1A1917;
    transform: rotate(72deg);
}
.h3m3{
    position: absolute;
    width: 1.02px;
    height: 5.12px;
    left: 242.52px;
    top: 113.44px;

    background: #1A1917;
    transform: rotate(78deg);
}
.h3m4{

    position: absolute;
    width: 1.02px;
    height: 5.12px;
    left: 244.35px;
    top: 124.65px;

    background: #1A1917;
    transform: rotate(84deg);
}

.h10m4{
    position: absolute;
    width: 1.02px;
    height: 5.12px;
    left: 37.17px;
    top: 92.84px;

    background: #1A1917;
    transform: rotate(-66deg);
}
.h10m3{

    position: absolute;
    width: 1.02px;
    height: 5.12px;
    left: 33.15px;
    top: 103.46px;

    background: #1A1917;
    transform: rotate(-72deg);
}
.h10m2{

    position: absolute;
    width: 1.02px;
    height: 5.12px;
    left: 30.26px;
    top: 114.44px;

    background: #1A1917;
    transform: rotate(-78deg);
}
.h10m1{

    position: absolute;
    width: 1.02px;
    height: 5.12px;
    left: 28.54px;
    top: 125.67px;

    background: #1A1917;
    transform: rotate(-84deg);
}

.h4m1{
    position: absolute;
    width: 1.02px;
    height: 5.12px;
    left: 244.46px;
    top: 147.33px;

    background: #1A1917;
    transform: rotate(96deg);
}
.h4m2{
    position: absolute;
    width: 1.02px;
    height: 5.12px;
    left: 242.74px;
    top: 158.56px;

    background: #1A1917;
    transform: rotate(102deg);
}
.h4m3{

    position: absolute;
    width: 1.02px;
    height: 5.12px;
    left: 239.85px;
    top: 169.54px;

    background: #1A1917;
    transform: rotate(108deg);
}
.h4m4{
    position: absolute;
    width: 1.02px;
    height: 5.12px;
    left: 235.83px;
    top: 180.16px;

    background: #1A1917;
    transform: rotate(114deg);
}

.h9m1{
    position: absolute;
    width: 1.02px;
    height: 5.12px;
    left: 37.59px;
    top: 181.1px;

    background: #1A1917;
    transform: rotate(-114deg);
}
.h9m2{

    position: absolute;
    width: 1.02px;
    height: 5.12px;
    left: 33.47px;
    top: 170.52px;

    background: #1A1917;
    transform: rotate(-108deg);
}
.h9m3{

    position: absolute;
    width: 1.02px;
    height: 5.12px;
    left: 30.48px;
    top: 159.56px;

    background: #1A1917;
    transform: rotate(-102deg);
}
.h9m4{
    position: absolute;
    width: 1.02px;
    height: 5.12px;
    left: 28.65px;
    top: 148.35px;

    background: #1A1917;
    transform: rotate(-96deg);
}

.h5m1{
    position: absolute;
    width: 1.02px;
    height: 5.12px;
    left: 224.58px;
    top: 199.86px;

    background: #1A1917;
    transform: rotate(126deg);
}
.h5m2{
    position: absolute;
    width: 1.02px;
    height: 5.12px;
    left: 217.47px;
    top: 208.72px;

    background: #1A1917;
    transform: rotate(132deg);
}
.h5m3{
    position: absolute;
    width: 1.02px;
    height: 5.12px;
    left: 209.48px;
    top: 216.79px;

    background: #1A1917;
    transform: rotate(138deg);
}
.h5m4{

    position: absolute;
    width: 1.02px;
    height: 5.12px;
    left: 200.69px;
    top: 223.98px;

    background: #1A1917;
    transform: rotate(144deg);
}

.h8m1{

    position: absolute;
    width: 1.02px;
    height: 5.12px;
    left: 73.14px;
    top: 224.58px;

    background: #1A1917;
    transform: rotate(-144deg);
}
.h8m2{
    position: absolute;
    width: 1.02px;
    height: 5.12px;
    left: 64.28px;
    top: 217.47px;

    background: #1A1917;
    transform: rotate(-138deg);
}
.h8m3{

    position: absolute;
    width: 1.02px;
    height: 5.12px;
    left: 56.21px;
    top: 209.48px;

    background: #1A1917;
    transform: rotate(-132deg);
}
.h8m4{
    position: absolute;
    width: 1.02px;
    height: 5.12px;
    left: 49.02px;
    top: 200.69px;

    background: #1A1917;
    transform: rotate(-126deg);
}

.h6m1{

    position: absolute;
    width: 1.02px;
    height: 5.12px;
    left: 181.1px;
    top: 235.41px;

    background: #1A1917;
    transform: rotate(156deg);
}
.h6m2{
    position: absolute;
    width: 1.02px;
    height: 5.12px;
    left: 170.52px;
    top: 239.53px;

    background: #1A1917;
    transform: rotate(162deg);
}
.h6m3{
    position: absolute;
    width: 1.02px;
    height: 5.12px;
    left: 159.56px;
    top: 242.52px;

    background: #1A1917;
    transform: rotate(168deg);
}
.h6m4{

    position: absolute;
    width: 1.02px;
    height: 5.12px;
    left: 148.35px;
    top: 244.35px;

    background: #1A1917;
    transform: rotate(174deg);
}

.h7m1{

    position: absolute;
    width: 1.02px;
    height: 5.12px;
    left: 125.67px;
    top: 244.46px;

    background: #1A1917;
    transform: rotate(-174deg);
}
.h7m2{

    position: absolute;
    width: 1.02px;
    height: 5.12px;
    left: 114.44px;
    top: 242.74px;

    background: #1A1917;
    transform: rotate(-168deg);
}
.h7m3{

    position: absolute;
    width: 1.02px;
    height: 5.12px;
    left: 103.46px;
    top: 239.85px;

    background: #1A1917;
    transform: rotate(-162deg);
}
.h7m4{

    position: absolute;
    width: 1.02px;
    height: 5.12px;
    left: 92.84px;
    top: 235.83px;

    background: #1A1917;
    transform: rotate(-156deg);
}