body.black {
	background: black;
}

.set .button {
	color: darkgrey;
}
.set .button.active {
	color: black;
	box-shadow: inset 0 0 0.7em #C5FF6D;
}
.set #off.button.active {
	box-shadow: inset 0 0 0.7em red;
}


.button {
	font-size: 2.6em;
	background-color: lightgrey;
	width: 1.25em;
	height: 1.25em;
	padding: 0.2em 0.1em 0;
	border: 2px dimgray solid;
	border-radius: 0.2em;
	margin: 0.2em 0.1em;
	transition: background-color 2s ease-out;
}
.button#off {
	background-color: black;
}
.button#on {
	background-color: white;
}


.button:active {
	transition: background-color 0s;
	background-color: grey;
}
.button#off:active {
	background-color: darkred;
}
.button#on:active {
	background-color:  #abebc6 ;
}


.button:last-of-type {
	margin-right: 0 
}



.white { color: white; }
.yellow { color: yellow; }
.orange { color: orange; }
.smooth { color: red; }




.iphone main:before,
.iphone main:after {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 3em;
  left: 0px;
}
.iphone main {
	padding-top: 3em;
}

.iphone main:before {
  top: 0;
  background: linear-gradient(to bottom, #bbb 0%, black 100%);
}

.iphone main:after {
  bottom: 0;
  background: linear-gradient(to top, #bbb 0%, black 100%);
}