/* global */ a { color:#55a4ff; } h1 { font-size: 68px; font-family: 'Source Sans Pro', sans-serif; } h2 { font-size: 24px; font-weight: 600; font-style: normal; font-stretch: normal; line-height: normal; letter-spacing: normal; color: #000000; border-left: 2px solid #55a4ff; text-indent: 16px; left:-16px; position:relative; margin-top: 50px; line-height: 24px; font-family: 'Source Sans Pro', sans-serif; } h3 { font-size:14px; line-height: 22px; font-weight: 600; } p { font-size:14px; font-family: 'Source Sans Pro', sans-serif; } /* reusable sections */ .white { margin-bottom: 40px; } .grey { background-color:#f3f4f6; padding-bottom: 40px; border-bottom: 1px solid #dddddd; } /* sections */ #header { height: 596px; color:#ffffff; font-size: 18px; background: #55a4ff; background-image: linear-gradient(131deg, #55a4ff, #6e67ff); /* fallback */ background-image: url("../img/blocks.png"), linear-gradient(131deg, #55a4ff, #6e67ff); /* W3C */ background-repeat: no-repeat; background-position: right; } #block { position: absolute; top: 502px; right:26px; } #header h1 { font-weight: 700; margin-bottom: 30px; } .logo { margin-top:57px; margin-bottom: 57px; } #about .icon { margin-top: 54px; margin-bottom: 29px; } .developer { height:90px; } .developer .headshot { width: 60px; height: 60px; } .developer .headshot img { border-radius: 30px; height: 100%; width: 100%; margin-right: 20px; } .developer p { margin-left: 20px; margin-top:8px; } .developer a { font-weight:600; color:#000; display: block; } #projects { padding: 1px; /* not sure why I need this */ padding-bottom: 40px; } #projects .logo { margin-bottom: 20px; } .news { padding:40px 40px 40px 0px; } .news a { color:#000; } #footer { background-image: linear-gradient(to bottom, #454545, #000000); padding-top: 40px; padding-bottom:60px; } #footer h1 { font-size: 20px; color:#ffffff; margin-bottom: 20px; margin-top:20px; } #footer img { margin-top: 10px; margin-bottom:10px; } #footer a { font-size: 14px; margin-right: 20px; padding:10px; } /* media queries */ /* Large devices (desktops, less than 1200px) */ @media (max-width: 1199.98px) { } /* Medium devices (tablets, less than 992px) */ @media (max-width: 991.98px) { h1 { font-size: 54px; } } /* Small devices (landscape phones, less than 768px) */ @media (max-width: 767.98px) { h1 { font-size: 44px; } } /* Extra small devices (portrait phones, less than 576px) */ @media (max-width: 575.98px) { h1 { font-size: 34px; } }