
body {
  text-align: center;
  background-color: #08b7e2;
}

h1 {
	font-size: 50px;
}

div {
	height: 280px;
	width: 280px;
  background-size: 6em;
  display: table;
  margin: 20px auto;
  border-radius: 100%;
  cursor: pointer;
  box-shadow: inset 0 10px 15px rgba(255,255,255,.35), inset 0 -10px 15px rgba(0,0,0,.05), inset 10px 0 15px rgba(0,0,0,.05), inset -10px 0 15px rgba(0,0,0,.05), 0 5px 20px rgba(0,0,0,.1);
}

#toggleStop {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	border-radius: 50%;
  background: no-repeat center center, #c4b400;
  width: 100px;
  height: 100px;
}

#togglePlay {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	border-radius: 50%;
  background: no-repeat center center, #0fb600;
  width: 100px;
  height: 100px;
}

#togglePause {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	border-radius: 50%;
  background: no-repeat center center, #05c1ff;
  width: 100px;
  height: 100px;
}

.play {
	background: transparent;
	height: 0px;
	width: 0px;
	border-color: transparent transparent transparent black;
	transition: 100ms all ease;
	cursor: pointer;
	border-style: solid;
	border-width: 20px 0 20px 35px;
	margin-top: 30px;
	margin-left: 25px;
}
		
.pause {
	background: transparent;
	height: 40px;
	width: 0px;
	border-color: transparent transparent transparent black;
	border-style: double;
	border-width: 0px 0 0px 35px;
	margin-top: 30px;
	margin-left: 32px;
}
	  
.stop {
	border: 0px;
	width: 40px; 
	height: 40px; 
	background: black;
	margin-top: 30px;
	margin-left: 0px;
}

textarea {
	text-align: center;
	background-color:  rgb(130, 155, 184);
}



/* Garage Button Styles Copied from local.css */
.garage-btn {
  padding: 20px 40px;
  font-size: 25px;
  font-weight: bold;
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  margin: 20px auto;
  display: block;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
  transition: background-color 0.3s;
}

.garage-btn.offline {
  background-color: #6c757d; /* Gray - Offline/Wait */
}

.garage-btn.online {
  background-color: #28a745; /* Green - Ready */
}

.garage-btn.moving {
  background-color: #17a2b8; /* Blue - Moving */
}

@keyframes blink-blue-green {
  0% { background-color: #28a745; }
  50% { background-color: #17a2b8; }
  100% { background-color: #28a745; }
}

.garage-btn.moving-blink {
  animation: blink-blue-green 1s infinite;
}
