/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	LIFE NIGHT CHROME — hamburger (top left) + play/pause (top right)
	Exact styles from life/css/controls.css + night invert from life/css/night.css
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


#HAMBURGER {

	position: fixed;

	top: 0px;

	height: auto;
	width: auto;

	padding: 2vh;
	padding-right: 2vh;

	cursor: pointer;

	z-index: 999998;
	
	opacity: .3;
}


/*    DESKTOP    */
@media not (pointer: coarse) {
		
	#HAMBURGER:hover {
	
		opacity: 1;
	}
}


#HAMBURGER {


	left: 0px;

	margin-left: 0px;
}


#HAMBURGER div {

	height: 1vh;
	width: 3vh;
	
	display: block;

	background-color: black;

	margin-bottom: 1vh;
}




/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	PAUSE / PLAY
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#PAUSE, #PLAY {
	
	position: fixed;

	top: 0px;
	right: 0px;
	
	height: auto;
	width: auto;
	
	padding: 2vh;
	padding-left: 2vh;
	
	cursor: pointer;
	
	opacity: .3;
	
	z-index: 999998;
}


/*    DESKTOP    */
@media not (pointer: coarse) {
	
	#PAUSE:hover, #PLAY:hover {
		
		opacity: 1;
	}	
}

#PAUSE div, #PLAY div {
	
	height: 1vh;
	width: 1vh;
	
	float: left;

	background-color: black;
}


#PAUSE div:nth-of-type(1),#PAUSE div:nth-of-type(3), #PAUSE div:nth-of-type(5), #PAUSE div:nth-of-type(7), #PAUSE div:nth-of-type(9) {
	
	margin-right: 1vh;
	
	clear: left;
}


#PLAY div:nth-of-type(2), #PLAY div:nth-of-type(4), #PLAY div:nth-of-type(7), #PLAY div:nth-of-type(9) {
	
	clear: left;
}

#PLAY div:nth-of-type(10) {
	
	display: none;
}


#HAMBURGER, #PAUSE, #PLAY {
	
	display: none;
}


/* Life night look: translucent white (invert black bars) */
#HAMBURGER, #PAUSE, #PLAY {
	
	filter: invert(1);
}