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: Lato, Helvetica; font-display: swap; font-size: 18px; line-height: 1.5; color: #222; } :root { --main-color: #E14646; --base-color: #222; } /*................................................... Body */ body { width: 100%; display: block; margin: 0px; overflow: hidden; /*background-color: #B8FFE1;*/ } header { position: fixed; left: 40px; top: 40px; width: 200px; z-index: 1000; } header > a { font-family: Impact; font-size: 24px; text-transform: uppercase; border: none; letter-spacing: 0px; } nav { margin-top: 20px; display: flex; flex-direction: column; align-items: flex-start; } nav > a { margin-bottom: 10px; font-size: 14px; } nav > a:hover { color: #E14646; } section { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 40px; position: relative; } section > div { width: 960px; display: flex; justify-content: center; } section > div > div{ flex-grow: 1; width: 50%; display: flex; flex-direction: column; } /*................................................... Text */ a { text-decoration: none; color: #222222; border-bottom: 2px solid transparent; cursor: pointer; font-size: inherit; transition: all .3s ease-out; } a:hover { border-bottom: 2px solid #E14646; } h1, h2, h3, h4 { font-family: Impact; margin-top: 0px; margin-bottom: 15px; width: 100%; line-height: 1.2; color: inherit; text-transform: uppercase; } h1 { font-size: 42px; } h2 { font-size: 24px; } h3 { } h4 { } p { font-size: 16px; line-height: 1.5; margin-top: 0px; margin-bottom: 20px; color: inherit; 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 */ .aside-header { position: fixed; top: 40px; right: 40px; display: flex; flex-direction: column; align-items: flex-end; z-index: 1000; } .aside-header > a { font-size: 14px; } .social-media-link-block { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: var(--main-color); margin-top: 10px; } .hero-graphic-wrapper { width: 400px; height: 600px; display: flex; flex-direction: column; align-items: center; margin-right: 50px; } #benjamin-hero-text { font-family: Impact; font-size: 90px; text-transform: uppercase; letter-spacing: -2px; color: var(--main-color); } #toby-hero-text { font-family: Impact; font-size: 180px; text-transform: uppercase; letter-spacing: -4px; color: var(--main-color); line-height: 1; margin-top: -48px; } .hero-graphic-block { width: 350px; height: 300px; background-color: var(--main-color); border-radius: 20px; margin-top: -30px; display: flex; align-items: center; justify-content: center; } .hero-graphic-block > img { position: relative; top: -40px; } .hero-text-wrapper { width: 300px; padding-top: 100px; align-items: flex-start; margin-left: 50px; } .hero-text-wrapper > a { background-color: #393051; color: white; padding: 10px 20px; border-radius: 5px; border: none; transition: all .3s ease; } .hero-text-wrapper > a:hover { background-color: #393051; padding: 12px 23px; } .hero-text-block { font-size: 24px; font-weight: 500; margin-bottom: 40px; } .hero-text-block > h1 { font-size: inherit; color: var(--base-color); display: inline; font-weight: 600; text-transform: none; } .hero-text-block > h1 > span { font-size: inherit; color: var(--main-color); display: inline; font-weight: inherit; border-bottom: 2px solid var(--main-color); cursor: pointer; transition: all .3s ease; } .hero-text-block > h1 > span:hover { padding: 5px 10px; background-color: black; color: white; border-color: #393051; } .hero-watermark { position: absolute; font-size: 30em; font-family: Impact; z-index: -1; top: 20px; left: 50%; transform: translateX(-50%); color: rgba(0,0,0,0.05) } .skewed-bg { position: absolute; width: 100%; height: 400px; transform: skewY(-3deg); background-color: var(--main-color); top: -200px; z-index: -1; } .container-darkbg { color: white; display: flex; align-items: flex-end; text-align: right; } /*.................................................................................................................. Mobile Styles */ @media (max-width: 950px) { } @media (max-width: 800px) { } @media (max-width: 550px) { } @media (max-width: 450px) { } @media (max-width: 350px) { }