/* site.css */ @import url('https://fonts.bunny.net/css?family=ibm-plex-sans:300,500'); :root { --color-purple: #8813FF; --color-purple-rgbv: 136, 19, 255; --color-purple-L1: #A042FF; --color-purple-L1-rgbv: 160, 66, 255; --color-purple-L2: #B871FF; --color-purple-L2-rgbv: 84, 113, 255; --color-purple-L3: #CFA1FF; --color-purple-L3-rgbv: 207, 161, 255; --color-purple-L4: #E7D0FF; --color-purple-L4-rgbv: 231, 208, 255; --color-purple-D1: #6D00DB; --color-purple-D1-rgbv: 109, 0, 219; --color-purple-D2: #5200A4; --color-purple-D2-rgbv: 82, 0, 164; --color-purple-D3: #36006E; --color-purple-D3-rgbv: 54, 0, 110; --color-purple-D4: #1B0037; --color-purple-D4-rgbv: 27, 0, 55; --color-black: #111; --color-black-rgbv: 17, 17, 17; } html { background-color: var(--color-purple-D2); background-image: linear-gradient( var(--color-purple-D4), var(--color-purple-D2), var(--color-purple) ); background-attachment: fixed; background-repeat: no-repeat; background-size: 100% 100%; } body { font-family: 'IBM Plex Sans', sans-serif; font-weight: 300; /* Dynamic font size set on to allow access to user's default using rem: */ font-size: clamp(1rem, calc(1rem + (((1.25 - 1) * (100vw - 20rem)) / (74 - 20))), 1.25rem); } /* 320px = 20rem @ 16:1 (px:em) */ /* 1184px = 74rem */ /* 1280px = 80rem */ /* 1360px = 85rem */ /* 1920px = 120rem */