@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap");:root{--hue-color:240;--first-color:hsl(var(--hue-color),53%,49%);--title-color:hsl(var(--hue-color),53%,15%);--text-color:hsl(var(--hue-color),12%,35%);--text-color-light:hsl(var(--hue-color),12%,65%);--white-color:#fff;--body-color:hsl(var(--hue-color),24%,94%);--body-font:"Poppins",sans-serif;--biggest-font-size:3rem;--small-font-size:.813rem;--smaller-font-size:.75rem;--tiny-font-size:.625rem;--font-medium:500;--mb-0-25:.25rem;--mb-1:1rem;--mb-1-5:1.5rem;--mb-2-5:2.5rem;--z-normal:1;--z-tooltip:10;--second-hand-color:red}@media screen and (min-width:968px){:root{--biggest-font-size:3.5rem;--small-font-size:.875rem;--smaller-font-size:.813rem;--tiny-font-size:.75rem}}.dark{--title-color:hsl(var(--hue-color),12%,95%);--text-color:hsl(var(--hue-color),12%,75%);--body-color:hsl(var(--hue-color),10%,16%)}.clock__theme{position:absolute;top:-1rem;right:-1rem;display:flex;padding:.25rem;border-radius:50%;box-shadow:inset -1px -1px 1px hsla(var(--hue-color),0%,100%,1),inset 1px 1px 1px hsla(var(--hue-color),30%,86%,1);color:var(--first-color);cursor:pointer;transition:.4s}.dark .clock__circle{box-shadow:6px 6px 16px hsla(var(--hue-color),8%,12%,1),-6px -6px 16px hsla(var(--hue-color),8%,20%,1),inset -6px -6px 16px hsla(var(--hue-color),8%,20%,1),inset 6px 6px 12px hsla(var(--hue-color),8%,12%,1)}.dark .clock__theme{box-shadow:inset -1px -1px 1px hsla(var(--hue-color),8%,20%,1),inset 1px 1px 1px hsla(var(--hue-color),8%,12%,1)}*{box-sizing:border-box;padding:0}*,body{margin:0}body{font-family:var(--body-font);color:var(--text-color);transition:.4s}.container{width:96%;margin-left:var(--mb-1);margin-right:var(--mb-1)}.home-clock{width:100%;margin:0}.home-clock .clock__container{height:auto;min-height:220px}.grid{display:grid}.clock__container{height:100vh;grid-template-rows:1fr max-content}.clock__circle{position:relative;width:200px;height:200px;box-shadow:-6px -6px 16px var(--white-color),6px 6px 16px hsla(var(--hue-color),30%,86%,1),inset 6px 6px 16px hsla(var(--hue-color),30%,86%,1),inset -6px -6px 16px var(--white-color);border-radius:50%;justify-self:center;display:flex;justify-content:center;align-items:center;transition:.4s}.clock__content{align-self:center;row-gap:3.5rem;display:grid;grid-template-columns:1fr;justify-items:center}@media screen and (min-width:768px){.clock__content--horizontal{grid-template-columns:repeat(2,1fr);-moz-column-gap:3.5rem;column-gap:3.5rem;row-gap:0;align-items:center}.clock__content--horizontal .clock__text{justify-content:flex-start}.clock__content--horizontal .clock__date{text-align:left}}.clock__nine,.clock__six,.clock__three,.clock__twelve{position:absolute;width:1rem;height:1px;background-color:var(--text-color-light)}.clock__six,.clock__twelve{transform:translateX(-50%) rotate(90deg)}.clock__twelve{top:1.25rem;left:50%}.clock__three{top:50%;right:.75rem}.clock__six{bottom:1.25rem;left:50%}.clock__nine{left:.75rem;top:50%}.clock__rounder{width:.75rem;height:.75rem;background-color:var(--first-color);border-radius:50%;border:2px solid var(--body-color);z-index:var(--z-tooltip)}.clock__hour,.clock__minutes,.clock__seconds{position:absolute;display:flex;justify-content:center}.clock__hour{width:105px;height:105px}.clock__hour:before{content:"";position:absolute;background-color:var(--text-color);width:.25rem;height:3rem;border-radius:.75rem;z-index:var(--z-normal)}.clock__minutes{width:136px;height:136px}.clock__minutes:before{content:"";position:absolute;background-color:var(--text-color);width:.25rem;height:4rem;border-radius:.75rem;z-index:var(--z-normal)}.clock__seconds{width:130px;height:130px}.clock__seconds:before{content:"";position:absolute;background-color:var(--second-hand-color);width:.125rem;height:5rem;border-radius:.75rem;z-index:var(--z-normal)}.clock__text{display:flex;justify-content:center}.clock__text-hour,.clock__text-minutes,.clock__text-seconds{font-size:var(--biggest-font-size);font-weight:var(--font-medium);color:var(--title-color)}.clock__text-ampm{font-size:var(--tiny-font-size);color:var(--title-color);font-weight:var(--font-medium);margin-left:var(--mb-0-25)}.clock__date{text-align:center;font-size:var(--small-font-size);font-weight:var(--font-medium)}@media screen and (min-width:968px){.container{margin-left:auto;margin-right:auto}}