@media (prefers-color-scheme: light) {
	html, body{
		background-color: #cfcbcb;
	}  
	h1, h2, h3, h4, h5, a, ul, li, p, label{
		color:#454545;
	}
}

@media (prefers-color-scheme: dark) {
	html, body{
		background-color: #222;
	}  
	h1, h2, h3, h4, h5, a, ul, li, p, label{
		color:#cfcbcb;
	}
}

@media only screen and (min-width: 200px) {
	html, body{
		margin:0px;
		padding:0px;
		margin-top:0px;
	}
	
	h1, h2, h3, h4, h5, a, ul, li{
		font-family: 'Hind', sans-serif;
		margin:0px;
		padding:0px;
	}
	
	p, ul, li, label{
		font-family: 'Roboto', sans-serif;
		font-size: 1.2rem;
		font-weight: 300;
		line-height: 1.6em;
		margin:0px;
		padding:0px;
		max-width: 700px;
	}
	ul{
		margin-bottom: 20px;
	}
	
	ul li{
		margin-left: 25px;
		margin-bottom: 10px;
	}
	
	ul ul li{
		margin-left: 50px;
		margin-bottom: 10px;
	}

	
	h1{ 
		font-size: 3.5rem;
		line-height: 1em;
		margin:22px 0px;
	}
	
	h2{
		font-size: 1.4rem;
		margin-top:-10px;
		margin-bottom: 20px;
		max-width: 500px;
		line-height: 1.2em;
	}
	
	h3{
		font-size: 1.3em;
		text-transform: uppercase;
	}
	
	
	h2 a, p a{
		text-decoration: none;
	}
	
	h2 a:hover, h2 a:focus , h2 a:active, p a:hover, p a:focus , p a:active, a:active > .button, a:focus > .button{
		outline: 3px solid #ddda19;
		background-color: #ddda19;
		color:#454545;
	}
	
	a{
		text-decoration: none;
		width:auto;
		height:auto;
	}
	
	a:active, a:focus{
		outline:none;	
	}
	
	header, section{
		width:auto;
		padding-left:20px;
		padding-right:20px;
		padding-top:20px;
		padding-bottom:10px;
		margin:0px;
	}
	
	.profile-photo{
		width:200px;
		height:200px;
		background-image: url('headshot-back-sm.jpg');
		background-size: auto 100%;
		border-radius:10px;
		background-position: center center;
		display: block;
	}
	
	input[type=password]{
		width: 90%;
		max-width: 500px;
		display: block;
		height: 50px;
		border: 2px solid #454545;
		border-radius: 0px;
		margin-bottom:25px;
		margin-top:5px;
		padding: 0px 10px;
		font-size: 24px;
	}
	.button, input[type=button]{
		width:auto;
		height:auto;
		padding:15px 50px;
		border: none;
		color: white;
		background-color: #ffdf3c;
		background-color: #454545;
		text-decoration: none;
		text-transform: lowercase;
		text-align: center;
		font-size: 1.2em;
		margin-right:20px;
		margin-left:0px;
		margin-bottom: 20px;
		display: inline-block;
	}
	
	.button:hover, .button:active, .button:focus, input[type=button]:hover, input[type=button]:active, input[type=button]:focus{
		outline:5px solid #ddda19;
		background-color: #ddda19;
		color:#454545;
		cursor: pointer;
	}
	
	input[type=password]:hover, input[type=password]:active, input[type=password]:focus{
		outline:5px solid #ddda19;
		background-color: white;
		color:#454545;
	}

	.sr-only {
	  position: absolute;
	  width: 1px;
	  height: 1px;
	  padding: 0;
	  margin: -1px;
	  overflow: hidden;
	  clip: rect(0,0,0,0);
	  border: 0;
	}
	.push-bottom{
		margin-bottom: 20px;
	}
	.push-bottom-large{
		margin-bottom: 40px;
	}
	.push-bottom-x-large{
		margin-bottom: 60px;
	}
	.section-highlight-1{
		background-color: #f5f5e3;
	}
}

@media only screen and (min-width: 1200px) {
	html, body{
		margin-top:30px;
	}
	
	h1{ 
		font-size: 5em;
		line-height: 1.5em;
	}
	
	h2{
		font-size: 2em;
		margin-top: 20px;
		max-width: 100%;
	}
	
	header, section{
		padding-left: 50px;
		padding-top:10px;
		padding-bottom:30px;
		margin:0px;
		width:80%;
		max-width:1000px;
	}
	.profile-photo{
		width:220px;
		height:220px;
		border-radius:10px;
	}
	
	input[type=password]{
		width:50%;
	}
}