@font-face { font-family: Raleway; src: url("/Raleway.ttf"); font-display: swap; } html { --accent: #b59bd8; --accent-translucent: #b59bd898; --font-primary: Raleway; --font-header: Raleway; } html.dark { --primary: #151515; --secondary: #252525; --tertiary: #353535; --text: #ffffffde; --grey: #5454547a; } html.light { --primary: #dddddd; --secondary: #f9f3f3; --tertiary: #939393; --text: #444444; --grey: #444444; --accent: #8c68bb; } body { font-family: var(--font-primary); background-color: var(--primary); color: var(--text); margin: 0; display: flex; flex-direction: column; position: relative; min-height: 100vh; line-height: 1.625; transition: all .25s; } ::selection { background-color: var(--accent-translucent); } main { padding: 1rem; } a { text-decoration: underline; color: var(--accent); text-underline-offset: 5px; transition: filter 0.25s; } a:hover { filter: brightness(125%); }