body { color: #000000; background: #EEEEEE; font: 1.1em "Times New Roman"; line-height: 1.2; margin: 40px 0; } #resume, footer { background: #FFFFFF; border: 1px solid #CCCCCC; box-shadow: 2px 2px 4px #AAAAAA; -webkit-box-shadow: 2px 2px 4px #AAAAAA; } #social > a { display: block; max-width: 2em; } #social { padding: 20px 30px; display: flex; flex-direction: row; flex-wrap: wrap; } #social a, #social a:link, #social a:visited { color: #000; text-decoration: underline; } #social a { margin: 0 1em 0 0; } #social a:hover { color: #444; text-decoration: underline; } #resume { max-width: 800px; padding: 40px 60px; } footer { max-width: 925px; } #resume, footer { margin: 0 auto; } h1 { text-transform: uppercase; text-align: center; font-size: 150%; margin: 0; padding: 0; } h2 { border-bottom: 1px solid #000000; text-transform: uppercase; font-size: 130%; margin: 1.0em 0 0 0; padding: 0; } h3 { font-size: 100%; margin: 0.8em 0 0.3em 0; padding: 0; display: flex; justify-content: space-between; } h3 > div:nth-child(1) { flex: 1; padding: 0 2em 0 0; } h3 > div:nth-child(2) { flex: none; } p { margin: 0 0 0.5em 0; padding: 0; } ul { padding: 0; margin: 0 1.5em; } /* ul immediately after h1 = contact list */ h1 + ul { text-align: center; margin: 0; padding: 0; } li { margin: .5em 0 0 0; } h1 + ul > li { margin: initial; display: inline; white-space: pre; list-style-type: none; } h1 + ul > li:after { content: " \2022 "; } h1 + ul > li:last-child:after { content: ""; } /* p immediately after contact list = summary */ h1 + ul + p { margin: 1em 0; } footer { display: flex; flex-direction: row; flex-wrap: wrap; } footer > div { flex: 2; min-width: 20em; } #thanks { flex: 1; text-align: center; font-style: italic; opacity: 75%; display: flex; align-items: center; justify-content: center; } @media print { body { font-size: 12pt; margin: 0; padding: 0; background: none; } #resume { margin: 0; padding: 0; border: 0px; background: none; box-shadow: none; -webkit-box-shadow: none; } /* Make links black in PDF */ /* Move this outside the print block to apply this in HTML too */ a, a:link, a:visited, a:hover { color: #000000; text-decoration: underline; } /* ul:not(:nth-child(2)) > li:nth-child(1), ul:not(:nth-child(2)) > li:nth-child(2) { display: list-item; } ul:not(:nth-child(2)) > li, */ footer { display: none; } } @page { /* Change margins and paper size of PDF */ /* https://developer.mozilla.org/en-US/docs/Web/CSS/@page */ size: letter; margin: 0.5in 0.8in; } @media screen and (max-width: 800px) { body { font-size: 16pt; margin: 0; padding: 0; background: #FFFFFF !important; } #resume { margin: 0; padding: 1em; border: 0px; background: none; box-shadow: none; -webkit-box-shadow: none; } }