:root{--center-dot-size: 20px;--hand-width: 10px;--outside-dot-size: 15px;--minute-hand-rotation-time: 3s}html,body{height:100%;margin:0;background-color:#fff}body{display:flex;align-items:center;justify-content:center}.clock{height:300px;width:300px;background-color:#fefbf2;border-radius:50%;border:20px solid #b06a26;box-shadow:inset 0 0 10px #000;position:relative}.minute-hand{position:absolute;top:calc(50% - var(--hand-width) / 2);left:50%;width:125px;height:var(--hand-width);background-color:#000;border-radius:10px;transform-origin:center left;animation:spin var(--minute-hand-rotation-time) linear infinite}.hour-hand{position:absolute;top:calc(50% - var(--hand-width) / 2);left:50%;width:75px;height:var(--hand-width);background-color:#000;border-radius:10px;transform-origin:center left;animation:spin calc(12 * var(--minute-hand-rotation-time)) linear infinite}.center-dot{position:absolute;top:calc(50% - var(--center-dot-size) / 2);left:calc(50% - var(--center-dot-size) / 2);border-radius:50%;background-color:#b06a26;width:var(--center-dot-size);height:var(--center-dot-size);transform-origin:center left}.dot{position:absolute;width:var(--outside-dot-size);height:var(--outside-dot-size);border-radius:50%;background-color:#000}.top-dot{top:5px;left:calc(50% - var(--outside-dot-size) / 2)}.bottom-dot{bottom:5px;left:calc(50% - var(--outside-dot-size) / 2)}.left-dot{top:calc(50% - var(--outside-dot-size) / 2);left:5px}.right-dot{top:calc(50% - var(--outside-dot-size) / 2);right:5px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}