html { width: 100%; overflow-x: hidden; font-display: swap; scroll-behavior: smooth; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-family: Poppins, Helvetica; font-display: swap; font-size: 18px; line-height: 1.5; transition: all .3s ease-out; color: #222; } /*................................................... Body */ body { width: 100%; display: block; margin: 0px; overflow: hidden; } header { width: 100%; padding: 20px 40px; display: flex; align-items: center; justify-content: space-between; } section { display: flex; align-items: center; justify-content: center; padding: 60px 40px; } /*................................................... Text */ a { text-decoration: none; color: #222222; border-bottom: 2px solid #222222; cursor: pointer; font-size: inherit; } a:hover { border-bottom: 4px solid transparent; } h1 { font-size: 60px; margin-top: 0px; margin-bottom: 15px; color: inherit; font-weight: 700; width: 100%; line-height: 1.2; } h2 { font-size: 36px; margin-top: 0px; margin-bottom: 15px; color: #252132; font-weight: 700; width: 100%; line-height: 1.5; } h3 { font-size: 24px; margin-top: 0px; margin-bottom: 10px; color: inherit; text-align: inherit; width: 100%; line-height: 1.5; } h4 { font-size: 18px; margin-top: 0px; margin-bottom: 10px; color: inherit; width: 100%; line-height: 1.5; } p { font-size: 16px; line-height: 1.5; margin-top: 0px; margin-bottom: 20px; color: #48494e; width: 100%; font-weight: 400; } span { font-size: inherit; } /*................................................... Interactives */ button { border: none; background-color: black; padding: 10px 20px; color: white; cursor: pointer; } button:hover { background-color: darkblue; } input, textarea { padding: 15px; border-radius: 5px; border: 1px solid rgba(0,0,0,0.2); margin-bottom: 15px; width: 100%; font-size: 14px; } input:focus { border: 1px solid blue; box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.2); } /*................................................... General classes and IDs */ .container-1200px { width: 100%; max-width: 1200px; display: flex; align-items: flex-start; position: relative; } .column-50 { display: flex; flex-direction: column; width: 50%; } .hero-section { } /*................................................... Nav */ .nav-link-block { font-size: 30px; font-weight: 800; } .nav-link-block:hover { opacity: .5; } .navlink-li { display: inline-block; } .navlink { padding: 10px; margin: 10px; } .hero-subtext { font-size: 24px; font-weight: 500; } .hero-content-link { } .hero-content-link:hover { background-color: #222222; color: white; padding: 5px; } .nav-cta-button { border: 3px solid transparent; } .nav-cta-button:hover { border: 3px solid black; background-color: white; color: black; padding: 10px 25px; } .hamburger { display: none; cursor: pointer; } .hamburger-line { width: 30px; height: 3px; background-color: black; } /*................................................... Hero Section */ .my-name { font-family: "Satisfy"; color: #3C60DE; line-height: 1.05; letter-spacing: -3px; } .linkedin-block { padding: 10px 20px 10px 10px; background-color: #0a66c2; display: flex; align-items: center; border-radius: 100px; } .linkedin-block:hover { padding: 10px 25px 10px 15px; background-color: #0C529B; } .linkedin-profile-pic-block { width: 35px; height: 35px; border-radius: 100px; margin-right: 10px; overflow: hidden; display: flex; align-items: center; justify-content: center; border: 3px solid rgba(255,255,255,0.5); } #my-face { width: 500px; height: 500px; position: relative; margin-top: -40px; } .face-wrapper { width: 500px; height: 500px; position: relative; animation: facehover 3s infinite; animation-timing-function: ease; transform-style: preserve-3d; transition: all .4s ease-out; /* transform: rotate3d(20,-20,0,20deg); rotateX(60deg) rotateY(60deg)*/ } @keyframes facehover { 0% {top:0;} 50% {top:5px;} 100% {top:0;} } .centered-content { display: flex; align-items: center; justify-content: center; } .linkedin-cta-text { font-size: 16px; font-weight: 500; color: white; margin: 0; } /*.................................................................................................................. Mobile Styles */ @media (max-width: 800px) { .column-50 { width: 100%; } .container-1200px { flex-direction: column; } nav { display: none; } .hamburger { display: flex; flex-direction: column; align-items: center; justify-content: space-around; padding: 10px; width: 40px; height: 40px; } .hamburger:hover { padding: 18px 10px; } .hamburger-line { } .hero-section { padding-top: 40px; } #my-face { right: -20vw; } } @media (max-width: 600px) { h1 { font-size: 40px; } .hero-content-link { font-size: 20px; } .linkedin-cta-text { font-size: 14px; } .linkedin-block { padding: 7px 15px 7px 7px; } #my-face { right: -20vw; margin-top: 0; } .face-wrapper { } }