* { margin: 0; padding: 0; } body { background: #FFF; color: $text-color; font-family: $font-1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { text-decoration: none; color: $text-color; } li { list-style-type: square; padding-left: 0px; list-style-position: inside; margin: 8px 0; } .resumeCanvas { margin: 2.5rem auto; padding: 0 0.45in 0.5in 0.45in; width: 8.25in; height: 11.75in; background-color: #FFF; -moz-box-shadow: 2px 2px 10px #aaa; -webkit-box-shadow: 2px 2px 10px #aaa; box-shadow: 2px 2px 10px #aaa; box-sizing: border-box; } .gridParent { width: 100%; height: 100%; display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(6, 1fr); grid-column-gap: 0px; grid-row-gap: 0px; } .flex-row{ display: flex; flex-direction: row; justify-content: space-between; } .titleHeader { display: flex; flex-direction: column; justify-content: center; font-family: $font-1; h1 { font-size: 64px; color: $text-color; letter-spacing: 0.15rem; } } header { grid-area: 1 / 1 / 2 / 8; border-bottom: $border-color 1px solid; } .leftSide { grid-area: 2 / 1 / 7 / 6; display: flex; flex-direction: column; justify-content: flex-start; border-right: $border-color 1px solid; padding-right: 16px; } .rightSide { grid-area: 2 / 6 / 7 / 8; display: flex; flex-direction: column; justify-content: flex-start; margin-left: 8px; li { list-style-type: none; padding: 0; } } .leftSide, .rightSide { margin-top: 12px; font-size: 14px; h1, h2, h3 { line-height: 1.2; } h1 { margin-bottom: 16px; font-size: 24px; } h2 { font-size: 20px; margin-bottom: 4px; } h3 { font-size: 16px; } p { font-size: 14px; margin: 8px 0; line-height: 1.5; text-align: justify; } }