section{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;background:#000;margin:1em -2em 0 -2em;padding:1rem;gap:1rem}section h2{font-family:"Helvetica Neue",Helvetica,sans-serif;font-size:1rem;text-align:center;color:#fff;font-weight:100;margin:0;padding:0}div.clock-holder{width:400px;height:440px;background:#000}#clock-implement{--pinlineColor: rgba(0, 0, 0, 0.3);position:relative;width:400px;aspect-ratio:1;background-color:rgba(0,0,0,0);background-image:linear-gradient(transparent 49.8%, var(--pinlineColor) 49.8% 50.2%, transparent 50.2%),linear-gradient(90deg, transparent 49.8%, var(--pinlineColor) 49.8% 50.2%, transparent 50.2%),linear-gradient(30deg, transparent 49.8%, var(--pinlineColor) 49.8% 50.2%, transparent 50.2%),linear-gradient(60deg, transparent 49.8%, var(--pinlineColor) 49.8% 50.2%, transparent 50.2%),linear-gradient(120deg, transparent 49.8%, var(--pinlineColor) 49.8% 50.2%, transparent 50.2%),linear-gradient(150deg, transparent 49.8%, var(--pinlineColor) 49.8% 50.2%, transparent 50.2%),radial-gradient(circle, rgba(255, 255, 255, 0.4) 61.5%, rgba(0, 0, 0, 0.5) 61.5% 62%, rgba(234, 23, 13, 0.2) 62% 66%, rgba(0, 0, 0, 0.7) 65.5%, rgba(51, 102, 51, 0.3) 68% 69%, #000 69%),conic-gradient(rgba(157, 242, 236, 0.2) 30deg, rgba(157, 242, 236, 0.3) 120deg, transparent, rgba(157, 242, 236, 0.2), rgba(157, 242, 236, 0.6) 270deg, rgba(157, 242, 236, 0.3), rgba(157, 242, 236, 0.2) 300deg)}div.clock-gradient-bg{background-image:linear-gradient(transparent 400px, #000 400px),linear-gradient(90deg, rgb(136, 190, 140), rgb(175, 135, 113), rgb(180, 125, 127), rgb(173, 121, 162), rgb(98, 113, 188), rgb(60, 137, 188), rgb(57, 191, 190))}#clock-implement>*{position:absolute}#clock-implement div.hand{top:0;left:0;transition:all;width:400px;aspect-ratio:1;background-color:rgba(0,0,0,0);background-image:linear-gradient(90deg, transparent 48%, rgba(83, 82, 169, 0.3) 48.2% 48.3%, rgb(210, 169, 175) 49%, #fff, rgb(210, 169, 175) 51%, rgba(83, 82, 169, 0.3) 51.7% 51.8%, transparent 52%)}#clock-implement div.shadow,#clock-implement div.shadow.seconds-hand{width:400px;aspect-ratio:1;background-color:rgba(0,0,0,0);transition:all;background-image:linear-gradient(90deg, transparent 48%, rgba(0, 0, 0, 0.2), transparent 52%);top:1%;left:2%}#clock-implement div.shadow.seconds-hand{clip-path:polygon(49.5% 17.5%, 50.5% 17.5%, 50.5% 50%, 49.5% 50%)}#clock-implement div.hours-hand{clip-path:polygon(48% 28%, 52% 28%, 52% 50%, 48% 50%)}#clock-implement div.minutes-hand{clip-path:polygon(48% 17.5%, 52% 17.5%, 52% 52%, 48% 52%)}#clock-implement div.seconds-hand{background-image:linear-gradient(90deg, transparent 49.6%, red, transparent 50.4%);clip-path:polygon(49% 17.5%, 51% 17.5%, 51% 50%, 29% 50%)}#clock-implement .number{display:flex;justify-content:center;align-content:center;height:8%;width:8%;background-color:pink;border-radius:50%;border:none;border:1px solid #000;text-indent:400vw;overflow:hidden}.n12{top:10%;left:46%;background-image:linear-gradient(90deg, #fff 20%, transparent 20%),conic-gradient(from 45deg at 35% 90%, #fff 45deg, #000 45deg 225deg, transparent 225deg),radial-gradient(circle at 50% 43%, #000 30%, transparent 30%),conic-gradient(from -30deg at 60% 70%, #fff 180deg, #000 180deg)}.n1{left:63.5%;top:16%;background-image:linear-gradient(90deg, #000 50%, #fff 50%)}.n2{left:75.5%;top:28%;background-image:conic-gradient(from 45deg at 15% 90%, #fff 45deg, #000 45deg 225deg, transparent 225deg),radial-gradient(circle at 30% 40%, #000 30%, transparent 30%),conic-gradient(from -30deg at 35% 70%, #fff 180deg, #000 180deg)}.n3{left:82%;top:46%;background-image:radial-gradient(circle at 25% 25%, #000 20%, transparent 20%),radial-gradient(circle at 25% 75%, #000 20%, transparent 20%),linear-gradient(#fff 15%, transparent 8% 92%, #fff 92%),linear-gradient(90deg, #000 30%, #fff 30%)}.n4{background-image:conic-gradient(from 45deg at -1% 60%, #fff 45deg, transparent 45deg),linear-gradient(90deg, #000 55%, #fff 55%);left:75.5%;top:63%}.n5{left:63.5%;top:76%;background-image:linear-gradient(#fff 28%, transparent 28% 80%, #fff 80%),conic-gradient(at 50% 45%, transparent 270deg, #fff 270deg),radial-gradient(circle at 25% 115%, #000 40%, #fff 40% 60%, #000 0)}.n6{top:82%;left:46%;background-image:radial-gradient(circle at 46% 80%, #fff 50%, transparent 50%),linear-gradient(135deg, #fff 30%, #000 30%)}.n7{top:76%;left:28.5%;background-image:conic-gradient(from 210deg at 80% 30%, #000 60deg, #fff 60deg)}.n8{left:15.5%;top:63%;background-image:radial-gradient(circle at 50% 25%, #fff 30%, transparent 30%),radial-gradient(circle at 50% 75%, #fff 30%, #000 30%)}.n9{left:10%;top:46%;background-image:radial-gradient(circle at 46% 20%, #fff 50%, transparent 50%),linear-gradient(-60deg, #fff 30%, #000 30%)}.n10{background-image:linear-gradient(90deg, #000 33%, transparent 33%),radial-gradient(ellipse 50% 80% at 75%, #000 60%, #fff 60%);left:15.5%;top:28%}.n11{background-image:linear-gradient(90deg, #000 33%, #fff 33% 66%, #000 66%);left:28.5%;top:16%}