@import"https://fonts.googleapis.com/css2?family=Sour+Gummy:wght@400..700&display=swap";*{margin:0;padding:0;box-sizing:border-box;font-family:Sour Gummy,sans-serif}html,body,#app{width:100dvw;min-height:100dvh;background-color:#7b2525}#app{display:flex;flex-direction:column;justify-content:space-between}.container{display:flex;flex-direction:column;align-items:center;width:100%;height:100%}#title{position:relative;width:fit-content;font-size:3rem;color:#1ccf73;text-align:center}#title:after{content:"";background-color:wheat;position:absolute;width:100%;height:.125rem;box-sizing:border-box;left:0;bottom:-.1rem}.timer{aspect-ratio:1/1;width:90%;max-width:28rem;height:auto;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1rem;font-size:2.5rem;z-index:1}.timer:before{content:"";position:absolute;aspect-ratio:1/1;width:90%;max-width:28rem;height:auto;background-image:url(https://cdn.hsieh-dev.us.ci/icons/tomato.svg);transform:rotate(10deg);z-index:-1;transition:all .5s ease}.timer:hover:before{transform:rotate(20deg) scale(1.05)}.timer>span{-webkit-user-select:none;user-select:none;-moz-user-select:none;width:100%;margin-top:5rem;text-align:center;font-weight:500;color:#333}.timer>div{display:flex;gap:1rem}.timer button{cursor:pointer;outline:.125rem solid #969696;border:none;border-radius:.75rem;background-color:#ff7e7e;padding:.5rem 1.5rem;font-size:1.5rem;color:#333;transition:outline-color .3s ease,outline-width .1s linear,font-weight .2s ease}.timer button:hover{outline:.3rem solid oklch(from #969696 calc(l + .3) c h);font-weight:600}.settings{margin-top:1rem;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1.25rem;font-size:1.5rem;color:#1ccf73}.settings>div{display:flex;flex-direction:column;gap:.25rem}.settings input{width:8rem;height:1.5rem;border:none;border-radius:.25rem;font-size:1.5rem}footer{width:100%;font-size:1.2rem;color:#1ccf73;text-align:center}@media(min-width:1024px){.settings{flex-direction:row}}