:root {
	--accent:#8a14b6;

	--max-width:36rem;

	--fs-pct:clamp(50%, calc(50% + (100vw - 650px) * 0.125), 100%);
	--fs:1.1rem;
	--lh:1.6rem;
	--fs-logo:2.6rem;
	--lh-logo:3rem;
	--fs-h1:2rem;
	--lh-h1:2.2rem;
	--fs-h2:1.6rem;
	--lh-h2:1.8rem;
}

            @font-face { /* latin */
              font-family: 'Mulish';
              font-style: normal;
              font-weight: 200 900;
              font-display: swap;
              src: url(fonts/1Ptvg83HX_SGhgqk3wotYKNnBQ.woff2) format('woff2');
              unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
            }

html { width:100%; height:100%; scroll-behavior:smooth; font-size:var(--fs-pct); }

body {
	font-family:Mulish, sans-serif; color:#222;
	padding:0; margin:0; line-height:0; width:100%; height:100%;
	display:flex; justify-content:center; align-items:center;
	background:linear-gradient(130deg, oklch(0.7672 0.0272 278.6 / 30%) 30%, oklch(0.6729 0.0411 323.29 / 30%) 69.33%);
}

main {
	padding:2.5rem; border-radius:3rem; max-width:var(--max-width);
	font-size:var(--fs); line-height:var(--lh);
	background:oklch(1 0 0 / 55%); box-shadow:0 3px 5px oklch(0 0 0 / 25%);
}

div.logo { font-weight:bold; font-size:var(--fs-logo); line-height:var(--lh-logo); letter-spacing:1px; }
span.accent { color:var(--accent); }
span.email { font-weight:600; }
div.logo span.accent { font-weight:bold; }
div.last { margin-top:1.3rem; }
section.hero { margin:4rem 0; }
h1 { font-size:var(--fs-h1); font-weight:bold; line-height:var(--lh-h1); }
h2 { font-size:var(--fs-h2); font-weight:bold; line-height:var(--lh-h2); }
a { color:var(--accent); text-decoration:none; } 
            
@media (max-width: 660px) {
	:root { --fs:1.3rem; --max-width:40rem; }
}
 
@media (max-height: 550px) {
	:root { --fs-pct:clamp(50%, calc(50% + (100vh - 550px) * 0.125), 100%); --max-width:80vw; }
}