*,
body,
html {
  margin: 0;
  padding: 0;
  white-space: nowrap;
  position: absolute;
  font-family: 'Yanone Kaffeesatz', sans-serif;
  overflow: hidden;
  /* No selection */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /* No unwanted drag */
  -webkit-user-drag: none;
  user-drag: none;
  cursor: default;
}
html,
body {
  height: 100%;
  width: 100%;
}
html {
  background-image: url('relax.jpg');
  background-size: 100% 100%;
}
body {
  background: rgba(0,0,0,0.2);
}
.faster,
.slower {
  width: 20%;
  top: 4%;
  height: 10%;
  box-shadow: rgba(0,0,0,0.5) 0px 0px 5px;
  border-radius: 5px;
  background: rgba(255,255,255,0.5);
  cursor: pointer;
}
.faster {
	left: 5%;
}
.slower {
  left: 75%;
}
.faster p,
.slower p {
  width: 100%;
  height: 100%;
  font-size: 200%;
  text-align: center;
  padding-top: 6%;
  cursor: pointer;
  text-shadow: rgba(0,0,0,0.5) 0px 0px 1px;
}
.faster p:hover,
.slower p:hover {
  background: rgba(255,255,255,0.3);
}
.roundcontainer {
	left: 10%;
	top: 15%;
	width: 80%;
	height: 75%;
}
.round {
	background: rgba(255,255,255,0.85);
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	border-radius: 50%;
}
.animated {
	animation-timing-function: ease-in-out;
	-webkit-animation-timing-function: ease-in-out;
}
@keyframes breathe {
  from {width:0%;height:0%;top:50%;left:50%;}
  20% {width:2%;height:2%;top:49%;left:49%;}
  to {width:100%;height:100%;top:0%;left:0%;}
}
@-webkit-keyframes breathe {
  from {width:0%;height:0%;top:50%;left:50%;}
  20% {width:2%;height:2%;top:49%;left:49%;}
  to {width:100%;height:100%;top:0%;left:0%;}
}
@-ms-keyframes breathe {
  from {width:0%;height:0%;top:50%;left:50%;}
  20% {width:2%;height:2%;top:49%;left:49%;}
  to {width:100%;height:100%;top:0%;left:0%;}
}