* {
	box-sizing: border-box;
}

html {
	--dateSpacer: 4px;
}

body {
	margin-top: 0px;
	margin: 0px;
	background-color: black;
	color: #888;
	overflow: hidden;
}

#colorTest {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	font-size: 9px;
	color: white;
	z-index: 9999;
}

#colorTest > div {
	position: relative;
	display: inline-block;
	min-width: 1vw;
	height: 10vh;
	
}

#date-sizes {
	position: fixed;
	top: 20px;
	left: 20px;
	opacity: 0;
}

#date-sizes, #clock-date {	
	font-family: "Bariol Regular";
	font-size: 25px;
	height: 24px;
	line-height: 20px;
}

	#date-sizes > div {
		display: inline-block;
}

#wi-sizer, #wi-span {
	font-family: 'weathericons';
	font-size: 20px;
	padding: 0em var(--dateSpacer);
}

#clock-holder {
  display: grid;
  grid-template-columns: 1fr; /* Single column */
  grid-template-rows: 100vh; /* Full viewport height */
  place-items: center; /* Center both horizontally and vertically */
  user-select: none;
  -webkit-user-select: none;
}

#clock-center {
	position: relative;
	text-align: center;
}

#clock-time-holder, #clock-date-holder {
	display: inline-block;
	position: relative;
}

#clock-time {
	display: inline-block; 
	bottom: 0px;
	font-family: "Bariol Thin";
	height: 100px;
	font-size: 140px;
	line-height: 105px;
	transform-origin: bottom;
}

#clock-date {
	display: inline-block;
	position: relative;
	transform-origin: top;
}

#date-span, #date-sizer {
	padding-left: var(--dateSpacer);
}


#console {
	position: fixed;
	left: 50vw;
	top: 100vh;
	transform: translate(-50%, 5%);
	background-color: #222;
	transition-property: transform, top;
	transition-duration: 0.3s;
	transition-timing-function: ease-out;
}

#console.open {
	top: 50vh;
	transform: translate(-50%, -50%);
}

#console div {
	user-select: none;
	  -webkit-user-select: none;
	display: inline-block;
	margin: 0.5em;
	border-radius: 1em;
	padding: 0.3em 0.5em;
	font-size: 24px;
	background-color: #ccc;
	color: #222;
	font-family: 'Bariol Thin', arial, sans-serif;
	cursor: pointer;
}


#toast {
	position: fixed;
	bottom: 0;
	transform: translateY(100%);
	transition-property: transform;
	transition-duration: 0.15s;
	transition-timing-function: ease-out;
	background-color: #333;
	color: #999;
	font-family: 'Bariol Regular', arial, sans-serif;
	font-size: 6vh;
	padding: 0.4em;
	width: 100%;
	text-align: center;
	
}

#toast.open {
	transform: translateY(0)
}




	#settings {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: green;
  color: black;
  display: grid;
  grid-template-columns: 1fr auto 100px;
  padding: 10px;
}
#label, #location, #gps {
  padding: 5px;
}
#gps {
  justify-self: end;
  width: 100px;
}


	
/* 
#number-test {
	position: fixed;
	font-family: "Bariol Regular";
	top: 20px;
	left: 20px;
	font-size: 100px;
	background: #202020;
}

#cover {
	display: inline-block;
	position: fixed;
	z-index: 999;
	background-color: blue;
	top: 20px;
	right: calc(100vw - 200px);
}
#num {
	display: inline-block;
	position: fixed;
	z-index: 800;
	background-color: orange;
	top: 20px;
	left: 200px
}

#number-test > div {
	display: inline-block;
	margin: 10px;
}

#_0 {
	background-color: pink;
}

#_1 {
	background-color: pink;
}

#_2 {
	background-color: pink;
}

#_3 {
	background-color: pink;
}

#_4 {
	background-color: pink;
}

#_5 {
	background-color: pink;
}

#_6 {
	background-color: pink;
}

#_7 {
	background-color: pink;
}

#_8 {
	background-color: pink;
}

#_9 {
	background-color: pink;
} */