* { margin: 0; padding: 0; box-sizing: border-box; } img { display: block; max-width: 100%; height: auto; } input, button, textarea { font: inherit; } /* || VARIABLES */ :root { /* FONTS */ --FF: "Georgia", serif; --FF-HEADINGS: "Tahoma", sans-serif; --FS: clamp(16px, 2.2vh, 24px); /* COLORS */ --BGCOLOR: #74ACDF; --BGCOLOR-FADE: rgb(246, 180, 14); --BGIMAGE: linear-gradient(to bottom, var(--BGCOLOR), var(--BGCOLOR-FADE)); --FONT-COLOR: #000; --LINK-COLOR: #0C2340; --LINK-HOVER: #F6B40E; --LINK-ACTIVE: #FFFFFF; html { scroll-behavior: smooth; font-size: var(--FS); font-family: var(--FF); background-color: var(--BGCOLOR); background-image: var(--BGIMAGE); } body { background-color: var(--BODY-BGCOLOR); color: var(--FONT-COLOR); min-height: 100vh; max-width: 800px; } h1, h2, h3 { font-family: var(--FF-HEADINGS); letter-spacing: 0.1em; } p { line-height: 1.5; } a:any-link { color: var(--LINK-COLOR); } a:hover, a:focus-visible { color: var(--LINK-HOVER); } a:active { color: var(--LINK-ACTIVE); }