.clock{background:linear-gradient(#d3e8ef,#767574);margin:0 auto;padding:.5rem;box-sizing:border-box;width:145px;height:145px;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center}.clock,.clock-face{border-radius:50%;position:relative}.clock-face{width:100%;height:100%;background:#ffffff;box-shadow:inset 0 .15rem .3rem #767574}.circle{display:flex;align-items:center;justify-content:center}.circle,.number-wrapper{position:absolute;width:100%;height:100%}.number,.number-wrapper{transform-origin:50% 50%}.number{position:absolute;display:block;left:50%;top:50%;text-align:center}.circle-hour,.circle-min,.circle-sec{position:absolute;width:100%;height:100%;top:0;left:0;display:flex;align-items:center;justify-content:center}.circle-hour{transform:translate(-.25rem,-.25rem)}.circle-min{transform:translate(-.2rem,-.2rem)}.circle-sec{transform:translate(0)}.hand{position:absolute;left:50%;top:50%}@media screen and (min-width:1200px){.clock{width:200px;height:200px}}@media screen and (min-width:768px) and (max-width:1199px){.clock{width:160px;height:160px}}@media screen and (max-width:767px){.clock{width:130px;height:130px}}@media screen and (width:380px) and (height:849px){.clock{width:145px;height:145px}}