@import"https://fonts.googleapis.com/css2?family=Overpass+Mono&display=swap";html{--red: #e74c3c;--sand: #fff0a4;--text: #2c3e50;--green: #2ecc71;--bg: var(--red)}html,body,a{margin:0;padding:0}h1,p,a{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.title{font-weight:700;font-size:2.5rem;margin:0;padding:0;padding-left:5rem}.num{font-family:Overpass Mono,monospace}#clickArea{display:flex;flex-direction:column}#app{text-align:center;color:var(--text);display:flex;flex-direction:column;margin:auto;width:50vh;max-width:40rem;min-height:100vh;justify-content:space-around}button{font-size:4em;outline:none;border:none;padding:.5em;border-radius:.5em;background-color:#fff;transition:.1s transform ease-out,.5s width ease-out;margin:.5em}button:hover{transform:scale(1.1)}.timerContainer{display:flex;flex-direction:row;align-items:center;justify-content:center}.timer{font-size:8em;padding:0;margin:0}.buttonContainer{display:flex;flex-direction:row;justify-content:space-around;align-items:center}.icon *{fill:var(--text)}.icon{height:3em;width:3em;margin:1em;transition:.1s transform ease-out}.icon:hover{transform:scale(1.1)}body{background-color:var(--bg)}a{text-decoration:none;color:var(--text);font-weight:700;transition:.1s all ease-out;font-size:1.5em}a:visited{color:#000}a:hover{transform:scale(1.1)}.links{display:flex;flex-direction:row;justify-content:center;align-items:center}.links .icon{width:2rem;height:2rem}.reflectionImage{filter:invert(1) opacity(.9)}.hourglassContainer{overflow:hidden}.hourglass{flex-grow:1;position:relative;width:100%;padding-top:100%;margin:auto;overflow:hidden;--time: 0%;transform:scale(1.6)}.hourglassImageContainer{position:absolute;top:0%;left:0%;width:100%;height:100%;transform:rotate(-180deg);transition:none}.hourglassImageContainer.animate{transform:rotate(0);transition:1s transform ease-in-out}.hourglassImageContainer>img{position:absolute;top:0%;left:0%;width:100%;height:100%}.sandFlow{position:absolute;top:31%;left:48.9%;width:2.2%;height:19%;background-color:var(--sand);z-index:1000;transition:none}.hourglassImageContainer.animate .sandFlow{top:49.9%;height:19.6%;transition:top 1s ease-in,height 1s ease-in}.reflectionImageContainer{position:absolute;top:25%;left:25%;width:50%;height:50%;padding-bottom:100%}.reflectionImageContainer>img{width:100%;height:100%}.blocker{transform:translateY(calc((100% - var(--time)) * .196))}.blocker2{transform:translateY(calc(-122.8% + var(--time) * .21))}.blocker path,.blocker2 path{fill:var(--bg)!important}.blocker path,.blocker2 path{fill:var(--bg)}svg{overflow:visible}.editWindow{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#0007;justify-content:center;align-items:center;padding:2rem;box-sizing:border-box;z-index:9999}.editWindow.active{display:flex}.editWindow>div{background:var(--bg);border-radius:2rem;width:100%;display:flex;flex-direction:column;align-items:center;padding:2rem;max-width:60rem}.inputs{display:flex;flex-direction:row;align-items:center;justify-content:center;width:100%;height:100%}.inputs>p,.inputs>input{outline:none;border:none;background:none;font-size:10em;color:#fff;margin:1rem}.inputs>input{background-color:#0003;width:1.5em}.recomendations{font-size:3rem;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;max-width:30rem}.recomendations>div{display:flex;flex-direction:row;align-items:center;justify-content:space-between;width:100%}.recomendations>div>*{margin:1rem 0;color:var(--text)}.selectedIcon{position:relative;border-radius:50%;border:3px solid var(--text);width:2rem;height:2rem}.selectedIcon>div{display:none;position:absolute;top:0px;left:0px;width:2rem;height:2rem;transform:scale(.8);border-radius:50%;background-color:var(--text)}.selected .selectedIcon>div{display:block}