* { box-sizing: border-box; } html, body { width: 100%; height: 100%; padding: 0; margin: 0; } /* ----- general --------------- */ a { color: #1606a3; } .dim { opacity: 0.6; } /* ----- page template --------------- */ body { background: linear-gradient( 75deg, rgb(158 200 244) 20%, #3b77b5 50%, rgb(16 81 155) 80% ); } #root { width: 100%; max-width: 1000px; min-height: 100%; margin: auto; font-family: "Roboto Slab"; color: #03020c; display: flex; flex-flow: column nowrap; background-image: url("/assets/photo_mael_weyland.jpg"); background-size: cover; background-position: 50% 60%; } #root > header { padding: 1em 2em 2em; border-bottom: 1px solid #dcdcdc55; background-color: #ffffff88; backdrop-filter: blur(10px); } #root > header > h1 { font-family: "DM Serif Text"; } #root > header > h1 > a { color: inherit; text-decoration: none; } #root > header > h1 .subtitle { padding-left: 0.6em; font-size: 1.1rem; font-weight: 400; font-style: italic; opacity: 0.8; } #root > header > nav { padding: 0 1em; font-size: 1.1em; display: flex; flex-flow: row wrap; align-items: center; justify-content: start; gap: 1.2em; } #root > main { width: 100%; max-width: 700px; padding: 2em; margin: 0 auto; background-color: #ffffff77; flex-grow: 1; } #root > footer { padding: 1.5em; border-top: 1px solid #dcdcdc55; background-color: #ffffff88; backdrop-filter: blur(10px); text-align: center; } /* ----- responsive font size --------------- */ @media only screen and (max-width: 600px) { body { font-size: 14px; } } @media only screen and (max-width: 380px) { body { font-size: 12px; } } @media only screen and (max-width: 300px) { body { font-size: 10px; } }