html, 
body {height:100%; padding:0; margin:0; width:100%;font-family:montserrat;}

@font-face {
	font-family: '7segments';
	src: url('7segments-webfont.woff2') format('woff2'),
		url('7segments-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;

}



@media only screen and (min-width: 901px) {

	h2 {
		font-size: 40px;
		color: #C41011;
		font-weight: bold;
		margin: 5px;
	}

	h3 {
		font-size: 28px;
		margin: 5px
	}


	#clockheader td {
		vertical-align: middle;
	}

	.container{
		height:100%;
		width: 100%;
		display: flex;
		justify-content: center;
		align-content: center;
	}

	#display{
		margin:auto;
		font-size: 72px;
		font-family:montserrat;


	}

	#controls {
		position: absolute;
		left:1%;
		bottom:40px;
		text-align: center;
		background-color: #dbdbdb;
		border-radius: 10px;
		padding:25px;
		font-size:18px;
		min-width:350px;

	}


	#controltable {
		text-align: center;
		padding:3px;
		width:100%;
	}

	#controltable td {
		padding:5px;
		width:50%;
	}

	.controlbutton {
		font-family: montserrat;
		font-size: 16px;
		background-color: #C41011;
		color:#ffffff;
		padding:5px;
		border-radius:10px;
		width:80%;
	}
	.updownbutton {
		font-family: montserrat;
		font-size: 18px;
		font-weight:bold;
		background-color: #C41011;
		color:#ffffff;
		padding:2px 8px;
		border-radius:5px;
	}

	input[type=time] {
		width:80%;
		font-size:18px;
		padding:3px;
		border-radius:5px;
	}


	#styling {
		position:absolute;
		right:1%;
		top: 118px;
		text-align:center;
		background-color: #dbdbdb;
		border-radius: 10px;
		padding:20px;
		font-size:18px;
		max-width:450px;
	}

	#stylingtable {
		text-align: center;
		padding:3px;
		width:100%;
	}

	#stylingtable  td {
		padding:3px;
		width:50%;
	}

	#stylingtable  th {
		color: #C41011;
		padding:3px;
		width:50%;
	}

	input[type=number] {
		max-width:50%;
		font-size:16px;
		font-family:montserrat;
		padding:3px;
		border-radius:5px;
		text-align:center;
	}
	input[type=text] {
		max-width:40%;
		font-size:16px;
		font-family:montserrat;
		padding:3px;
		border-radius:5px;
		text-align:center;
	}

	input[type=color] {
		max-width:50%;
		padding:3px;
		border-radius:5px;
	}

	select  {
		font-size:16px;
		font-family:montserrat;
		padding:3px;
		border-radius:5px;
		text-align:center;
	}
	
	#mobilewarning{
		display:none;
	}
	
	#mobilestartstop {
		display:none;
	}

}


@media only screen and (max-width: 900px) {
	
	#mobilewarning {
		display:block;
		position:fixed;
		top:10%;
		left:10%;
		right: 10%;
		background-color: #c2c2c2;
		border-radius: 20px;
		text-align: center;
		padding:5%;
		overflow:auto;
		z-index:1;
		
	}
	
	#mobilestartstop {
		display:block;
		position:fixed;
		width:100%;
		text-align:center;
		bottom: 50px;
	}

	#styling {
		display: none;
	}
	
	#controls {
		display:none;
	}
	
	.container{
		height:100%;
		width: 100%;
		display: flex;
		justify-content: center;
		align-content: center;
	}
	
	#display{
		margin:auto;
		font-size: 72px;


	}
	
	.mobilebutton {
		font-size:20px;
		font-weight:bold;
		padding:6px 24px;
		text-decoration:none;
		text-shadow:0px 1px 0px #ccc;
		background-color:#c41011;
		border-radius:28px;
		border:1px solid #2e2e2e;
		display:inline-block;
		cursor:pointer;
		color: white;

	}
	
}