:root{
	--warm-white: #f9f8f4;
	--light-blue: #cad6df;
	--dark-blue: #070e4d;
	--medium-grey: #555;
	--dark-grey: #333;
	--darker-grey: #222;
}

h1{font-size: 175%;}
h2{font-size: 150%;}
h3{font-size: 135%;}
h4{font-size: 115%;}
h5{font-size: 100%;}
.subheader{
	font-size:80%;display: block;
}
.tal{text-align: left;}
.tac{text-align: center;}
.tar{text-align: right;}
a, a:visited{
	color: var(--dark-blue);text-decoration:none
}
a:hover{color: #000}
.print-only{display: none;}

@media (prefers-color-scheme: dark){
	a, a:visited{color: var(--light-blue)}
	a:hover{color: #fff}
}

h1, h2, h3, h4, h5{
	line-height: normal;
	margin: 0;
}

body{
	font-family: 'Montserrat', sans-serif;
	background: #000;
}

.header{
	background: var(--light-blue);
	color: #000;
}

.header h1{
	margin-top: 15px;
}

.header h2{
	font-size: 135%
}

.header hr{
	margin:10px 0;
}

.header img.headshot{
	width: 90%;
	height: auto;
	padding: 10px;
	border-radius: 50%;
	margin: 5% auto;
}

.masthead{
	background: var(--dark-blue);
	color: var(--warm-white);
	line-height: 50px;
}

.masthead a{
	color: var(--warm-white);
	text-decoration: none;
	padding: 5px;
}

.masthead a:hover{
	background: #ebebeb;
	color: var(--dark-blue);
}

.main{
	background: var(--warm-white);
}

@media (prefers-color-scheme: dark){
	.main{
		background: var(--dark-grey);
		color: var(--warm-white);
	}
}

.main ul{
	list-style-type: square;
}

@media (prefers-color-scheme: dark){
	.main ul{
		color: var(--warm-white);
	}
}

.main h2{
	margin: 20px 0;
	color: var(--dark-blue);
	border-bottom: 3px solid var(--dark-blue);
}

@media (prefers-color-scheme: dark){
	.main h2{
		color: var(--light-blue);
		border-bottom: 3px solid var(--light-blue);
	}
}

.main .experience-section .experience-header {
	margin-bottom: 10px;
}

.main .experience-section li{
	padding-bottom: 12px;
}

.main .experience-section li:first-child{
	padding-top:10px;
}

.dates-location{
	text-align: right;
	font-style: italic;
}

.main .experience-section h5{
	padding-bottom: 10px;
}

.main .experience-section .technology-used{
	display: block;
	font-style: italic;
}

.main ul.projects{
	font-size:90%;
	margin: 0 0 0 15px;
	padding: 0;
}

table.skills {
	background-color: #eee
}

table.skills tr th, table.skills tr td{
	padding: 5px 10px;
} 

table.skills tr th:last-child, table.skills tr td:last-child{
	text-align: center;
} 

table.skills tr:last-child td{
	border:none;
}

@media (prefers-color-scheme: dark){
	table.skills {
		background: var(--darker-grey);
		color: var(--warm-white);
	}
	
	table.skills tr th{
		font-weight:normal;
	}

	table.skills tr:nth-of-type(odd) td{
		background: var(--medium-grey);
		color: var(--warm-white);
	}
}

.apis a{
	text-decoration:none;
}

.apis .badge{
	background: var(--dark-blue);
}

#Contact_Form{font-size:90%;}
.contact #Message{min-height:100px;}
.contact .g-recaptcha{margin-top:10px;}

.web-contact{
	text-align:right;
	margin-top:-22px;
}

.web-contact a{
	padding-left:10px;
	color:var(--dark-blue);
}

@media (max-width: 1400px) {
	.web-contact{
		font-size: 80%;
	}
}

@media (max-width: 1200px) {
	.sites .col-md-6{
		width:95%;
		margin-left:4%;
	}
}

@media (max-width: 992px) {
	.masthead{
		font-size: 85%;
	}
}

@media (max-width: 767px) {
	.headshot{
		display: none;
	}
	.masthead .tal, .masthead .tac, .masthead .tar{
		text-align: left;
	}
	.masthead{
		line-height: 30px;
	}
	.desktop{
		display: none
	}
	.dates-location{
		text-align: left;
		font-style: italic;
	}
}

@media (max-width: 576px) {
	.header .float-end{
		float:none!important;
		clear:both;
	}
	.header  .web-contact{
		margin:0;
		padding:0;
		text-align: left;
	}
	.web-contact a:first-child{
		padding-left:0px;
	}
}

@media print {
	@page{
	  	size: 8.5in 11in portrait;
	}
	.print-only{
		display: block;
		padding: 0 2%;
	}
	.screen-only{
		display: none;
	}
	body, .header, .main{
		font-family: 'Noto Sans', sans-serif;
		font-size:15px;
		background: #fff;
	}
	a, a:visited{
		text-decoration:none;
		color: var(--dark-blue);
	}
	a:hover{
		color:#000;
	}
	.subhead{
		font-size:50%
	}
	.container{
		max-width:100%;
	}
	.header, .masthead, .main{
		padding: 1% 2%;
	}
	.masthead{
		line-height: normal;
		font-size:110%;
	}
	.masthead, .masthead a, .masthead a:visited{
		color: var(--warm-white);
	}
	.main .experience-section ul, .main .experience-section ul li:last-child{
		margin-bottom: 0;
		padding-bottom: 0;
	}
}