:root{--light-white:#fcfbf2;--white:#fff5ee;--light-green:#8fd899;--green:#61c979;--dark-green:#007f5f;--light-yellow:#f7f377;--yellow:#dbcc0f;--orange:#fc8535;--face-diameter:60vmin;--center-diameter:5%;--quarter-height:12%;--quarter-width:2.5%}*,:after,:before{box-sizing:border-box;margin:0;padding:0}html,body{height:100vh}.wrapper{background:var(--light-green);justify-content:center;align-items:center;height:100%;display:flex}.face{height:var(--face-diameter);width:var(--face-diameter);box-shadow:-.3vmin -.3vmin .1vmin var(--white), 3vmin 3vmin .1vmin var(--green);background:radial-gradient(ellipse at center, var(--light-yellow), var(--light-yellow) 63%, var(--light-white) calc(63% + 1px), var(--light-white) 65%, var(--yellow) calc(65% + 1px));border-radius:50%;position:relative}.face:before{content:"";width:var(--center-diameter);height:var(--center-diameter);background:#fcfbf2f2;border-radius:50%;display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.face .quarters{width:100%;height:100%;position:absolute}.face .quarters div{background:var(--green);border-radius:100px;position:absolute}.face .quarters div:nth-child(odd){width:var(--quarter-height);height:var(--quarter-width);transform:translateY(-50%)}.face .quarters div:nth-child(2n){width:var(--quarter-width);height:var(--quarter-height);transform:translate(-50%)}.face .quarters div:first-child{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{width:100%;height:100%;position:absolute}.face .hands div{background:var(--white);transform-origin:50% 100%;border-radius:100px;position:absolute;transform:rotate(0)}.face .hands #seconds{background:var(--orange);transform-origin:50% 81%;width:1%;height:52%;top:8%;left:49.5%}.face .hands #minutes{width:2.5%;height:40%;top:10%;left:48.75%}.face .hands #hours{width:4%;height:35%;top:15%;left:48%}.face .seeds{border-radius:50%;width:75%;height:75%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.face .seeds div{background:var(--light-white);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%);border-radius:50%;width:5%;height:5%;display:block;position:absolute}.face .seeds div:first-child{top:18%;left:6%;transform:rotate(257deg)}.face .seeds div:nth-child(2){top:20%;left:12%;transform:rotate(321deg)}.face .seeds div:nth-child(3){top:85%;left:18%;transform:rotate(143deg)}.face .seeds div:nth-child(4){top:67%;left:24%;transform:rotate(162deg)}.face .seeds div:nth-child(5){top:88%;left:30%;transform:rotate(77deg)}.face .seeds div:nth-child(6){top:24%;left:36%;transform:rotate(257deg)}.face .seeds div:nth-child(7){top:59%;left:42%;transform:rotate(93deg)}.face .seeds div:nth-child(8){top:8%;left:48%;transform:rotate(62deg)}.face .seeds div:nth-child(9){top:54%;left:54%;transform:rotate(292deg)}.face .seeds div:nth-child(10){top:19%;left:60%;transform:rotate(259deg)}.face .seeds div:nth-child(11){top:59%;left:66%;transform:rotate(289deg)}.face .seeds div:nth-child(12){top:31%;left:72%;transform:rotate(252deg)}.face .seeds div:nth-child(13){top:20%;left:78%;transform:rotate(3deg)}.face .seeds div:nth-child(14){top:53%;left:84%;transform:rotate(113deg)}.face .seeds div:nth-child(15){top:50%;left:90%;transform:rotate(308deg)}.face .leaf{width:10%;height:10%;position:absolute;top:-10%;left:50%;transform:translate(-50%)}.face .leaf:before{content:"";background:var(--dark-green);border-radius:50% 50% 0 0;width:10%;height:30%;display:block;position:absolute;bottom:0;left:50%;transform:translate(-50%)}.face .leaf:after{content:"";background:var(--dark-green);clip-path:ellipse(27% 40%);width:50%;height:60%;display:block;position:absolute;bottom:5%;left:52%;transform:translate(-50%)rotate(30deg)}