homepage/resume/main.css

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

h1, h2, h3, h4 {
	margin: 0;
}

h1 {
	font-family: 'Josefin Sans', sans-serif;
	font-weight: 700;
}

h2 {
	font-family: 'Josefin Sans', sans-serif;
	font-weight: 400;
	letter-spacing: 4px;
}

h3 {
	font-family: 'Dosis', sans-serif;
	font-weight: 300;
}

#wrapper {
	overflow-x: hidden;
	overflow-y: auto;
	display: grid;
	grid-template-columns: 3fr 7fr;
	height: 100%;
	width: 100%;
}

#sidebar {
	height: 100%;
	grid-column: 1;
	grid-row: 1;
	background-color: #1F1F1F;
}

#mainCont {
	height: 100%;
	grid-column: 2;
	grid-row: 1;
	background-color: #E5E5E5;
}

.topCont {
	width: 100%;
	height: 20vw;
}

.midCont {
	width: 100%;
}

#mainCont .topCont h1 {
	padding: 13% 0 0 10%;
	font-size: 220%;
}

#mainCont .topCont h2 {
	padding: 0 0 0 10%;
	font-size: 75%;
	color: #939393;
}

#sidebar .midCont .subsection {
	padding: 0 0 10% 10%;
}

#sidebar .midCont .subsection h2 {
	color: #E5E5E5;
	padding: 3%;
	border-bottom: 4px solid #E5E5E5;
}

#sidebar .midCont .subsection .subValue {
	display: grid;
	padding: 2.5% 0 2.5% 0;
	grid-template-columns: 15fr 75fr;
	grid-template-rows: 1fr 1fr;
}

#sidebar .midCont .subsection div:nth-child(2) {
	padding-top: 5%;
}

#sidebar .midCont .subValue i {
	grid-column: 1;
	grid-row: 1/3;
	color: #E5E5E5;
	margin: auto;
	font-size: 120%;
}

#sidebar .midCont .subValue h3:nth-child(2) {
	grid-column: 2;
	grid-row: 1;
	color: #E5E5E5;
	font-size: 90%;
	padding-left: 5%;
}

#sidebar .midCont .subValue h3:nth-child(n+3) {
	grid-column: 2;
	color: #939393;
	font-size: 90%;
	padding-left: 5%;
}

#mainCont .midCont {
	font-size: 50%;
}

 #sidebar .midCont {
 	font-size: 80%;
 }

#mainCont .midCont .subsection {
	padding: 0 10% 2% 10%;
	display: grid;
	grid-template-columns: 1fr 9fr;
	grid-template-rows: 1fr;
}

#mainCont .midCont .subsection .subCircle {
	display: grid;
	grid-column: 1;
	grid-row: 1;
	margin: auto;
	width: 4vw;
	height: 4vw;
	border: 3px solid #1F1F1F;
	border-radius: 50px	
}

.subCircle i {
	margin: auto;
	color: #1F1F1F;
	font-size: 140%;
}

#mainCont .midCont .subsection h2 {
	color: #1F1F1F;
	padding: 3%;
	border-bottom: 4px solid #1F1F1F;
}

#mainCont .midCont .subValue {
	padding: 2.5% 0 0 0;
	display: grid;
	grid-column: 2;
	grid-template-columns: 2fr 8fr;
	grid-template-rows: 1fr;
}

#mainCont .midCont .subValue h3:nth-child(1) {
	grid-column: 1;
	grid-row: 1;
	color: #939393;
}

#mainCont .midCont .subValue h3:nth-child(2) {
	grid-column: 2;
	font-weight: 700;
	font-style: bold;
}

#mainCont .midCont .subValue h3:nth-child(3) {
	grid-column: 2;
	font-style: italic;
}

#mainCont .midCont .subValue h3:nth-child(4) {
	grid-column: 2;
	font-style: normal;
}

#mainCont .midCont .subLine {
	background-color: #1F1F1F;
	margin: auto;
	height: 100%;
	width: 4px;
}

#mainCont .midCont .subLine i {
	color: #1F1F1f;
	margin: 0 auto 0 auto;
	padding: 10%;
}

@media print {
	
	.subsection div{ page-break-before: always; }
}