@import"https://fonts.googleapis.com/css2?family=Lato:wght@400&display=swap";.exercise{display:grid;grid-template-columns:1fr 1fr;height:100%;width:100%;overflow:hidden;line-height:1.6}.exercise a{color:var(--color-primary)}.exerciseDescription{padding:2rem;overflow-y:auto;border-right:1px solid #555}.exerciseDescription code{display:inline-block;background:rgba(255,255,255,.2);border-radius:.25rem;padding:.1rem .25rem;margin-bottom:.125rem}.exerciseDescription li{margin:1rem}.dots{display:flex;flex-direction:column;justify-content:center;align-items:center;transition:all .3s}.dots[hidden]{opacity:0;transform:translate(100%)}.dot{height:1rem;width:1rem;border:1px solid white;border-radius:.5rem;margin:.5rem 0}.dot[data-active]{background:white}[data-screen=new-timer]>input{grid-area:header;align-self:self-end;justify-self:center;appearance:none;background:transparent;font-size:5rem;width:10ch;border:none;border-bottom:1px solid white;color:#fff;direction:rtl}[data-screen=new-timer]>input:focus{outline:none}[data-screen=new-timer]>.actions{grid-area:actions}.scratch{padding:4rem 2rem}.alarm{display:grid;grid-template-columns:1fr 2rem;grid-column-gap:1rem}.alarm>*{align-self:center}.alarmTime{font-size:2rem}.alarmToggle{--height: 1rem;--color-current: white;height:var(--height);width:calc(var(--height) * 2);background:var(--color-gray);border-radius:var(--height);cursor:pointer}.alarmToggle:before{content:"";position:absolute;top:0;left:0;height:var(--height);width:var(--height);border-radius:var(--height);background:var(--color-current);transition:all .3s}.alarmToggle[data-active]{--color-current: var(--color-primary)}.alarmToggle[data-active]:before{transform:translate(100%)}*,*:before,*:after{box-sizing:border-box;position:relative}[hidden]{display:none!important}html,body{height:100%;width:100%;margin:0;padding:0;font-family:Lato,sans-serif;font-weight:400;font-size:16px;background-color:#18191c;color:#fff}:root{--color-primary: #ff3e01;--color-primary-light: #ffa262;--color-secondary: #8b9096;--color-gray: #373b41;--color-dark-gray: #25272a}.app{height:100%;width:100%;display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr;overflow:hidden}.app>.app-panels{grid-template-rows:2/-1;display:grid;grid-template-columns:1fr;grid-template-rows:1fr}.app>.app-panels>.app-panel{grid-area:1/1;display:grid;grid-template-columns:1fr;grid-template-rows:1fr}.app>.app-panels .timers,.app>.app-panels .timer,.app>.app-panels [data-screen]{grid-area:1/1;transition:transform .6s ease-in-out,opacity .3s ease-out}.app>.app-panels .dots{position:absolute;top:0;right:0;width:5rem;height:100%}.app>.app-panels .timer:not([data-active]){display:none}.app[data-state=timer] [data-screen=new-timer]{transform:translateY(-50%);opacity:0}.app[data-state=timer] .timer{animation:slide-up .6s ease-in-out both}@keyframes slide-up{0%{opacity:0;transform:translateY(50%)}50%{opacity:1}}.app-tabs{display:flex;flex-direction:row;justify-content:stretch;background-color:var(--color-dark-gray)}.app-tab{appearance:none;background:transparent;flex-grow:1;display:flex;justify-content:center;align-items:center;padding:1rem 0;border-bottom:.25rem solid transparent}.app-tab[data-selected]{border-color:var(--color-primary)}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield;appearance:textfield}[data-screen],.timer{display:grid;grid-template-rows:minmax(15vh,80px) 1fr 25vh;grid-template-areas:"header" "main" "actions";grid-row-gap:1rem}[data-screen]{grid-template-rows:minmax(15vh,120px) 1fr 25vh}.clock{display:grid;grid-template-rows:minmax(30vh,200px) 1fr;grid-template-areas:"header" "main";grid-row-gap:1rem}.timer{--progress: calc((var(--elapsed)) / var(--duration));height:100vh}.timer>header{grid-area:header}.timer>.circles,.timer>.display{grid-area:main;align-self:center;justify-self:center}.timer>.actions{grid-area:actions;align-self:baseline}.timer[data-state~=idle] .progress{transition-duration:.3s}.timer[data-state~=paused] .elapsed{animation:pulse 1s steps(1) infinite}.timer[data-state~="running.overtime"] circle,.timer[data-state~=expired] circle{animation:pulse 1s steps(1) infinite}.timer[data-state~="running.overtime"] .elapsed,.timer[data-state~=expired] .elapsed{color:#fff}.timer[data-state~="running.overtime"],.timer[data-state~=expired]{--progress: 1}.timer[data-state~="running.normal"],.timer[data-state~=paused]{--progress: calc((var(--elapsed) + var(--interval)) / var(--duration))}.actions{display:grid;grid-template-columns:repeat(3,1fr);grid-template-areas:"left center right";align-items:center;justify-items:center}.actions>button:not(.transparent){grid-area:center;appearance:none;background-color:var(--color-primary);color:#fff;height:4rem;width:4rem;border-radius:4rem;border:none;font-size:1.5rem;font-weight:700;transition:background-color .3s ease;line-height:50%}.actions>button:not(.transparent):hover{background-color:var(--color-primary-light)}.actions>button.transparent{width:auto;background:transparent;padding:1rem}button{appearance:none;color:#fff;background:rgba(255,255,255,.2);padding:.5rem 1rem;border:none;font-size:1.5rem;cursor:pointer;transition:transform .3s}button:focus{outline:none}button:disabled{opacity:.2}button[hidden]{transform:scale(0)}.display{display:flex;flex-direction:column;justify-content:center;align-items:center}.elapsed{color:var(--color-primary);font-size:5rem;padding:1rem;transition:color .3s ease;cursor:pointer}.elapsed:hover{color:#fff}.label{color:var(--color-secondary)}.controls{display:flex;flex-direction:row;height:2rem}.controls>button{appearance:none;border:none;background:transparent;color:#fff;font-size:1rem}.circles{transform:rotate(-.25turn);height:100%;width:100%;pointer-events:none}circle{stroke:#fff;stroke-linejoin:round;stroke-linecap:round;stroke-width:1px}.progress{--interval-duration: calc(var(--interval) * 1s);transition:stroke-dashoffset var(--interval-duration) linear;stroke:var(--color-primary);stroke-dashoffset:calc(1 - var(--progress) * -1);stroke-dasharray:1 1;stroke-width:1.1px}@keyframes pulse{0%,to{opacity:0}50%{opacity:1}}header{display:flex;justify-content:center;align-items:center}header a{color:#fff;opacity:.5;transition:opacity .3s ease}header a:hover{opacity:1}.local{align-self:center}.localTime{font-size:5rem;font-weight:400;margin:0;text-align:center;color:var(--color-primary)}.localDate{font-size:1.5rem;display:block;text-align:center}.foreignItem{display:grid;padding:1rem;grid-template-columns:1fr 1fr;grid-template-rows:1fr;grid-column-gap:1rem;grid-row-gap:.5rem;grid-template-areas:"city time";border-top:1px solid #333}.foreignItem>.foreignCity{grid-area:city}.foreignItem>.foreignTime{grid-area:time}.foreignItem>.foreignDetails{grid-area:details}.foreignCity{appearance:none;background:transparent;color:#fff;border:1px solid white;padding:0 1rem;justify-self:self-start;display:inline-block}.foreignCity:focus{outline:none}.foreignCity option{background:var(--color-dark-gray);color:#fff}.foreignTime{font-size:2rem;align-self:center}