body
{
	font-family: Arial, sans-serif;

	font-size: 40pt;

	margin: 0px;

	user-select: none;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}
nav
{
	text-align: center;
	position: fixed;
	background-color: white;

	top: 0px;
	bottom: 0px;

	width: 85%;
	right: 100%;

	font-size: 60%;
}

nav h1
{
	margin-bottom: 0%;
}
nav h2
{
	font-size: 60%;
}


nav li
{
	list-style-type: none;
	margin-bottom: 5%;

	background-color: #BBBBBB;

	margin-left: 20px;
	margin-right: 20px;
	border-radius: 10px;
}

.clock
{
	position: absolute;
	left: 0px;
	right: 0px;
}

#white
{
	top: 50%;
	bottom: 0px;

	background: white;
	color: black;
}

#black
{
	background: black;
	color: white;

	top: 0%;
	bottom: 50%;

	transform: rotate(180deg);
}

.clock-display
{
	font-size: 100%;
	font-family: monospace;
}

.clock-button
{
	font-size: 50%;
}

.clock > div
{
	position: absolute;
	top: 20%;
	bottom: 20%;
	left: 0px;
	right: 0px;
	text-align: center;
}

#overlay {
	position: absolute;
	top: 0px;
	bottom: 0px;
	right: 0px;
	left: 0px;
	background-color: rgba(100,100,100,.5);
}

#overlay.hidden { display: none;}

#set-clock
{
	position: fixed;

	top:0px;
	bottom:0px;
	width: 100%;

	text-align: center;

	display: flex;

	align-items: center;

}

#set-clock.white
{
	background-color: white;
	color: black;
}

#set-clock.black.show
{
	animation: fadeTransition .3s linear;

	background-color: black;
	color: white;
}

#set-clock.show
{
	animation-name: slideOpen;
	animation-duration: .23s;

	left:0%;
}

#set-clock.hide
{
	left: 100%;
}
#set-clock.hide.animation
{
	animation-name: slideClose;
	animation-duration: .23s;

	background-color: black;
	color: white;
}


@keyframes slideOpen
{
	from{ left: 100%; }
	to { left: 0%; }
}

@keyframes slideClose
{
	from { left: 0%; }
	to { left: 100%; }
}

@keyframes fadeTransition
{
	from
	{
		color: black;
		background-color: white;
		border-color: black;
	}

	to
	{
		color: white;
		background-color: black;
		border-color: white;
	}
}


@keyframes borderFade
{
	from {border-bottom-color: black;}
	to	 {border-bottom-color: white;}
}



#keypad .keypad-row span
{
	display: inline-block;
	width: 25%;

	border-radius: 5px;
	max-width: 200px;
}



.white #keypad .keypad-row span { background-color: inherit; }
.black #keypad .keypad-row span { background-color: inherit; }
.white #keypad .keypad-row span.pressed { background-color: #AAAAAA; }
.black #keypad .keypad-row span.pressed { background-color: #AAAAAA; }


.backspace-button{ border-radius: 5px;}


.pressed { background-color: #AAAAAA; }
li.pressed { background-color: #888888; }

/* this will be better implemented in JS*/
/*.white #keypad .keypad-row span:active, .backspace-button:active
{
	background-color: #AAAAAA;
}*/

#set-clock div
{
	flex-grow: 1;
}

#set-clock #display span { 	vertical-align: middle; }

#set-clock #display
{
	margin-bottom: 5%;
}


#set-clock.black #display {
	border-bottom: 2px solid white;
	animation: borderFade .3s linear;
}

#set-clock.white #display {
	border-bottom: 2px solid black;

}