@import"https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,400;8..144,500;8..144,600;8..144,800&display=swap";.mode{display:flex;justify-content:center;align-items:center;margin-bottom:calc(var(--step) * 4);padding:var(--step) calc(var(--step) * 2);font-size:1.5rem;background-color:var(--secondary-color);border:2px solid var(--text-primary);border-radius:30px}.mode svg{margin-right:var(--step)}.mode svg path{fill:var(--text-primary)}.timer{font-size:16rem;font-weight:600;line-height:.85;text-align:center;color:var(--text-primary)}.control-panel{position:relative;display:flex;margin-top:calc(var(--step) * 3)}.control-panel svg path{fill:var(--text-primary)}.control-panel .secondary-button,.control-panel .primary-button{cursor:pointer;border:none}.control-panel .secondary-button{margin:var(--step);padding:calc(var(--step) * 3);background-color:var(--secondary-color);border-radius:calc(var(--step) * 3)}.control-panel .secondary-button .icon{width:30px;height:30px;display:flex;align-items:center;justify-content:center}.control-panel .primary-button{margin:0 calc(var(--step));padding:calc(var(--step) * 4) calc(var(--step) * 6);background-color:var(--accent-color);border-radius:calc(var(--step) * 4)}.control-panel .primary-button svg{width:22px;height:26px}.options{padding:var(--step);position:absolute;bottom:108%;left:8px;background-color:var(--options-color);border-radius:calc(var(--step) * 2);opacity:1;box-shadow:0 1px 6px #0000000a,0 5.5px 16px #00000030}.options__item{display:flex;padding:calc(var(--step) * 1.5);align-items:center;cursor:pointer}.options__item svg{margin-right:var(--step)}.animation{opacity:0;position:absolute;width:100%;text-align:center}.animation.visible{opacity:1}.animation .container{position:relative;mix-blend-mode:normal}.animation .container .red-gradient,.animation .container .green-gradient,.animation .container .blue-gradient{position:absolute}.animation .container .red-gradient{width:450px;height:450px;background-image:url(../img/1-gradient.png);background-size:cover;mix-blend-mode:hard-light;animation:gradient 10s ease-in-out infinite}.animation .container .green-gradient{width:420px;height:420px;background-image:url(../img/2-gradient.png);background-size:cover;mix-blend-mode:hard-light;animation:gradient 15s ease-in-out infinite}.animation .container .blue-gradient{width:500px;height:500px;background-image:url(../img/3-gradient.png);background-size:cover;mix-blend-mode:hard-light;animation:gradient 20s ease-in-out infinite}@keyframes gradient{0%{transform:scale(1) skew(0 0)}20%{transform:skew(-5deg,-4deg)}40%{transform:scale(1.6) skew(15deg,10deg)}60%{transform:scale(.8) skew(-2deg,-4deg)}80%{transform:scale(1.5) skew(5deg,13deg)}to{transform:scale(1) skew(0 0)}}.preferences{position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;min-height:100vh;width:100%;z-index:10;background-color:var(--background-body);opacity:.99}.preferences__container{background-color:var(--options-color);padding:calc(var(--step) * 3);border-radius:16px;min-width:400px;box-shadow:0 1px 6px #0000000a,0 5.5px 16px #00000030}.preferences__title{font-size:1.7rem;font-weight:600}.preferences__header{margin:calc(var(--step) * 2) 0;display:flex;justify-content:space-between;align-items:center}.preferences__close{cursor:pointer}.preferences__close svg path{fill:var(--text-primary)}.preference{display:flex;justify-content:space-between;padding:calc(var(--step) * 2) 0;font-size:1.1rem}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}html{font-size:14px}body{font-size:1rem;line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}:root{--step: 8px}[data-theme=light-red]{--background-body: rgb(255, 242, 242);--text-primary: rgb(71, 21, 21);--secondary-color: rgba(255, 76, 76, .15);--accent-color: rgba(255, 76, 76, .71);--options-color: #ffd9d9}[data-theme=light-blue]{--background-body: rgb(242, 249, 255);--text-primary: rgb(21, 48, 71);--secondary-color: rgba(76, 172, 255, .15);--accent-color: rgba(76, 172, 255, .62);--options-color: #d9eeff}[data-theme=light-green]{--background-body: rgb(242, 255, 245);--text-primary: rgb(20, 64, 29);--secondary-color: rgba(77, 218, 110, .15);--accent-color: rgba(77, 218, 110, .62);--options-color: #dafae0}[data-theme=dark-red]{--background-body: rgb(13 6 4);--text-primary: rgb(255 246 242);--secondary-color: rgb(255 84 76 / 15%);--accent-color: rgb(249 46 11 / 71%);--options-color: rgb(44 13 4 / 98%)}[data-theme=dark-blue]{--background-body: rgb(4, 9, 13);--text-primary: rgb(242, 249, 255);--secondary-color: rgba(68, 112, 243, .15);--accent-color: rgb(87 77 255 / 62%);--options-color: rgba(14, 29, 58, .97)}[data-theme=dark-green]{--background-body: rgb(4, 13, 6);--text-primary: rgb(242, 255, 245);--secondary-color: rgba(77, 218, 110, .15);--accent-color: rgb(52 208 32 / 62%);--options-color: rgba(19, 48, 25, .96)}body{overflow:hidden;font-family:Roboto Flex,Roboto,Arial,sans-serif;background-color:var(--background-body);color:var(--text-primary)}.wrapper{min-height:100vh;display:flex;align-items:center;justify-content:center}.container{display:flex;align-items:center;justify-content:center;flex-direction:column;position:relative}.hidden{visibility:hidden;opacity:0}