*,*:after,*:before{margin:0;padding:0;box-sizing:border-box}html,body{height:100vh}.wrapper{display:flex;justify-content:center;align-items:center;background:#8fd899;height:100%}.face{position:relative;height:60vmin;width:60vmin;border-radius:50%;box-shadow:-.3vmin -.3vmin .1vmin #fff5ee,3vmin 3vmin .1vmin #61c979;background:radial-gradient(ellipse at center,#f7f377,#f7f377 63%,#fcfbf2 calc(63% + 1px),#fcfbf2 65%,#dbcc0f calc(65% + 1px))}.face:before{content:"";display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:5%;height:5%;border-radius:50%;background:#fcfbf2f2}.face .quarters{position:absolute;width:100%;height:100%}.face .quarters div{position:absolute;background:#61c979;border-radius:100px}.face .quarters div:nth-child(odd){width:12%;height:2.5%;transform:translateY(-50%)}.face .quarters div:nth-child(2n){width:2.5%;height:12%;transform:translate(-50%)}.face .quarters div:nth-child(1){top:50%;left:7%}.face .quarters div:nth-child(2){top:7%;left:50%}.face .quarters div:nth-child(3){top:50%;right:7%}.face .quarters div:nth-child(4){bottom:7%;left:50%}.face .hands{position:absolute;width:100%;height:100%}.face .hands div{position:absolute;transform:rotate(0);border-radius:100px;background:#fff5ee;transform-origin:50% 100%}.face .hands #seconds{top:8%;left:49.5%;width:1%;height:52%;background:#fc8535;transform-origin:50% 81%}.face .hands #minutes{top:10%;left:48.75%;width:2.5%;height:40%}.face .hands #hours{top:15%;left:48%;width:4%;height:35%}.face .seeds{position:absolute;height:75%;width:75%;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%)}.face .seeds div{display:block;position:absolute;background:#fcfbf2;width:5%;height:5%;border-radius:50%;clip-path:polygon(50% 0%,65% 10%,80% 30%,85% 50%,85% 60%,80% 80%,78% 82%,75% 85%,50% 90%,25% 85%,22% 82%,20% 80%,15% 60%,15% 50%,20% 30%,35% 10%)}.face .seeds div:nth-child(1){top:63%;left:6%;transform:rotate(62deg)}.face .seeds div:nth-child(2){top:70%;left:12%;transform:rotate(268deg)}.face .seeds div:nth-child(3){top:25%;left:18%;transform:rotate(35deg)}.face .seeds div:nth-child(4){top:40%;left:24%;transform:rotate(342deg)}.face .seeds div:nth-child(5){top:36%;left:30%;transform:rotate(159deg)}.face .seeds div:nth-child(6){top:33%;left:36%;transform:rotate(293deg)}.face .seeds div:nth-child(7){top:60%;left:42%;transform:rotate(134deg)}.face .seeds div:nth-child(8){top:18%;left:48%;transform:rotate(52deg)}.face .seeds div:nth-child(9){top:84%;left:54%;transform:rotate(359deg)}.face .seeds div:nth-child(10){top:13%;left:60%;transform:rotate(245deg)}.face .seeds div:nth-child(11){top:60%;left:66%;transform:rotate(343deg)}.face .seeds div:nth-child(12){top:39%;left:72%;transform:rotate(351deg)}.face .seeds div:nth-child(13){top:27%;left:78%;transform:rotate(6deg)}.face .seeds div:nth-child(14){top:26%;left:84%;transform:rotate(98deg)}.face .seeds div:nth-child(15){top:88%;left:90%;transform:rotate(124deg)}.face .leaf{position:absolute;width:10%;height:10%;top:-10%;left:50%;transform:translate(-50%)}.face .leaf:before{display:block;content:"";position:absolute;left:50%;bottom:0;transform:translate(-50%);width:10%;height:30%;border-radius:50% 50% 0 0;background:#007f5f}.face .leaf:after{display:block;content:"";position:absolute;left:52%;bottom:5%;transform:translate(-50%) rotate(30deg);width:50%;height:60%;background:#007f5f;clip-path:ellipse(27% 40% at 50% 50%)}