*{box-sizing:border-box;--working-color: green;--relaxing-color: orange;--back-color: black;--front-color: white}html,body{color:var(--front-color);font-size:16px;top:0;margin:0;background-color:var(--back-color)}#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;width:100%;margin:0;position:absolute;top:50%;left:50%;-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}#title>h1{font-size:2rem;color:#fe7f2d;margin:0 2rem 3rem}#info h2{font-size:1.2rem;line-height:1.5rem;font-weight:400;margin:0rem}#info ul{margin:0rem}#status-list{padding:0;list-style:none;text-align:center}#status-list li{font-size:.8rem;line-height:1rem;display:inline-block}#status-list #nothing-tag{color:#dc143c}#status-list #working-tag{color:var(--working-color);display:none}#status-list #relaxing-tag{color:var(--relaxing-color);display:none}#buttons button{font-size:1.5em;height:4rem;padding:1rem;border:none;border-radius:14px;margin:.8rem auto}#btn-init{color:var(--back-color);background-color:var(--working-color);transition:color .5s,background-color .5s}#btn-init:hover{color:var(--working-color);background-color:var(--back-color)}#btn-stop{color:var(--back-color);background-color:var(--relaxing-color);transition:color .5s,background-color .5s}#btn-stop:hover{color:var(--relaxing-color);background-color:var(--back-color)}#btn-stop{display:none}#main{--acent-color: var(--working-color);width:80%;padding:2rem;border:solid 2px;border-color:var(--acent-color);border-radius:20px;margin:.5rem auto;visibility:hidden;opacity:0;height:0;transition:visibility 0s,opacity 2s,height 0s}#main p{font-size:1rem}#main #relaxing-legend{display:none}#main #relaxing-legend,#main #working-legend{margin:0 auto}#main #timer{font-family:Courier New,monospace;font-size:3rem;color:var(--acent-color);line-height:4rem;margin:0 auto}#total{color:gray;margin-top:2rem;visibility:hidden;opacity:0;height:0;transition:visibility 0s,opacity 2s,height 0s}#total>p{font-size:.8rem;margin:.5em auto}#help{display:inline-block;position:fixed;top:0;right:10px;width:20rem;padding:.8rem;font-size:.6rem;text-align:left;background-color:var(--back-color);opacity:.85;border:solid 2px;border-radius:20px}#close-help:hover{color:#a9a9a9}#help-btn{display:none;position:fixed;top:0;right:10px}@media only screen and (min-width: 768px){html,body{font-size:20px}#main{width:614px}}