theme.sass

\:root
    --font-primary: Lato, Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'
    --font-display: 'IBM Plex Sans', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'
    --font-code: 'IBM Plex Mono', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace

    // Font Sizes
    --font-size-xs: 1.15rem
    --font-size-sm: 1.3rem
    --font-size-md: 1.5rem
    --font-size-lg: 1.8rem
    --font-size-xl: 2.4rem

    // Line heights
    --line-height: 1.6

    // Colors
    --color-back: #fff
    --color-front: #444
    --color-theme: #09a3d5
    --color-theme-contrast: #fff
    --color-subtle-dark: #777
    --color-subtle-medium: #eee
    --color-subtle-light: #f9f9f9
    --color-background-code: #7a818117

    --color-button-primary: #29c15b
    --color-button-primary-contrast: #fff
    --color-button-secondary: #cdcdd4
    --color-button-secondary-contrast: #686873
    --color-button-danger: #d21313
    --color-button-danger-contrast: #fff

    --color-correct-light: #e3fde8
    --color-correct-dark: #007737
    --color-incorrect-light: #fde7e7
    --color-incorrect-dark: #d21313

    // Syntax Highlighting
    // based on https://github.com/sdras/night-owl-vscode-theme
    --syntax-background: #f7f7f7
    --syntax-text: #403f53
    --syntax-selected-background: #7a81812b
    --syntax-comment: #989fb1
    --syntax-tag: #994cc3
    --syntax-number: #aa0982
    --syntax-selector: #994cc3
    --syntax-operator: #994cc3
    --syntax-function: #4876d6
    --syntax-keyword: #994cc3
    --syntax-regex: #5ca7e4

    --ansi-green: #12dc55
    --ansi-red: #f76464
    --ansi-cyan: #00d8ff

    // Video player
    --plyr-color-main: var(--color-theme)
    --plyr-font-family: var(--font-primary)

    // Sizes
    --width-container: 800px
    --size-profile-pic: 125px
    --border-radius: 5px