:root { --white: #FFFFFF; --blue: #0055ff; --blue-light: #F1F4FC; --blue-dark: #2F4C9B; --ink: #393C44; --ink-light: #808192; --ink-lighter: #ADAEC4; --grey: #F2F2F2; --grey-light: #FBFBFB; --grey-medium: #e8e8ef; --grey-dark: #E6E6E6; --primary100: #0055ff; --primary80: rgba(0, 85, 255, 0.8); --primary60: #rgba(0, 85, 255, 0.6); --primary40: #rgba(0, 85, 255, 0.4); --primary20: #rgba(0, 85, 255, 0.2); --primary10: #rgba(0, 85, 255, 0.1); --primary5: #rgba(0, 85, 255, 0.05); --primarydark: #0044cc; --secondary100:#393C44; --secondary80: rgba(0, 3, 51, 0.8); --secondary60: rgba(0, 3, 51, 0.6); --secondary40: rgba(0, 3, 51, 0.4); --secondary20: rgba(0, 3, 51, 0.2); --secondary10: rgba(0, 3, 51, 0.1); --secondary5: rgba(0, 3, 51, 0.05); --secondarydark: #00021a; --tertiary: #F2F5F7; --success100: #49C39EFF; --success75: #49C39EBF; --success50: #49C39E80; --success25: #49C39E40; --success10: #49C39E1A; --successdark: #44B492; --deletion100: #F2545BFF; --deletion75: #F2545BBF; --deletion50: #F2545B80; --deletion25: #F2545B40; --deletion10: #F2545B1A; --deletiondark: #CF4046; --darkslate: #1a202c; --slate: #d8d8d8; --lightslate: #f9f9f9; --borderradius: 2px; --borderradiusall: 2px 2px 2px 2px; --fontblack: "Roboto Black"; --fontbold: "Roboto Bold"; --fontsemibold: "Roboto Medium"; --fontnormal: "Roboto"; --fontlight: "Roboto Light"; --bodytext: var(--fontnormal) "regular" var(--secondary100) 16pt; --bigbodytext: var(--fontnormal) "regular" var(--secondary100) 20pt; --smallbodytext: var(--fontnormal) "regular" var(--secondary100) 12pt; --lightbodytext: "regular" "normal" 16pt var(--fontnormal); --heavybodytext: var(--fontbold) "regular" var(--secondary100) 16pt; --quotation: var(--fontnormal) "italics" var(--darkslate) 16pt; --smallheavybodytext: var(--fontbold) "regular" var(--secondary100) 14pt; --background-button: #f9f9f9; --button-text: #0055ff; } html, body { display: grid; font-family: var(--fontnormal); color: var(--secondary80); padding: 0; margin: 0; height:100%; width:100%; } #app { height: 100%; } h1 { font-family: var(--fontblack); font-size: 36pt; color: var(--secondary100); } h2 { font-family: var(--fontbold); font-size: 30pt; color: var(--secondary100); } h3 { font-family: var(--fontbold); font-size: 24pt; color: var(--secondary60); } h4 { font-family: var(--fontbold); font-size: 18pt; color: var(--ink); } h5 { font-family: var(--fontblack); font-size: 14pt; color: var(--secondary100); } h5 { font-family: var(--fontblack); font-size: 12pt; color: var(--darkslate); } textarea { font-family: var(--fontnormal); } .hoverable:hover { cursor: pointer; }