@import url(https://fonts.googleapis.com/css?family=Gugi);body{background:url(../images/bg.jpg) center center;background-size:cover;font-family:Gugi,cursive}h1{color:#fffF;text-align:center;margin-bottom:0}.container{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr;width:350px;height:250px;-ms-flex-line-pack:center;align-content:center;margin:0 auto}.container .break-time{width:150px;height:230px;align-self:center;justify-self:center;display:grid;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.container .break-time h2{color:#a9d8e0;text-align:center}.container .break-time p{margin:0 auto;color:#fffF;font-size:2rem}.container .break-time .btn-up:active{-webkit-transform:translateY(-4px);transform:translateY(-4px)}.container .break-time .btn-down:active{-webkit-transform:translateY(4px);transform:translateY(4px)}.container .session-time{align-self:center;justify-self:center;width:150px;height:230px;align-self:center;justify-self:center;display:grid;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.container .session-time h2{color:#a9d8e0;text-align:center}.container .session-time p{margin:0 auto;color:#fffF;font-size:2rem}.container .session-time .btn-up:active{-webkit-transform:translateY(-4px);transform:translateY(-4px)}.container .session-time .btn-down:active{-webkit-transform:translateY(4px);transform:translateY(4px)}.container .button{background:0 0;border:#fffF 2px solid;border-radius:30px;outline:0;width:50px;height:50px;justify-self:center;font-size:2em;margin-top:5px;margin-bottom:5px}.container .button:hover{cursor:pointer;background-color:#99caeb}.sessionContainer{display:grid;grid-template-columns:1fr;grid-template-rows:1fr;margin:0 auto;width:360px;height:200px}.sessionContainer .session{display:grid}.sessionContainer .session h2{text-align:center;color:#a9d8e0;grid-column:1/4}.sessionContainer .session span{font-size:3rem;text-align:center;color:#fffF}.sessionContainer .session .minutes{justify-self:end}.sessionContainer .session .semicolon{display:inline-block}.sessionContainer .session .seconds{justify-self:start}.controls{display:grid;grid-template-columns:1fr 1fr 1fr}.controls button{background:0 0;border:2px #fffF solid;border-radius:30px;outline:0;color:#000;font-size:2em;margin-right:10px}.controls button:hover{cursor:pointer;background-color:#99caeb}.controls .active{background-color:#99caeb}@media screen and (max-width:360px){.controls button{background-color:#99caeb}.controls button:focus{background-color:#106ba8}}@media screen and (max-width:768px){.controls button{background-color:#99caeb}.controls button:active,.controls button:focus{background-color:#106ba8}}