/*
========================================

  		STYLE SHEET FOR CHRONO
              BY KATE G.
  
========================================
*/

* {margin: 0; padding: 0;}


body, html {	
	margin:0;
	padding:0;
	width:100%;
	height:100%;
}

body {
	background-color: #1b6879;
	overflow: hidden;
}

@media (orientation:portrait){
	#container {
	display:flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
	width: 80%;
	margin: 0 auto;
		}
	

	#light {
	z-index: 0;
	width:100%;
	bottom: 10%;
	position: absolute;
	}

	#light svg {
	width: 100%
	height: 100%;
		}

	#analogue_container{
	display:flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	height:70%;
	position: relative;
	}

	#digital_container{
	display:flex;
	flex-direction: column;
	align-items: center;
	height:30%;
	width: 100%;
	position: relative;
		}

	#clock_digital {
	z-index: 1;
	width:75%;
	top: 0;
	position: absolute;
		}

	#clock_digital svg {
	width: 100%
	height: 100%;
		}
	
	#digitime {
	font-family: monospace;
	font-size: 7vw;
	color: white;
	position: absolute;
	top:22%;
	left: 12%;
	z-index: 7;
		}

	#button {
	z-index: 5;
	position: absolute;
	bottom: 5%;
	background: url(img/inputbutton.svg) no-repeat;
	background-size: 100%;
	background-position: center; 
	width: 16vw;
	min-width: 100px;
	border:none;
	color: white;
	font-family: 'Coiny', cursive;
	font-size: 4vmin;
	outline: none;
	}

	#clock_hourmin {
		position: absolute;
		z-index: 3;
		width: 40%;
		height: auto;
		bottom:0;
		left:10%;
	}

	#clock_hourmin svg {
	width: 100%
	height: 100%;
		}
	
	#clock_sec{
		position: absolute;
		z-index: 2;
		width: 55%;
		height: auto;
		bottom:0;
		right:9%;
	}

	#clock_sec svg {
	width: 100%
	height: 100%;
		}
	
	#clock_msec {
		position: absolute;
		z-index: 1;
		transform: rotate(25deg);
		width: 45%;
		height: auto;
		bottom:20%;
		right:35%;
	}

	#clock_msec svg {
	width: 100%
	height: 100%;
		}

	}


	@media (orientation:landscape){
	#container {
	display:flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
	width: 80%;
	max-width: 800px;
	margin: 0 auto;
		}
	
	#analogue_container{
	display:flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	height:70%;
	position: relative;
	}

	#light {
	z-index: 0;
	width:100%;
	bottom: 10%;
	position: absolute;
	}

	#digital_container{
	display:flex;
	flex-direction: column;
	align-items: center;
	height:30%;
	width: 100%;
	position: relative;
		}

#digitime {
	font-family: monospace;
	font-size: 7vw;
	color: white;
	position: absolute;
	top:22%;
	left: 12%;
	z-index: 7;
		}

#button {
	z-index: 5;
	position: absolute;
	left:-8%;
	top: 25%;
	background: url(img/inputbutton.svg) no-repeat;
	background-size: 100%;
	background-position: center; 
	width: 16vw;
	border:none;
	color: white;
	font-family: 'Coiny', cursive;
	font-size: 3vw;
	outline: none;
	vertical-align: middle;
	}

	#clock_digital {
	z-index: 1;
	width:75%;
	top: 0;
	position: absolute;
		}

	#clock_digital svg {
	width: 100%
	height: 100%;
		}

	#button_play {
	z-index: 5;
	width:10%;
	max-width:60px;
	left:0;
	position: absolute;
	}

	#button_play svg {
	width: 100%
	height: 100%;
		}

	#button_pause {
	z-index: 5;
	width:10%;
	max-width:60px;
	left:0;
	bottom:46%;
	margin-top: auto;
	margin-bottom: auto;
	position: absolute;
	}

	#button_pause svg {
	width: 100%
	height: 100%;
		}

	#button_reset {
	z-index: 5;
	width:10%;
	max-width:60px;
	left:0;
	bottom:18%;
	position: absolute;
	}

	#button_reset svg {
	width: 100%
	height: 100%;
		}
	#clock_hourmin {
		position: absolute;
		z-index: 3;
		width: 40%;
		height: auto;
		bottom:0;
		left:10%;
	}

	#clock_hourmin svg {
	width: 100%
	height: 100%;
		}
	
	#clock_sec{
		position: absolute;
		z-index: 2;
		width: 55%;
		height: auto;
		bottom:0;
		right:9%;
	}

	#clock_sec svg {
	width: 100%
	height: 100%;
		}
	
	#clock_msec {
		position: absolute;
		z-index: 1;
		transform: rotate(25deg);
		width: 45%;
		height: auto;
		bottom:20%;
		right:35%;
	}

	#clock_msec svg {
	width: 100%
	height: 100%;
		}

	}