http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } HTML5 display-role reset for older browsers article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; padding: 0; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* ^ reset rules ^ */ @import url('https://fonts.googleapis.com/css?family=Lato'); @font-face{ font-family: "SF Text"; font-weight: 100; src: url("https://sf.abarba.me/SF-UI-Text-Ultrathin.otf"); } .headlogo{ display: block; position: relative; width: 30%; padding-bottom: 30%; vertical-align: top; transition: .5s -webkit-filter linear; } .logo:hover { filter: blur(5px); } .logo{ margin-top: 5%; margin-bottom: 5%; display: block; position: absolute; top: 0vh; left: 130%; width: auto; max-width: 80%; margin-left: auto; margin-right: auto; animation-duration: 3s; transition-duration: 3s; } .container{ text-align: center; } body{ background-color: #222222; } .name{ position: relative; margin: auto; font-family: 'San Fransisco', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif; font-weight: 100; font-size: 4.0vw; white-space: nowrap; display: block; text-align:center; color: rgba(146, 172, 206, 1); animation-delay: .3s; } .title{ position: relative; margin: auto; padding-top: .5em; padding-bottom: .5em; font-family: 'San Fransisco', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif; font-weight: 100; font-size: 2.8vw; white-space: nowrap; display: block; text-align:center; animation-delay: .6s; } .links{ animation-delay: .7s; margin:auto; text-align: center; } .links li { width: 30vh; display: inline-block; margin-bottom: auto; } img.mail{ display: inline-block; border: 0 non height: auto; max-width: 10vh; vertical-align: middle; margin-top: 3vh; text-align: center; transition: box-shadow .8s ease; } img.mail:hover{ border-radius: 3px; box-shadow: 0 10px 18px black; } img.behance{ display: inline-block; border: 0 none; height: auto; max-width: 10vh; vertical-align: middle; margin-top: 3vh; margin-bottom: 2px; text-align: center; transition: box-shadow .8s ease; } img.behance:hover{ border-radius: 3px; box-shadow: 0 10px 18px black; } img.linkedin{ display: inline-block; border: 0 none; height: auto; margin-left: auto; margin-right: auto; max-width: 10vh; margin-bottom: 3px; vertical-align: middle; margin-top: 3vh; text-align: center; transition: box-shadow .8s ease; } img.linkedin:hover{ border-radius: 3px; box-shadow: 0 10px 18px black; } img.resume{ display: inline-block; border: 0 none; height: auto; max-width: 7vh; vertical-align: middle; margin-top: 3vh; text-align: center; transition: box-shadow .8s ease; } img.resume:hover{ border-radius: 3px; box-shadow: 0 10px 18px black; } .backg{ background-color:rgba(117, 117, 117, 1); width: 100%; } .centerjust{ text-align: justify; margin: 0 auto; width: 50%; } h1{ font-family: "San Fransisco", -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif; font-weight: 100; } h2{ font-family: "San Fransisco", -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif; font-weight: 100; color: ghostwhite; } p{ color: ghostwhite; font-family: "San Fransisco", -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif; font-weight: 100; font-size: .8em; text-size-adjust: none; -webkit-text-size-adjust: none; max-width: 60vw; animation-delay: .8s; display: inline-block; line-height: 1.2em; text-align:center; text-wrap: balance; padding-bottom: auto; } @media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) { .centerjust{ text-align: justify; margin: auto; width: 100vw; } .logo{ padding-top: 1em; padding-bottom: 2em; width: auto; } h1{ font-size: 1.2em; } h2{ font-size: .8em; } p{ margin: .5em; color: ghostwhite; font-family: "San Fransisco", -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif; font-weight: 100; font-size:1em; display: inline-block; text-align:center; } .name{ padding-top: .5em; font-size: 8.9vw; } .title{ font-size: 4.0vw; margin-bottom: .5em; padding-bottom: .5em; } .mail{ padding-top: 2em; padding-bottom: .1em; margin-top: .1em; margin-bottom: .1em; width: 8vh; } .behance{ padding-top: .1em; padding-bottom: .1em; margin-top: .1em; margin-bottom: .1em; width: 8vh; } .linkedin{ padding-top: .1em; padding-bottom: .1em; margin-top: .1em; margin-bottom: .1em; width: 7vh; } .resume{ padding-top: .1em; padding-bottom: .1em; margin-top: .1em; margin-bottom: .1em; width: 6.5vh; } }