/** Font stuff **/
@font-face {
	font-family: 'Montserrat';
	src: url(montserrat.woff2) format('woff2');
}

@font-face {
	font-family: 'Open Sans';
	src: url(opensans.woff2) format('woff2');
}

@font-face {
	font-family: 'Open Sans Condensed';
	src: url(opensanscondensed.woff2) format('woff2');
}

/** A4 Paper Formatting **/

@page { margin: 0 }
body { margin: 0 }
.sheet {
	margin:0;
	overflow: hidden;
	position: relative;
	box-sizing: border-box;
	page-break-after: always;
	width: 210mm; 
	height: 296mm;
	padding: 5mm;
}

@media screen {
	body { background: #E0E0E0 }
	.sheet {
		background: white;
		box-shadow: 0 .5mm 2mm #0004;
		margin-top:1rem;
		margin-left:auto;
		margin-right:auto;
	}
}

@media print {
  body { width: 210mm }
}

@page { size: A4 }

/** Style **/

hr {
	color: #0008;
	width: 66%;
	margin-top: 2em;
	margin-bottom: 2em;
}

body {
    font-family: 'Open Sans', sans-serif;
    color:#000C;
}

ul {
	margin-top: 0.5rem;
}

li {
	list-style:disclosure-closed;
}

.grid {
	display: flex;
	justify-content: space-between;
	height:100%;
}

.col {
	padding:1em;
}

.header {
	font-size:3rem;
	color:white;
	background-color:#0008;
	padding:1.5rem;
    font-family: 'Montserrat', sans-serif;
}

.contact {
	background-color:rgba(0,0,0,.2);
	width:27%;
}

.headshot {
	margin-left:auto;
	margin-right:auto;
	margin-bottom:1.5rem;
	height:200px;
	background:#FFF4;
	/*background-image:url("photo.jpg");*/
	background-size: cover;
	background-position: center;
}

.headshot img {
	width:100%;
	opacity: 0.8;
}

.contact a {
	text-decoration:none;
	color:inherit;
}

.contact ul {
	padding-left:1rem;
}

.contact li {
	margin-bottom:1rem;
}

.section {
	margin-left:auto;
	margin-right:auto;
	padding-bottom:0;
	clear:both;
}

.body {
	width:67%;
}
.title {
	font-family: 'Open Sans Condensed', sans-serif;
	font-size:2rem;
	font-weight:bold;
	display:block;
	margin-bottom:1.2rem;
}
.small {
	font-size:1.24rem;
	margin-top:1.5rem;
	margin-bottom:0.5rem;
}
.twocol {
	width:50%;
	margin-bottom:1em;
	float:left;
}

.threecol {
	width:33%;
	margin-bottom:1em;
	float:left;
}

.threecol:nth-of-type(1), .threecol:nth-of-type(2) {
	border-right:1px solid #0004;
}

.skills div {
	margin-left:1rem;
	clear:both;
	font-family: 'Open Sans Condensed', sans-serif;
	line-height:0.9rem;
}

.skills span {
	margin-left:1rem;
	margin-bottom:1rem;
	display:block;
}

.skills ul { 
	list-style:none;	
	margin:0;
	padding:0;
	padding-right:1rem;
	float:right;
	color:rgba(0,0,0,.5);
	font-size:0.6em;
	position:relative;
}

.skills li {
	display:inline;
	vertical-align:super;
}

.skills li::before {
	content: "";
	display: inline-block;
	border-top: 1px solid #0006;
	border-bottom: 1px solid #0006;
	height: 0.75rem;
	width: 0.5rem;
	box-sizing:border-box;
}

.skill-0 li:nth-child(1)::before, .skill-0 li:nth-child(2)::before, .skill-0 li:nth-child(3)::before, .skill-0 li:nth-child(4)::before, .skill-0 li:nth-child(5)::before,
.skill-1 li:nth-child(2)::before, .skill-1 li:nth-child(3)::before, .skill-1 li:nth-child(4)::before, .skill-1 li:nth-child(5)::before, 
.skill-2 li:nth-child(2)::before, .skill-2 li:nth-child(3)::before, .skill-2 li:nth-child(4)::before, .skill-2 li:nth-child(5)::before, 
.skill-3 li:nth-child(3)::before, .skill-3 li:nth-child(4)::before, .skill-3 li:nth-child(5)::before, 
.skill-4 li:nth-child(3)::before, .skill-4 li:nth-child(4)::before, .skill-4 li:nth-child(5)::before, 
.skill-5 li:nth-child(4)::before, .skill-5 li:nth-child(5)::before, 
.skill-6 li:nth-child(4)::before, .skill-6 li:nth-child(5)::before, 
.skill-7 li:nth-child(5)::before,
.skill-8 li:nth-child(5)::before {
	background: transparent;
} 
 
.skill-1 li:nth-child(1)::before, .skill-3 li:nth-child(2)::before, .skill-5 li:nth-child(3)::before, .skill-7 li:nth-child(4)::before, .skill-9 li:nth-child(5)::before  {
	border-left: 0.3em solid #0002;
	background: transparent;
}

.skill-2 li:nth-child(1)::before,
.skill-3 li:nth-child(1)::before, 
.skill-4 li:nth-child(1)::before, .skill-4 li:nth-child(2)::before, 
.skill-5 li:nth-child(1)::before, .skill-5 li:nth-child(2)::before, 
.skill-6 li:nth-child(1)::before, .skill-6 li:nth-child(2)::before, .skill-6 li:nth-child(3)::before, 
.skill-7 li:nth-child(1)::before, .skill-7 li:nth-child(2)::before, .skill-7 li:nth-child(3)::before, 
.skill-8 li:nth-child(1)::before, .skill-8 li:nth-child(2)::before, .skill-8 li:nth-child(3)::before, .skill-8 li:nth-child(4)::before,
.skill-9 li:nth-child(1)::before, .skill-9 li:nth-child(2)::before, .skill-9 li:nth-child(3)::before, .skill-9 li:nth-child(4)::before,
.skill-10 li:nth-child(1)::before, .skill-10 li:nth-child(2)::before, .skill-10 li:nth-child(3)::before, .skill-10 li:nth-child(4)::before, .skill-10 li:nth-child(5)::before {
	background: #0002;
}

.skills li:first-child::before { 
	border-left:1px solid #0006;
}

.skills li:last-child::before { 
	border-right:1px solid #0006;
}

.skills ul::after {
	content:"";
	left:1em;
	color:black;
	line-height:0.8rem;
	position:absolute;
}


.skill-0 ul:hover::after {
	content:"0/10";
}

.skill-1 ul:hover::after {
	content:"1/10";
}

.skill-2 ul:hover::after {
	content:"2/10";
}

.skill-3 ul:hover::after {
	content:"3/10";
}

.skill-4 ul:hover::after {
	content:"4/10";
}

.skill-5 ul:hover::after {
	content:"5/10";
}

.skill-6 ul:hover::after {
	content:"6/10";
}

.skill-7 ul:hover::after {
	content:"7/10";
}

.skill-8 ul:hover::after {
	content:"8/10";
}

.skill-9 ul:hover::after {
	content:"9/10";
}

.skill-10 ul:hover::after {
	content:"10/10";
}

.skill-10 ul::after {
	left:0.7em;
}

.job {
	margin-left:auto;
	margin-right:auto;
	margin-bottom:2rem;
	padding-left:1rem;
}
.job span:first-child {  /* Date - Company */
	display:block;
	font-size:1.2rem;
	font-family: 'Open Sans Condensed', sans-serif;
	font-weight:bold;
}
.job span:nth-child(2) {  /* Job Description */
	display:block;
	font-size:1.1rem;
	margin-bottom:0.5rem;
	font-family: 'Open Sans Condensed', sans-serif;
}