#pomodoro-app{background:#fff}p{margin:15px;font-size:1em;text-align:justify}h1{margin:25px 0;font-weight:900;font-size:2em;text-align:center}input{transition:.5s ease-in-out;margin:10px 0;font-size:1.1em;padding:5px;background:#6c5ce7;border:none;width:100%;color:#fff}.btn-group{display:flex;justify-content:space-between;align-items:center;height:0%;margin:25px 0}button{cursor:pointer;margin:5px;padding:10px 18px;border:none;font-size:1.1em;transition:.5s ease-in-out}label{color:#fff;font-size:1.1em}form{height:20%;display:flex;flex-direction:column;padding:0;max-width:90%;margin:auto}form button{background:#1943ff;width:100%;margin:15px 0;color:#fff}.break,.start{background:#3021fd;color:#fff}.reset{background:#fa456d;color:#fff}.pause{background:#fd8f11;color:#fff}.resume{background:#830afc;color:#fff}.clock{padding:0;display:flex;position:relative;justify-content:center;align-items:center;font-weight:700;height:30%;font-size:2.4em}.progress-ring{position:absolute;top:50%;left:49%;transform:translate(-35%,-60%)}.progress-ring__circle{transition:.5s;transform:rotate(-90deg);transform-origin:50% 50%;stroke:#3341ff}.danger{stroke:#f3111c;animation:pulse .9s ease-in-out infinite}@keyframes pulse{0%,100%{transform:rotate(-90deg) scale(1)}50%{transform:rotate(-90deg) scale(1.05)}75%{transform:rotate(-90deg) scale(.8)}}@media screen and (min-width:768px){body{display:grid;grid-template-areas:"head head" "clock form" "btns ji"}.btn-group{grid-area:btns;justify-content:center}.clock{grid-area:clock;height:100%}h1{grid-area:head;align-self:center}form{align-self:center;justify-self:center;grid-area:form;width:50%;justify-content:space-around}footer{width:100%}}@media screen and (max-width:375px){form{height:40%}footer{position:static}}