*,*:before,*:after{box-sizing:border-box}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}ul[role=list],ol[role=list]{list-style:none}html:focus-within{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}a:not([class]){-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}@media (prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}html,body,#root{height:100%;background-color:var(--clr-blue-medium)}:root{--clr-blue-ultalight: hsl(229, 52%, 96%);--clr-blue-light: hsl(227, 100%, 92%);--clr-blue-medium: hsl(235, 35%, 18%);--clr-blue-dark: hsl(234, 39%, 14%);--clr-white: hsl(0, 0%, 100%);--fs-XL: clamp( 4.375rem , 15vw, 6.25rem );--fs-L: 1.75rem ;--fs-M: 1rem;--fs-S: .875rem ;--fs-XS: .8125rem ;--fs-XXS: .75rem ;--ff-sans: "Kumbh Sans";--ff-mono: "Space Mono";--ff-roboto: "Roboto Slab"}@media (min-width: 30rem){:root{--fs-XXS: .875rem }}.wrapper{padding-inline:1rem;margin-inline:auto}.bg-red{background-color:var(--clr)}.visible{display:block!important}.flow>*:not(:last-child){margin-bottom:.5rem}@media (min-width: 30rem){.flow>*:not(:last-child){margin-bottom:0}}.button-circle{width:2.5rem;aspect-ratio:1;border-radius:50%;border:none;padding:0}.button-circle:hover{cursor:pointer;outline:1px solid var(--clr-blue-ultalight);outline-offset:4px}.circle-buttons-wrapper{display:flex;gap:1rem;width:-moz-fit-content;width:fit-content}.app{font-family:var(--ff-primary),sans-serif;font-weight:700;height:100dvh;background-color:var(--clr-blue-medium);padding-top:2rem;display:grid;justify-items:center;position:relative;grid-template-rows:min-content}@media (min-width: 30rem){.app{padding-top:5rem;grid-template-rows:12rem;isolation:isolate;min-height:900px;height:100%}}.app *{font-family:inherit}.header{display:flex;flex-direction:column;align-items:center;gap:3rem;z-index:20}.header img{width:10rem;min-width:10rem}.header__controls{background-color:var(--clr-blue-dark);width:clamp(20rem,70vw,24rem);display:grid;grid-template-columns:repeat(3,1fr);border-radius:9999px;padding:8px}.header__controls>button{font-size:var(--fs-XXS);background-color:transparent;color:var(--clr-blue-light);opacity:.4;border:none;padding-block:1.125rem;border-radius:9999px;cursor:pointer}.header__controls>button.active{background-color:var(--clr-primary)!important;opacity:1!important;color:var(--clr-blue-dark)!important}.header__controls>button:hover{opacity:revert}.display-wrapper{margin-top:3rem;aspect-ratio:1;position:relative;width:75%;max-width:26rem;height:-moz-min-content;height:min-content}.display-wrapper:before{--shadow-light: hsl(234, 33%, 27%);--shadow-dark: hsl(235, 49%, 8%);position:absolute;content:"";top:0;right:0;bottom:0;left:0;background-image:conic-gradient(from -90deg,var(--clr-blue-dark) 25%,var(--shadow-light),var(--clr-blue-dark));border-radius:50%;transform:scale(1.1);box-shadow:-40px -40px 80px var(--shadow-light),40px 40px 80px var(--clr-blue-dark)}.display{background-color:var(--clr-blue-dark);color:var(--clr-blue-light);display:grid;width:100%;aspect-ratio:1;place-items:center;font-size:var(--fs-XL);border-radius:50%;position:relative}.display__clock{text-align:center}.display__clock>p{width:-moz-min-content;width:min-content;position:relative;margin-inline:auto}.display__clock>p span{display:inline-block;position:absolute}.display__clock .minute{left:0;transform:translate(-100%)}.display__clock-control-button{display:none;background:none;border:none;color:var(--clr-blue-light);text-transform:uppercase;font-size:var(--fs-M);padding:0 0 0 15px;letter-spacing:15px;margin-inline:auto}.display__clock-control-button:hover{cursor:pointer;color:var(--clr-primary)}.settings-button{cursor:pointer;place-self:center}.settings-form-wrapper{position:absolute;top:0;right:0;bottom:0;left:0;background-color:#00000080;display:grid;place-items:center;z-index:30}.settings-form{width:100%;max-width:33.75rem;padding:1.5rem 1.5rem 2.5rem;background-color:#fff;border-radius:1rem;position:relative}.settings-form section{padding-block:.8rem}@media (min-width: 30rem){.settings-form section{padding-block:1.5rem}}.form__header{padding-bottom:.8rem}@media (min-width: 30rem){.form__header{padding-bottom:1.5rem}}.form__sub-title{font-size:var(--fs-XS);color:#000;text-align:center;text-transform:uppercase;letter-spacing:4.2px;margin-bottom:.8rem}@media (min-width: 30rem){.form__sub-title{margin-bottom:0}}.form__time-section .form__sub-title{margin-bottom:1.5rem}.form__sub-title .form__submit-button{position:absolute;bottom:0;left:50%;transform:translate(-50%) translateY(50%)}@media (min-width: 30rem){.form__time-input-wrapper{display:grid;grid-template-columns:repeat(3,1fr);-moz-column-gap:1.5rem;column-gap:1.5rem}}.form__time-input{display:grid;grid-template-columns:1fr 1fr;align-items:center;color:#1d1e3066;font-size:var(--fs-XXS)}.form__time-input input{min-width:0;padding:.4rem 1rem;font-size:var(--fs-S);background-color:var(--clr-blue-ultalight);border:none;border-radius:10px}@media (min-width: 30rem){.form__time-input input{padding:.8rem 1rem}}@media (min-width: 30rem){.form__time-input{grid-template-columns:1fr;grid-template-rows:1fr 1rf;row-gap:.5em}}.form__font-section,.form__color-section{display:flex;flex-direction:column;align-items:center}@media (min-width: 30rem){.form__font-section,.form__color-section{flex-direction:row;justify-content:space-between;align-items:center}}.form__font-section .button-circle{background-color:var(--clr-blue-ultalight);color:rgba(var(--clr-blue-medium),.75)}.form__font-section button.active{background-color:var(--clr-blue-dark);color:#fff}.form__font-section button:nth-of-type(1){font-family:var(--ff-sans)}.form__font-section button:nth-of-type(2){font-family:var(--ff-roboto)}.form__font-section button:nth-of-type(3){font-family:var(--ff-mono)}.form__color-section button:nth-of-type(1){background-color:#f87272!important}.form__color-section button:nth-of-type(2){background-color:#72f4f8}.form__color-section button:nth-of-type(3){background-color:#d882f8}.form__color-section button.active{background-image:url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20width='158.05mm'%20height='116.69mm'%20version='1.1'%20viewBox='0%200%20560.0051%20413.47338'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20transform='translate(-67.841%20-348.02)'%3e%3cpath%20d='m68.387%20589.17s34.85-42.054%2074.213-54.712c10.658%207.9938%2071.078%20128.74%2081.736%20127.4%2011.991-1.3323%2090.972-111.37%20261.77-313.23%200%200%2049.43%2022.44%20140.38%2027.123-237.81%20186.54-360.82%20368.37-371.6%20377.16-30.643%2014.655-46.349%206.1754-57.007-0.48603-25.314-22.649-128.16-157.93-129.49-163.26z'%20fill='%230a0a0a'%20fill-rule='evenodd'%20stroke='%23000'%20stroke-width='1px'/%3e%3c/g%3e%3c/svg%3e");background-position:center;background-size:16px 16px;background-repeat:no-repeat}.form__submit-button{position:absolute;bottom:0;left:50%;transform:translate(-50%) translateY(50%);background-color:var(--clr-primary);padding:.8rem 2rem;border:none;border-radius:9999px;color:#fff;cursor:pointer}.settings-form section{border-bottom:2px solid hsla(0,0%,59%,.1)}.settings-form section:last-of-type{border-bottom:none}.progress-bar-svg{position:absolute;top:0;right:0;bottom:0;left:0;transform:rotate(-90deg);pointer-events:none;width:100%;height:100%}.progress-bar__progress{fill:none;stroke:var(--clr-primary);stroke-width:3;stroke-linecap:round;stroke-dasharray:var(--progress-length);stroke-dashoffset:calc(var(--progress-value) * var(--progress-length));transition:stroke-dashoffset .98s linear}