* {
	font-family: Arial, Helvetica, sans-serif;
	font-size: calc(1rem + 0.5vmin);
	box-sizing: border-box;
}

html, body {
	overflow: hidden;

	width: 100%;
	height: 100%;
	min-width: 100%;
	min-height: 100%;
	margin: 0;
}

body {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	overflow: hidden;

	
	width: 100%;
	height: 100%;
	min-width: 100%;
	min-height: 100%;
}


#main-ui-container {
	position: absolute;
	left: 0;
	right: 0;
	overflow: hidden;

	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;

	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
}


#main-ui-flex {
	position: absolute;
	top: 0;
	bottom: 0;
	overflow: hidden;

	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;

	height: 100%;
	width: 100%;
	max-width: 100vmin;
	max-height: 100%;

	opacity: 0; /* set to 1 in main.js after initiation */
	/*transition: opacity 200ms ease-in;
	-webkit-transition: opacity 200ms ease-in;*/
}


#ui-element-first {
	flex: 1 0 0;

	width: 100%;
	max-width: 100%;
	max-height: 100%;
}


#clock-alignment-container {
	display: flex;

	flex: 0 1 100vmin;

	width: 100%;
	height: 100%;
	max-width: 100vmin;
	max-height: 100vmin;
}

#clock-size-container {
	position: relative;
	display: flex;
	align-content: center;
	justify-content: center;

	flex: auto;

	max-width: 100%;
}

.clock-underlay {
	position: absolute;
	display: flex;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

.generic-img {
	width: auto;
	height: 100%;
	margin: auto;

	transform-origin: center center;

	user-select: none;
	-webkit-user-select: none;
}

#year-clock-face {
	transform: rotate(100.35616438deg); /* previously 98.924657534deg */
}

/*#year-clock-hand {
	/*transform: scaleX(0.5);
	filter: sepia();
}*/

.z4 {
	z-index: 4;
}

.z3 {
	z-index: 3;
}

.z2 {
	z-index: 2;
}

.z1 {
	z-index: 1;
}

.z0 {
	z-index: 0;
}

.z-1 {
	z-index: -1;
}

#glCanvas {
	width: auto;
	height: 100%;
	margin: auto;

	/*opacity: 1;*/ /* set to 1 in main.js after first render */
	/*transition: opacity 100ms ease-in;
	-webkit-transition: opacity 100ms ease-in;*/
}

#clock-face {
	flex: auto;

	width: auto;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	margin: auto;

	/*filter: drop-shadow(2px 2px 2px white);*/

	user-select: none;
	-webkit-user-select: none;
}

.clock-overlay {
	position: absolute;
	display: flex;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	
	z-index: 0;
}

.new_clock-overlay {
	position: relative;
	/*display: inline-block;*/
	max-height: 100vmin;

	/*margin: auto;*/
}

.new_clock-overlay img {
	height: 100%;
	user-select: none;
	-webkit-user-select: none;

	opacity: 0;
}

.significant-time-display-container {
	position: absolute;
	display: flex;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;

	justify-content: center;
	align-items: center;
	user-select: none;
	-webkit-user-select: none;
}

.right-time-display, .left-time-display {
	/*width: 78%;*/
	width: 67.8%;
	padding-bottom: 3.3vmin;

	transform-origin: center center;

	font-size: 3vmin;
	vertical-align: middle;

	cursor: default;

	user-select: none;
	-webkit-user-select: none;
}

.right-time-display {
	text-align: right;
}

#astronomical-dawn-display, #astronomical-dusk-display{ /* text on #404040 background*/
	color: white;
	/*text-shadow: black 0 0 0.2vmin;*/
}

#nautical-dawn-display, #nautical-dusk-display { /* text on #808080 background*/
	color: #bfbfbf;
	text-shadow: black 0 0 0.2vmin;
}

#civil-dawn-display, #civil-dusk-display { /* text on #bfbfbf background */
	color: #404040;
	text-shadow: white 0 0 0.2vmin;
}

#sunrise-display, #sunset-display { /* text on white background*/
	color: black;
	/*text-shadow: white 0 0 0.2vmin;*/
}

#clock-hand {
	width: auto;
	height: 100%;
	margin: auto;

	transform-origin: center center; /* if half height(?): center 100% */

	user-select: none;
	-webkit-user-select: none;
}

#inner-display {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	width: 100%;
	height: 100%;
	margin: auto;

	cursor: default;
	user-select: none;
	-webkit-user-select: none;
}

#location-display { 
	font-size: 3vmin; /* does not scale correctly in a vertical orientation due to bottom row*/
	padding-bottom: 1.5vmin;

	color: #808080;
}

#time-display {
	font-size: 6.3vmin;
}

#date-display {
	font-size: 3vmin;
	padding-top: 1.5vmin;

	color: #808080;
}

#ui-element-last {
	display: flex;
	justify-content: space-evenly;

	flex: 1 0 1.2rem;

	width: 100%;
	max-width: 100%;
	max-height: 100%;

	z-index: 1;
}

#ui-element-last div {
	height: fit-content;
}

#ui-element-last * {
	text-align: center;
}

#solar-noon-icon, #sunrise-icon, #sunset-icon {
	vertical-align: top;
	height: calc(1rem + 0.5vmin);
	width: auto;

	-webkit-user-select: none;
	user-select: none;
}

#solar-noon-display, #outer-sunrise-display, #outer-sunset-display {
	display: inline;
	margin-right: 0.25rem;
}



#menu-button {
	position: absolute;
	bottom: 0.2vmin;
	right: 0.2vmin;
	overflow: hidden;

	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;

	width: 10vmin;
	height: 10vmin;
	border-radius: 5vmin;

	user-select: none;
	-webkit-user-select: none;
	z-index: 2;
}

#menu-button input {
	position: absolute;
	width: 100%;
	height: 100%;
	margin: 0;

	opacity: 0;
	z-index: 2;

	cursor: pointer;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-tap-highlight-color: transparent;
}

#menu-button .menu-button-burger-element {
	position: relative;
	width: 75%;
	height: 10%;
	background-color: black;
	border-radius: 1rem;
}

#menu-button #first-burger-element + #last-burger-element{
	transform-origin: center center;
}

#menu-button #middle-burger-element {
	margin-top: 10%;
	margin-bottom: 10%;
}

#menu-button input:checked ~ #middle-burger-element {
	opacity: 0;
}

#menu-button input:checked ~ #first-burger-element {
	transform: translate(0px, 200%) rotate(45deg);
}

#menu-button input:checked ~ #last-burger-element {
	transform: translate(0px, -200%) rotate(-45deg) ;
}



#menu-container {
	display: none; /* set to flex in main.js */
	justify-content: center;
	align-items: center;

	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;

	background-color: #fff;
	z-index: 1;
}

.form-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 80vmin;
	min-height: 1rem;
}

.form-row label {
	min-width: 100px;
	flex-basis: 44%;
	flex-grow: 1;
}

.form-row input {
	right: 0;
	min-width: 100px;
	flex-basis: 54%;
	flex-grow: 1;
}

.form-row select {
	right: 0;
	min-width: 100px;
	flex-basis: 54%;
	flex-grow: 1;
}

.form-row #saveButton {
	margin-top: 0.5rem;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 2.5rem;
}

#install-button {
	position: absolute;
	display: none;
	font-size: calc(1rem + 2vmin);
	bottom: 1px;
	left: 1px;
}

/* Vertical Screen Orientation */
@media (max-aspect-ratio: 1/1) {
	/*#ui-element-first {
		flex-basis: 1.2rem;
	}*/
}

/* Horizontal Screen Orientation */
@media (min-aspect-ratio: 1/1) {
	#ui-element-first {
		flex-basis: 0;
		flex-grow: 0;
	}
}