body #body{
	background-color:var(--black);
	color:var(--gray);
	font-family:input-mono,monospace;
}

#body .header{
	align-items:start;
	display:flex;
	margin:0px auto;
	padding:10px;
	width:100%;
}
#body .header .logo{
	fill:var(--gray);
	height:50px;
	margin-right:10px;
}
#body .header .clock{
	font-weight:normal;
	margin-left:auto;
}

#body h1,h2,h3{
	margin:0px;
	white-space:nowrap;
}

#body .item,#body .item .control{
	align-items:center;
	display:flex;
	padding:10px;
	width:100%;
}
#body .item .button{
	font-size: 38px;
	font-weight:normal;
	height:70px;
	margin-left:10px;
	width:100%;
}
#body .item .button:before{
	height:50px;
	width:50px;
}

#body .item .control .slider{
	margin-bottom:-20px;
	width:100%;
}
#body .item .slider datalist {
	display:flex;
	justify-content:space-between;
	width:100%;
}
#body .item .control .countdown{
	font-weight:normal;
	margin-left:20px;
}
#body .item .control .icon{
	background-color:var(--blue);
	display:block;
	height:50px;
	margin-left:20px;
	min-width:50px;
	width:50px;
}
#body .item .control .icon.power{ background-color:var(--red); }

#body .item.edit{
	align-items:start;
	background-color:var(--grayDark);
	display:grid;
	grid-template-columns:1fr 3fr;
	row-gap:20px;
}
#body .item.edit .slider{ margin-top:-2px; }