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; color: #222; position: relative; /* animation-timing-function: linear; transition-timing-function: linear; */ } :root { --main-color: #747bef; --base-color: #222; --sec-color-1: #ed7d71; --sec-color-2: #d67772; --sec-color-3: #f5b9eb; --dark-color: #1c3766; } /*................................................... Body */ body { width: 100%; margin: 0px; overflow: hidden; display: flex; flex-direction: column; align-items: center; } header { position: fixed; left: 0; top: 0; width: 100%; z-index: 1000; padding: 40px; display: flex; align-items: center; justify-content: space-between; height: 140px; overflow: hidden; perspective: 500; transition: all .3s ease; } header * { /* transition: all .5s ease;*/ } header.scrolled { padding: 20px; background-color: white; /* box-shadow: 0px 0px 20px -5px rgba(0,0,0,0.4);*/ height: 80px; } #header-controller { position: absolute; width: 100%; height: 15vh; top: 0; left: 0; background: lightgray; } header img { width: 40px; margin-right: 10px; /* transition: all .3s ease;*/ position: relative; top: 0; } header > a { font-family: "Poppins"; border: none; color: inherit; display: flex; align-items: center; font-weight: 900; position: relative; perspective: 500px; transform-style: preserve-3d; } header > a > div { line-height: 16px; font-size: 24px; color: var(--dark-color); /* transition: all .3s ease;*/ } nav { display: flex; align-items: center; color: inherit; } nav > a:not(.social-media-links) { font-size: 16px; font-weight: 500; padding: 10px 15px; background-size: 100%; background-repeat: no-repeat; background-position: -200px 41px; background-image: linear-gradient(90deg, var(--main-color), var(--sec-color-1)); color: inherit; } nav > a:not(.social-media-links):hover { color: var(--sec-color-1); background-position: 0px 41px; } section { display: flex; position: relative; width: 100%; perspective: 500px; padding: 0; margin: 0; height: 100vh; overflow: hidden; } section > div { width: 50%; display: flex; flex-direction: column; align-items: flex-start; perspective: 500px; transform-style: preserve-3d; padding: 60px; position: relative; } section > div p{ width: 350px; color: inherit; } /*############################################# -- Text */ a { text-decoration: none; color: var(--dark-color); border: none; cursor: pointer; font-size: inherit; transition: all .3s ease-out; } a:hover { border: none; } h1, h2, h3, h4 { font-family: "Poppins"; margin-top: 0px; margin-bottom: 15px; width: 100%; line-height: 1.2; color: inherit; font-weight: 700; } h1 { font-size: 42px; } h2 { font-size: 36px; } h3 { } h4 { } p { font-size: 20px; line-height: 1.5; margin-top: 0px; margin-bottom: 20px; color: rgba(0,0,0,0.8); width: 100%; font-weight: 500; } span { font-size: inherit; font-weight: inherit; font-family: inherit; color: inherit; letter-spacing: inherit; line-height: inherit; } span > a { font-size: inherit; font-weight: inherit; font-family: inherit; color: inherit; letter-spacing: inherit; line-height: inherit; border: inherit; border-color: inherit; } span > a:hover { border: inherit; border-color: inherit; } /*###################################################### -- Interactives */ button { border: none; background-color: var(--dark-color); padding: 10px 20px; color: white; cursor: pointer; transition: all .2s ease-out; background-image: linear-gradient(var(--main-color),var(--main-color)); background-repeat: no-repeat; background-position: 0px 67px; } button:hover { background-position: 0px 0px; } 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 -- */ .social-media-links { width: 40px; height: 40px; border-radius: 50%; margin: 5px; display: flex; align-items: center; justify-content: center; color: white; font-size: 18px; background-color: var(--sec-color-1); } #mail { background-color: var(--sec-color-2); } #linkedin { background-color: var(--main-color); } #behance { background-color: var(--dark-color); margin-right: 0; } /*############################################################# -- Hero -- */ .hero-section { background-color: #1b239b; justify-content: space-between; } .hero-section > div:nth-child(1) { } .hero-section > div:nth-child(2) { background-color: white; padding: 25vh 40px 40px 6.2vw; font-size: 2.5vw; display: inline; /* opacity: 0;*/ } .main-text-block { font-size: inherit; max-width: 80%; } .main-text-block a { color: var(--main-color); background-image: linear-gradient(var(--main-color),var(--main-color)); background-position: 0px 3.2vw; background-repeat: no-repeat; } .main-text-block a:hover { color: white; background-position: 0px 0px; padding: 5px 10px; } .main-hero-text { font-size: inherit; font-weight: 500; width: auto; display: inline; } .hero-section img { position: absolute; z-index: -1; } #clouds { min-width: 100%; min-height: 100vh; left: 0px; top: 0px; opacity: 0.2; } #mountains { width: 100%; min-height: 100vh; bottom: -20vh; } .benjamin-image-block { width: 15vw; height: 80vh; position: absolute; bottom: -10px; background-color: var(--sec-color-2); left: 15vw; background-image: url("images/hero-image-ben.jpg"); background-size: cover; opacity: .8; padding: 0; } .benjamin-big-text-block { position: absolute; font-size: 8.5vw; bottom: -50px; left: 5%; font-weight: 900; line-height: 1em; color: white; mix-blend-mode: overlay; filter: drop-shadow(0 0 20px rgba(0,0,0,0.4)); } .main-cta-button { font-size: 24px; padding: 15px 40px; margin-top: 20px; } .main-cta-button:hover { background-image: linear-gradient(var(--main-color),var(--main-color)); background-position: 0px 0px; background-repeat: no-repeat; background-color: var(--dark-color); } /*############################################################# -- My Work -- */ .my-work-section { } .my-work-section > div:nth-child(2) { background-color: var(--sec-color-1); } /* ################################################### Animations*/ /*##################################################################################################### -- Mobile Styles */ @media (max-width: 1200px) { } @media (max-width: 800px) { } @media (max-width: 600px) { } @media (max-width: 430px) { } @media (max-width: 350px) { }