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; } }