@media (min-aspect-ratio: 8.5/11) { /* Aspect ratio larger than 1. */
	html {
		height: 100%;
		width: 100%;
		display: flex;
		align-items: center;
		background: linear-gradient(0deg, #2a2a2a 0%, #4b4b4b 50%, #2a2a2a 100%);
		font-size: calc(1vh * 8.5/11);
	}

	body {
		height: 100%;
		aspect-ratio: 8.5/11;
		margin: auto;
	}
}

@media (max-aspect-ratio: 8.5/11) { /* Aspect ratio less than 1 */
	html {
		height: 100%;
		width: 100%;
		display: flex;
		align-items: center;
		background: linear-gradient(0deg, #2a2a2a 0%, #4b4b4b 50%, #2a2a2a 100%);
		font-size: 1vw;
	}

	body {
		width: 100%;
		aspect-ratio: 8.5/11;
		margin: auto;
	}
}

/** Fonts  */
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: 0.5rem;
}

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

h1 {
	font-size: 4rem;
}

h2 {
	font-size: 1.5rem;
}

#sidebar h3, #sidebar i, .subCircle i {
	font-size: 1.5rem;
}

#mainCont h3 {
	font-size: 1.3rem;
}

/** Placement */
#wrapper {
	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: 20rem;
}

.midCont {
	width: 100%;
}

#mainCont .topCont h1 {
	padding: 8rem 0 0 7rem;
}

#mainCont .topCont h2 {
	padding: 0 0 0 7rem;
	color: #939393;
}

#sidebar .midCont .subsection {
	padding: 0 0 4rem 4rem;
}

#sidebar .midCont .subsection h2 {
	color: #E5E5E5;
	padding: 1rem;
	border-bottom: 0.4rem solid #E5E5E5;
}

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

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

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

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

#sidebar .midCont .subValue h3:nth-child(n+3) {
	grid-column: 2;
	color: #939393;
	padding-left: 1rem;
}

#mainCont .midCont .subsection {
	padding: 0 6.5rem 1.3rem 6.5rem;
	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: 80%;
	aspect-ratio: 1;
	border: 0.25rem solid #1F1F1F;
	border-radius: 50%;
}

.subCircle i {margin: auto;
atcolor: #1F1F1F;
}

#mainCont .midCont .subsection h2 {
	color: #1F1F1F;
	padding: 1.5rem;
	border-bottom: 0.4rem solid #1F1F1F;
}

#mainCont .midCont .subValue {
	padding: 1.1rem 0 0 0;
	display: grid;
	grid-column: 2;
	grid-template-columns: 2fr 9fr;
	grid-template-rows: 1fr;
}

#mainCont .midCont .subsection div:nth-child(3) {
	padding-top: 2rem;
}

#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 {
	grid-column: 2;
	font-style: normal;
}