body { font: 400 16px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif; color: #111111; background-color: #fdfdfd; font-size: 16px; margin: 0px auto 0px auto; line-height: 24px; } header { border-bottom: 2px solid #999999; margin-bottom: 30px; padding: 12px 0px 12px 0px; } nav { text-align: right; } nav a, nav a:visited { color: #111111; margin-left: 12px; } .hs { float: right; margin: 10px; } a { color: #2a7ae2; text-decoration: none } a:visited { color: #1756a9 } a:hover { color: #111; text-decoration: underline } footer { display: flex; justify-content: space-between; border-top: solid 2px #999999; color: #555; font-size: 12px; margin-top: 30px; padding: 12px 0px 12px 0px; } footer ul { list-style-type: none; padding: 0; display: flex; } footer .fab { color: #555; font-size: 16px; margin: 0 10px 0 0; text-decoration: none; } footer .fab:hover { color: #111; } h1, h2, h3, h4, h5, h6 { font-weight: 400; margin: 20px 0 5px 0; } h1 { font-size: 24px; } h2 { font-size: 20px; } ul { margin: 0; } p { margin: 8px 0; } article .header { color: #555; font-size: 14px; font-style: italic; } .logo a { color: #666666; float: left; font-size: 18px; font-weight: bold; text-decoration: none; } .resume { display: block; } @media all and (max-width: 649px) { body { margin: 20px; } .logo { display: flex; margin: 0 0 15px 0; } .logo a { float: none; margin: auto; } nav { text-align: center; } .hs { float: none; } .resume { width: auto; height: auto; } } @media all and (min-width: 650px) { body { width: 600px; } .resume { width: 100%; height: 818px; } } @media all and (min-width: 800px) { body { width: 750px; } .resume { width: 100%; height: 1010px; } }