body {
	background-color: #FF5555;
	color: white;
	font-size: 50px;
	height: 100vh;
	font-family: "Poiret One";
	background: #DCE35B; /* fallback for old browsers */
	background: -webkit-linear-gradient(125deg, #DCE35B , #45B649); /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(125deg, #DCE35B , #45B649); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
	text-align: center;
}

.heading {
	height: 20vh;
	text-shadow: 1px 3px 10px black;
}
.heading > h1 {
	font-size: 9vw;
	text-align: center;
}

#gap {height: 10vh;}

.timeSetter {height: 20vh;}

strong {
	font-size: 30px;
	text-align: center;
}
span:hover {
	animation: button 200ms ease-in-out forwards;
}
@keyframes button {
	0% {transform: scale(1);}
	100% {text-shadow: 2px 2px 5px #2c2c2c; transform: scale(1.2);}
}
.clock {
	height: 20vh;
	text-align: center;
}
.control {
	height: 20vh;
	text-align: center;
	font-size: 50px;
}
.minutes, .seconds {display: inline-block;}
.minutes {font-size: 100px;}

#footer {
	height: 10vh;
	font-size: 30px;
}
a, a:hover, a:visited, a:active {
	text-decoration: none;
	color: navajowhite;
}
#love {color: red; animation: beat 1s ease-in-out infinite;}
@keyframes beat {
	50% {transform: scale(1.1); text-shadow: 2px 2px 5px darkred;}
	100% {transform: scale(1);}
}
.resetStyle {
	

background: #5f2c82; /* fallback for old browsers */
background: -webkit-linear-gradient(-25deg, #5f2c82 , #49a09d); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(-25deg, #5f2c82 , #49a09d); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        
}
.timeoutStyle {
background: #DCE35B; /* fallback for old browsers */
background: -webkit-linear-gradient(-125deg, #DCE35B , #45B649); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(-125deg, #DCE35B , #45B649); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
	
}
.breakStyle {
background: green;
background: linear-gradient(-45deg, green, #3B76FF);
background: -webkit-linear-gradient(-45deg, green, #3B76FF);
}
.workStyle {
background: #52c234; /* fallback for old browsers */
background: -webkit-linear-gradient(-45deg, #52c234 , #061700); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(-45deg, #52c234 , #061700); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

@media only screen and (min-width: 320px) {
	.heading > h1 {font-size: 45px;}
	strong {font-size: 22px;}
	span {font-size: 35px !important;}
	.wtimeInterval, .btimeInterval {font-size: 30px; text-align: center;}
	.play, .reset {font-size: 50px !important;}
	#footer {font-size: 25px;}
	#love {font-size: 25px !important;}
}
@media only screen and (min-width: 425px) {
	.heading > h1 {font-size: 55px;}
	strong {font-size: 30px;}
	#footer {font-size: 30px;}
	#love {font-size: 30px !important;}
}
@media only screen and (min-width: 768px) {
	.heading > h1 {font-size: 60px;}
	strong {font-size: 35px;}
	span {font-size: 40px !important;}
	.wtimeInterval, .btimeInterval {font-size: 35px; text-align: center;}
}
@media only screen and (min-width: 1024px) {
	.heading > h1 {font-size: 80px;}
	span {font-size: 45px !important;}
	.wtimeInterval, .btimeInterval {font-size: 40px; text-align: center;}
	.minutes {font-size: 110px;}
	.seconds {font-size: 50px;}
	.workTimer {border-right: 2px solid white;}
	.play, .reset {margin-top: 5vh !important;}
}