:root {
  --boxheight: 80px;      
}



.compareshell {
	width: 90%;
	margin: 30px auto;
	text-align: center;
	border: 0px solid red;
line-height: 40px;
}

.comparebox {
	border: 1px solid black;
	background-color: #fff;
	height: var(--boxheight);
	width: 300px;
	overflow: hidden;
	position: relative;
	display: inline-block;
}

.entrybox {
	height: var(--boxheight);
	position: relative;
}

.boxitem {
	height: var(--boxheight);
	display: flex;
	align-items: center;
	text-align: center;
	width 100%;
	justify-content: center;


  	font-family: "Comic Neue", cursive;
  	font-weight: 700;
  	font-style: normal;
	line-height: 1em;
	position: relative;
	width: 95%;
	margin: auto;
	color: #1b407d;
	text-wrap: balance;
}





.startstopbutton:hover {cursor: pointer}
.startstopbutton{
  width: 90px;
  height: 90px;
  line-height: 90px;
  border-radius: 50%;
  font-size: 24px;
  text-align: center;
margin: 0px 30px;
text-transform: uppercase; 
font-weight: 700;
}

.buttonstart {color: #fff; background-color: #12b61a; border: 3px solid #346D37; background-image: linear-gradient(180deg, #2ddf35 0%, #069c0d 100%); text-shadow: 1px 1px 2px black;}
.buttonstop {color: #fff; background-color: red; border: 3px solid #8C3737;  background-image: linear-gradient(180deg, #ea0d0d 0%, #8c3737 100%);  text-shadow: 1px 1px 2px black;}
.buttonstart:hover {background-image: linear-gradient(180deg, #2ddf35 0%, darkgreen 100%);}
.buttonstop:hover {background-image: linear-gradient(180deg, #e70e0e 0%, #641818 100%);}

.startbuttonon {background-color: #346D37; pointer-events: none; background-image: none; text-shadow: none;}
.stopbuttonon {background-color: #8C3737; pointer-events: none;  background-image: none; text-shadow: none;}
.stopbuttonon > span, .startbuttonon > span {opacity: .6}




.startstop {
display: flex;
width: 100%;
justify-content: center;
align-items: center;

}















@media screen and (max-width: 600px) {
body {font-size: 28px; line-height: 26px;}
.pagename {font-size: 30px; margin: 20px 0px 30px 0px; line-height: 30px;}
.thequestion {}
.startstopbutton{
  width: 80px;
  height: 80px;
  line-height: 80px;
  font-size: 22px;
  margin: 0px 20px;
	}

}






/* The animation code */
@keyframes startroll {
  from {top: calc((var(--boxheight) * -20) - (var(--boxheight) / 2));}
  to {top: calc((var(--boxheight) * -1) - (var(--boxheight) / 2));}
}

.startanimation {
  animation-name: startroll;
  animation-duration: 1.1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

/* The animation code */
/* controls the speed of the stop */
@keyframes stoproll {
  from {top: calc((var(--boxheight) * -5));}
  to {top: 0px;}
}

.stopanimation {
  animation-name: stoproll;
  animation-duration: .7s;
  animation-iteration-count: 1;
animation-timing-function: ease-out;
}