commit bf90f6f1d2624dbd2d2c5f9b2388d70f186b3898
Author: ronny abraham <ronny.abraham@ymail.com>
Date:   Wed Nov 27 02:08:59 2024 +0200

    initial commit

diff --git a/_fonts/_fira-mono.sass b/_fonts/_fira-mono.sass
new file mode 100644
index 0000000..ea6d96b
--- /dev/null
+++ b/_fonts/_fira-mono.sass
@@ -0,0 +1,17 @@
+@font-face
+  font-family: 'Fira Mono'
+  src: url('../fonts/fira-mono/FiraMono-Regular.ttf') format('truetype')
+  font-weight: normal
+  font-style: normal
+
+@font-face
+  font-family: 'Fira Mono'
+  src: url('../fonts/fira-mono/FiraMono-Medium.ttf') format('truetype')
+  font-weight: 500
+  font-style: normal
+
+@font-face
+  font-family: 'Fira Mono'
+  src: url('../fonts/fira-mono/FiraMono-Bold.ttf') format('truetype')
+  font-weight: bold
+  font-style: normal
diff --git a/_fonts/_jost.sass b/_fonts/_jost.sass
new file mode 100644
index 0000000..46003db
--- /dev/null
+++ b/_fonts/_jost.sass
@@ -0,0 +1,13 @@
+@font-face
+  font-family: 'Jost'
+  src: url('../fonts/jost/static/Jost-Regular.ttf') format('truetype')
+  font-weight: normal
+  font-style: normal
+
+@font-face
+  font-family: 'Jost'
+  src: url('../fonts/jost/static/Jost-Bold.ttf') format('truetype')
+  font-weight: bold
+  font-style: normal
+
+// Add other weights as needed
diff --git a/_fonts/_kanit.sass b/_fonts/_kanit.sass
new file mode 100644
index 0000000..f5bcd79
--- /dev/null
+++ b/_fonts/_kanit.sass
@@ -0,0 +1,13 @@
+@font-face
+  font-family: 'Kanit'
+  src: url('../fonts/kanit/Kanit-Regular.ttf') format('truetype')
+  font-weight: normal
+  font-style: normal
+
+@font-face
+  font-family: 'Kanit'
+  src: url('../fonts/kanit/Kanit-Bold.ttf') format('truetype')
+  font-weight: bold
+  font-style: normal
+
+// Add other weights as needed
diff --git a/_fonts/_lora.sass b/_fonts/_lora.sass
new file mode 100644
index 0000000..64e12b5
--- /dev/null
+++ b/_fonts/_lora.sass
@@ -0,0 +1,27 @@
+// File: _lora.sass
+
+@font-face
+  font-family: 'Lora'
+  src: url('../fonts/lora/static/Lora-Regular.ttf') format('truetype')
+  font-weight: normal
+  font-style: normal
+
+@font-face
+  font-family: 'Lora'
+  src: url('../fonts/lora/static/Lora-Bold.ttf') format('truetype')
+  font-weight: bold
+  font-style: normal
+
+@font-face
+  font-family: 'Lora'
+  src: url('../fonts/lora/static/Lora-Italic.ttf') format('truetype')
+  font-weight: normal
+  font-style: italic
+
+@font-face
+  font-family: 'Lora'
+  src: url('../fonts/lora/static/Lora-BoldItalic.ttf') format('truetype')
+  font-weight: bold
+  font-style: italic
+
+// Add more weights and styles if need
diff --git a/_fonts/_prompt.sass b/_fonts/_prompt.sass
new file mode 100644
index 0000000..ab991e9
--- /dev/null
+++ b/_fonts/_prompt.sass
@@ -0,0 +1,13 @@
+@font-face
+  font-family: 'Prompt'
+  src: url('../fonts/prompt/Prompt-Regular.ttf') format('truetype')
+  font-weight: normal
+  font-style: normal
+
+@font-face
+  font-family: 'Prompt'
+  src: url('../fonts/prompt/Prompt-Bold.ttf') format('truetype')
+  font-weight: bold
+  font-style: normal
+
+// Add other weights as needed
diff --git a/_fonts/_roboto.sass b/_fonts/_roboto.sass
new file mode 100644
index 0000000..33637a7
--- /dev/null
+++ b/_fonts/_roboto.sass
@@ -0,0 +1,13 @@
+@font-face
+  font-family: 'Roboto'
+  src: url('../fonts/roboto/Roboto-Regular.ttf') format('truetype')
+  font-weight: normal
+  font-style: normal
+
+@font-face
+  font-family: 'Roboto'
+  src: url('../fonts/roboto/Roboto-Bold.ttf') format('truetype')
+  font-weight: bold
+  font-style: normal
+
+// Add other weights as needed
diff --git a/_fonts/_source-code-pro.sass b/_fonts/_source-code-pro.sass
new file mode 100644
index 0000000..dcf01d4
--- /dev/null
+++ b/_fonts/_source-code-pro.sass
@@ -0,0 +1,34 @@
+// File: _source-code-pro.sass
+
+@font-face
+  font-family: 'Source Code Pro'
+  src: url('../fonts/source-code-pro/static/SourceCodePro-Regular.ttf') format('truetype')
+  font-weight: normal
+  font-style: normal
+
+@font-face
+  font-family: 'Source Code Pro'
+  src: url('../fonts/source-code-pro/static/SourceCodePro-Bold.ttf') format('truetype')
+  font-weight: bold
+  font-style: normal
+
+@font-face
+  font-family: 'Source Code Pro'
+  src: url('../fonts/source-code-pro/static/SourceCodePro-Light.ttf') format('truetype')
+  font-weight: 300
+  font-style: normal
+
+@font-face
+  font-family: 'Source Code Pro'
+  src: url('../fonts/source-code-pro/static/SourceCodePro-Italic.ttf') format('truetype')
+  font-weight: normal
+  font-style: italic
+
+@font-face
+  font-family: 'Source Code Pro'
+  src: url('../fonts/source-code-pro/static/SourceCodePro-SemiBold.ttf') format('truetype')
+  font-weight: 600
+  font-style: normal
+
+// Extend this pattern as needed for other weights and styles
+
diff --git a/_fonts/_work-sans.sass b/_fonts/_work-sans.sass
new file mode 100644
index 0000000..4a064f4
--- /dev/null
+++ b/_fonts/_work-sans.sass
@@ -0,0 +1,13 @@
+@font-face
+  font-family: 'Work Sans'
+  src: url('../fonts/work-sans/static/WorkSans-Regular.ttf') format('truetype')
+  font-weight: normal
+  font-style: normal
+
+@font-face
+  font-family: 'Work Sans'
+  src: url('../fonts/work-sans/static/WorkSans-Bold.ttf') format('truetype')
+  font-weight: bold
+  font-style: normal
+
+// Add other weights as needed
diff --git a/_mixins.sass b/_mixins.sass
new file mode 100644
index 0000000..4eb62ff
--- /dev/null
+++ b/_mixins.sass
@@ -0,0 +1,40 @@
+@use "sass:map"
+
+// this file contains the mixins
+
+@mixin toggle-section-numbers($header, $toggle)
+  @if $toggle == true
+    #{$header} > span[class^="section-number"]:first-of-type
+      display: inline // Uses the default display for the header
+  @else
+    #{$header} > span[class^="section-number"]:first-of-type
+      display: none
+  @endif
+
+@mixin remove-section-number($element)
+  #{$element} > span[class^="section-number"]:first-of-type 
+    display: none
+
+// @mixin set-header-color($header-color)
+//   h1, h2, h3, h4, h5, h6
+//     color: $header-color
+
+@mixin set-header-colors($header-colors)
+  @each $header, $size in $header-colors
+    #{$header}
+      color: #{$size}
+
+@mixin set-header-sizes($header-sizes)
+  @each $header, $size in $header-sizes
+    #{$header}
+      font-size: #{$size}
+
+@mixin adjust-header-size($scale-factor, $header-sizes)
+  @each $header, $size in $header-sizes
+    #{$header}
+      font-size: calc(#{$scale-factor} * #{$size})
+
+// Function to return the font size from the $header-styles map
+@function get-header-property($element, $property)
+  $element-styles: map.get($header-styles, $element) // Get the styles for the element
+  @return map.get($element-styles, $property) // Return the requested property value
diff --git a/_tables.sass b/_tables.sass
new file mode 100644
index 0000000..74d0511
--- /dev/null
+++ b/_tables.sass
@@ -0,0 +1,43 @@
+// Quotes Table Style
+.quotes
+  border-collapse: collapse
+  width: 8em // Set the width to 8em for a much shorter table
+  margin: 20px 0
+  border: none // Ensure no borders are applied to the table
+
+  td
+    padding: 10px 0
+    vertical-align: top
+    border: none // Remove borders between rows
+
+  td:first-child
+    text-align: left
+    font-weight: bold
+
+  td:last-child
+    text-align: right
+    font-style: italic
+    &:before
+      content: '“'
+    &:after
+      content: '”'
+
+
+// Thin Table for Calls/Username with Side Borders Only
+.thin-table
+  width: auto
+  border: solid $table-header-bg
+  
+  border-spacing: 0
+  margin: 15px 0
+  font-size: 14px
+
+  th
+    font-weight: bold
+
+  th, td
+    padding: 12px 16px  /* Increased padding for more width */
+    text-align: center
+
+    border-left: 1px solid $table-border-color
+    border-right: 1px solid $table-border-color
diff --git a/_variables.sass b/_variables.sass
new file mode 100644
index 0000000..ada1dbd
--- /dev/null
+++ b/_variables.sass
@@ -0,0 +1,38 @@
+@use "sass:map"
+
+// Import the chosen theme (dark or light)
+// Or 'themes/light'
+@import 'themes/dark' 
+
+// Shared Table Style Variables
+$table-padding: 10px
+$code-border-radius: 5px
+$list-padding-left: 20px
+
+// Link Style Mixins
+@mixin link-primary
+  color: $link-color-primary
+  text-decoration: none
+
+  &:hover
+    color: darken($link-color-primary, 10%)
+    text-decoration: underline
+
+@mixin link-secondary
+  color: $link-color-secondary
+  text-decoration: underline
+
+  &:hover
+    color: lighten($link-color-secondary, 10%)
+
+@mixin link-inverse
+  color: $inverse-link-color
+  background-color: $link-color-primary
+  padding: 2px 4px
+  text-decoration: none
+  border-radius: 3px
+
+  &:hover
+    background-color: darken($link-color-primary, 10%)
+    color: $inverse-link-hover-color
+
diff --git a/_youtubevars.sass b/_youtubevars.sass
new file mode 100644
index 0000000..bdfc1c9
--- /dev/null
+++ b/_youtubevars.sass
@@ -0,0 +1,32 @@
+@use "sass:map"
+
+$primary-color: #f5f5f5
+$secondary-color: #f5f5f5
+$tertiary-color: #f5f5f5
+$quaternary-color: #c5b06a
+
+$text-color: #f5f5f5
+$background-color: #343434
+
+$primary-font: "Times"
+$secondary-font: "Roboto"
+
+// Header Sizes and Colors Map
+$header-styles: (h1: (size: 2em, color: $primary-color, border-size: 2px))
+$header-styles: map.set($header-styles, h2, (size: 1.5em, color: $secondary-color, border-size: 2px))
+$header-styles: map.set($header-styles, h3, (size: 1.0em, color: $tertiary-color, border-size: 1px))
+$header-styles: map.set($header-styles, h4, (size: 1.0em, color: $quaternary-color, border-size: 1px))
+
+
+// Colors
+$anchor-color: #ff8800
+$anchor-hover-color: #ffcc00
+
+// Header Sizes
+// $default-header-sizes: (h1: 2em, h2: 1.5em, h3: 1em, h4: 1em, h5: 1.1em, h6: 1em)
+
+// Margins
+$first-anchor-margin-left: 2em
+
+
+$playlist-header-color: #00e5ff
diff --git a/business.sass b/business.sass
new file mode 100644
index 0000000..7fa8105
--- /dev/null
+++ b/business.sass
@@ -0,0 +1,107 @@
+@import 'variables'
+@import 'fonts'
+@import 'mixins'
+
+// Base body styles
+body
+  font-family: $primary-font
+  font-size: 16px
+  line-height: 1.6
+  color: $text-color
+  background-color: $background-color
+
+// Headers
+@each $header, $props in $header-styles
+  #{$header}
+    font-family: $secondary-font
+    font-weight: bold
+    color: map-get($props, color)
+    font-size: map-get($props, size)
+    margin-top: 20px
+    margin-bottom: 10px
+
+// Default Link Style (Primary)
+a
+  @include link-primary
+
+// Specific Link Styles
+a.secondary
+  @include link-secondary
+
+a.inverse
+  @include link-inverse
+
+h4 a
+  margin-left: 2em
+  @include link-secondary
+
+// Tables
+table
+  width: 100%
+  border-collapse: collapse
+  margin: 20px 0
+  font-size: 14px
+
+th, td
+  padding: $table-padding
+  text-align: left
+  border-bottom: 1px solid $table-border-color
+
+th
+  background-color: $table-header-bg
+  color: white
+
+tr:nth-child(even)
+  background-color: lighten($table-border-color, 20%)
+
+// Special Classes
+.positives-negatives
+  th, td
+    text-align: center
+    padding: 12px
+  tr:nth-child(even)
+    background-color: lighten($tertiary-color, 30%)
+  th
+    background-color: $tertiary-color
+    color: white
+
+.tax-bracket
+  th, td
+    padding: 8px
+    text-align: right
+  th
+    background-color: $primary-color
+    color: white
+
+.ip-recap
+  th, td
+    padding: 10px
+    text-align: left
+  th
+    background-color: $quaternary-color
+    color: white
+
+// Code Blocks
+pre, code
+  background-color: $code-bg-color
+  padding: 10px
+  border-radius: $code-border-radius
+  font-family: $primary-font
+  color: $code-font-color
+  overflow-x: auto
+  font-size: 14px
+
+// Lists
+ul, ol
+  margin-left: $list-padding-left
+  padding-left: $list-padding-left
+  list-style-position: inside
+
+li
+  margin-bottom: 5px
+
+img
+  width: 20em
+
+div#postamble
+  border-color: $tertiary-color
diff --git a/collapsible.sass b/collapsible.sass
new file mode 100644
index 0000000..f5ba439
--- /dev/null
+++ b/collapsible.sass
@@ -0,0 +1,20 @@
+h4
+  cursor: pointer
+  &:after
+    content: "▸"
+    font-size: 0.8em
+    margin-left: 10px
+    transition: transform 0.2s
+
+  &.active:after
+    transform: rotate(90deg)
+
+div.outline-text-4
+  display: block
+
+  .playlist, .notes, .contents
+    display: none
+
+    &.active
+      display: block
+
diff --git a/compsci.sass b/compsci.sass
new file mode 100644
index 0000000..3d112af
--- /dev/null
+++ b/compsci.sass
@@ -0,0 +1,113 @@
+@import 'variables'
+@import 'themes/heb_dark'
+
+@import 'fonts'
+@import 'mixins'
+
+@import 'tables'
+
+@warn "the value of $primary-font is #{$primary-font}"
+
+// Base body styles
+body
+  font-family: $primary-font
+  font-size: 16px
+  line-height: 1.6
+  color: $text-color
+  background-color: $background-color
+
+// Headers
+@each $header, $props in $header-styles
+  #{$header}
+    font-family: $secondary-font
+    font-weight: bold
+    color: map-get($props, color)
+    font-size: map-get($props, size)
+    margin-top: 20px
+    margin-bottom: 10px
+
+// Default Link Style (Primary)
+a
+  @include link-primary
+
+// Specific Link Styles
+a.secondary
+  @include link-secondary
+
+a.inverse
+  @include link-inverse
+
+h4 a
+  margin-left: 2em
+  @include link-secondary
+
+// Tables
+table
+  width: 100%
+  border-collapse: collapse
+  margin: 20px 0
+  font-size: 14px
+
+th, td
+  padding: $table-padding
+  text-align: left
+  border-bottom: 1px solid $table-border-color
+
+th
+  background-color: $table-header-bg
+  color: white
+
+tr:nth-child(even)
+  background-color: lighten($table-border-color, 20%)
+
+// Special Classes
+.positives-negatives
+  th, td
+    text-align: center
+    padding: 12px
+  tr:nth-child(even)
+    background-color: lighten($tertiary-color, 30%)
+  th
+    background-color: $tertiary-color
+    color: white
+
+.tax-bracket
+  th, td
+    padding: 8px
+    text-align: right
+  th
+    background-color: $primary-color
+    color: white
+
+.ip-recap
+  th, td
+    padding: 10px
+    text-align: left
+  th
+    background-color: $quaternary-color
+    color: white
+
+// Code Blocks
+pre, code
+  background-color: $code-bg-color
+  padding: 10px
+  border-radius: $code-border-radius
+  font-family: $primary-font
+  color: $code-font-color
+  overflow-x: auto
+  font-size: 14px
+
+// Lists
+ul, ol
+  margin-left: $list-padding-left
+  padding-left: $list-padding-left
+  list-style-position: inside
+
+li
+  margin-bottom: 5px
+
+img
+  width: 20em
+
+div#postamble
+  border-color: $tertiary-color
diff --git a/course_listings.sass b/course_listings.sass
new file mode 100644
index 0000000..2a3641f
--- /dev/null
+++ b/course_listings.sass
@@ -0,0 +1,149 @@
+@import 'themes/course_listings/dark'
+@import 'mixins'
+@import './collapsible.sass'
+
+@include toggle-section-numbers(h4, false)
+@include remove-section-number(h2)
+
+// @include set-header-sizes($default-header-sizes)
+// @include set-header-color($text-color)
+
+// Base body styles
+body
+  font-family: $primary-font
+  font-size: 16px
+  line-height: 1.6
+  color: $text-color
+  background-color: $background-color
+
+// Headers
+@each $header, $props in $header-styles
+  #{$header}
+    font-family: $secondary-font
+    font-weight: bold
+    color: map-get($props, color)
+    font-size: map-get($props, size)
+    margin-top: 20px
+    margin-bottom: 10px
+
+div#postamble
+  border-color: $text-color
+
+a
+  color: $anchor-color
+  text-decoration: none
+
+  &:hover
+    color: $anchor-hover-color
+    border-bottom-color: $anchor-hover-color
+    text-decoration: underline
+
+h2
+  margin-top: 1.5em
+
+h3
+  margin-top: 2em
+  margin-left: 1em
+  border-bottom: solid 1px get-header-property(h3, 'color')
+
+
+h3 + .outline-text-3 p
+  margin-top: 0
+
+h3 + .outline-text-3 p > a:first-of-type
+  font-size: 1em
+  margin-left: $first-anchor-margin-left
+
+h4
+  text-transform: uppercase
+  padding-left: 2em
+  margin-top: 0
+
+h4 + .outline-text-4 ol, h4 + .outline-text-4 ul
+  padding-left: 4em
+
+  a
+    color: #a19581
+    text-decoration: none
+
+    &:hover
+      color: #ffad42  // A warm, light orange that pairs well with the yellow marker
+      border-bottom-color: #ffad42
+      text-decoration: underline
+
+  li
+    &::marker
+
+      color: #8b872b
+      font-size: 1.2em
+      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3)
+
+    b
+      font-family: arial-black
+      font-size: .7em
+      text-transform: uppercase
+      padding-left: 2em
+      
+      color: #c5b06a
+
+ul.notes
+  list-style-type: square
+  padding-left: 3em
+
+  ul.desc-link
+    li
+      margin-bottom: .2em // Add space between list items
+
+
+      > a
+        display: block
+
+
+ul.explanation
+  list-style-type: none
+  margin-left: 2em
+  margin-top: 0
+  margin-bottom: 1.5em
+
+  li
+
+    color: darken($primary-color, 10)
+    font-weight: bold
+    font-family: $secondary-font
+    text-transform: uppercase
+    font-size: .9rem
+
+    a
+      text-transform: none
+      font-weight: normal
+      color: $anchor-secondary-color
+
+      &:hover
+        color: $anchor-secondary-hover-color
+/*
+    &:not(a)
+      color: darken($primary-color, 10)
+      font-weight: bold
+      font-family: $secondary-font
+      text-transform: lowercase
+
+ul.toc
+  list-style-type: none
+  padding-left: 2em
+  margin-top: 0
+  margin-bottom: 0
+
+  li
+    a
+      text-transform: uppercase 
+      font-weight: bold
+      font-size: 1rem
+      font-family: $secondary-font
+      color: $tertiary-color
+      color: lighten($quinary-color, 5)
+      text-transform: uppercase
+
+      &:hover
+        color: lighten($quinary-color, 10)
+      &::after
+        content: " Notes"
diff --git a/fonts.sass b/fonts.sass
new file mode 100644
index 0000000..9e4df1f
--- /dev/null
+++ b/fonts.sass
@@ -0,0 +1,26 @@
+@use "sass:map"  // Import the map module
+
+// Include each partial for font definitions
+@use '_fonts/fira-mono'
+@use '_fonts/jost'
+@use '_fonts/kanit'
+@use '_fonts/prompt'
+@use '_fonts/work-sans'
+@use '_fonts/roboto'
+@use '_fonts/source-code-pro'
+@use '_fonts/lora'
+
+// Define a map for font families
+$font-families: ('fira-mono': 'Fira Mono')
+$font-families: map.set($font-families, 'roboto', "Roboto")
+$font-families: map.set($font-families, 'jost', "Jost")
+$font-families: map.set($font-families, 'kanit', "Kanit")
+$font-families: map.set($font-families, 'lora', "Lora")
+$font-families: map.set($font-families, 'source-code-pro', "Source Code Pro")
+$font-families: map.set($font-families, 'prompt', "Prompt")
+$font-families: map.set($font-families, 'work-sans', "Work Sans")
+$font-families: map.set($font-families, 'arial', "Arial, sans-serif")
+$font-families: map.set($font-families, 'arial-black', '"Arial Black", Gadget, sans-serif')
+
+@mixin font-family($font-name)
+  font-family: map-get($font-families, $font-name)
diff --git a/graphics.sass b/graphics.sass
new file mode 100644
index 0000000..c6ed025
--- /dev/null
+++ b/graphics.sass
@@ -0,0 +1,151 @@
+@import 'variables'
+@import 'fonts'
+@import 'mixins'
+@import 'themes/dark_graphics'
+
+// Base body styles
+body
+  font-family: $primary-font
+  font-size: 16px
+  line-height: 1.6
+  color: $text-color
+  background-color: $background-color
+
+// Headers
+@each $header, $props in $header-styles
+  #{$header}
+    font-family: $secondary-font
+    font-weight: bold
+    color: map-get($props, color)
+    font-size: map-get($props, size)
+    margin-top: 20px
+    margin-bottom: 10px
+
+@include remove-section-number(h2)
+
+h1
+  padding: 1em
+
+div.outline-2
+  padding: 1em 0
+
+div#table-of-contents
+
+  h2
+    font-size: get-header-property(h2, size) + .1em
+    border: none
+
+h2
+  border-top: dashed $secondary-color 1px
+  text-transform: uppercase
+
+// Default Link Style (Primary)
+a
+  @include link-primary
+
+// Specific Link Styles
+a.secondary
+  @include link-secondary
+
+a.inverse
+  @include link-inverse
+
+// Tables
+table
+  width: 100%
+  border-collapse: collapse
+  margin: 20px 0
+  font-size: 14px
+
+th, td
+  padding: $table-padding
+  text-align: left
+  border-bottom: 1px solid $table-border-color
+
+th
+  background-color: $table-header-bg
+  color: white
+
+tr:nth-child(even)
+  background-color: lighten($table-border-color, 20%)
+
+// Special Classes
+.positives-negatives
+  th, td
+    text-align: center
+    padding: 12px
+  tr:nth-child(even)
+    background-color: lighten($tertiary-color, 30%)
+  th
+    background-color: $tertiary-color
+    color: white
+
+.tax-bracket
+  th, td
+    padding: 8px
+    text-align: right
+  th
+    background-color: $primary-color
+    color: white
+
+.ip-recap
+  th, td
+    padding: 10px
+    text-align: left
+  th
+    background-color: $quaternary-color
+    color: white
+
+// Code Blocks
+pre, code
+  background-color: $code-bg-color
+  padding: 10px
+  border-radius: $code-border-radius
+  font-family: $primary-font
+  color: $code-font-color
+  overflow-x: auto
+  font-size: 14px
+
+// Lists
+ul, ol
+  margin-left: $list-padding-left
+  padding-left: $list-padding-left
+  list-style-position: inside
+
+li
+  margin-bottom: 5px
+
+img
+  width: 20em
+
+div#postamble
+  border-color: $tertiary-color
+
+h3
+  margin-left: 1em
+
+h4
+  margin-left: 2em
+
+h4 a
+  margin-left: 2em
+  @include link-secondary
+
+.outline-text-3
+  p
+    margin-left: 1em
+    padding-left: 1em
+
+/*
+  .org-ol > li::marker
+    color: green
+    font-weight: bold
+  
+  .org-ol > li::first-line
+    color: green
+    font-weight: bold
+ */
+
+// .outline-4
+//   margin-left: 2em
+
diff --git a/org-mode.sass b/org-mode.sass
new file mode 100644
index 0000000..8f5724d
--- /dev/null
+++ b/org-mode.sass
@@ -0,0 +1,94 @@
+@import 'fonts'
+@import 'variables'
+@import 'themes/light'
+@import 'mixins'
+@import 'tables'
+
+
+// Base styles
+body
+  line-height: 1.6
+  color: $primary-color
+  background-color: $background-color
+  padding: 1em
+  max-width: 800px
+  margin: 0 auto
+
+// Headers
+@each $header, $props in $header-styles
+  #{$header}
+    font-family: $secondary-font
+    font-weight: bold
+    color: map-get($props, color)
+    font-size: map-get($props, size)
+
+    margin-top: 1.5em
+    margin-bottom: 0.5em
+    line-height: 1.2
+
+    text-transform: capitalize
+
+h3
+  text-transform: uppercase
+
+
+// remember to use toggle!
+@include remove-section-number(h3)
+@include remove-section-number(h4)
+
+p
+  margin-bottom: 1em
+
+a
+  @include link-primary
+
+a.secondary
+  @include link-secondary
+
+a.inverse
+  @include link-inverse
+
+
+ul, ol
+  margin-bottom: 1em
+  padding-left: 1.5em
+
+li
+  margin-bottom: 0.5em
+
+blockquote
+  border-left: 4px solid $secondary-color
+  padding-left: 1em
+  color: $secondary-color
+  margin: 1.5em 0
+
+pre, code
+  font-family: "Courier New", monospace
+  background-color: $code-bg-color
+  padding: 0.2em 0.4em
+  border-radius: 3px
+
+pre
+  padding: 1em
+  overflow-x: auto
+
+table
+  width: 100%
+  border-collapse: collapse
+  margin-bottom: 1em
+
+th, td
+  border: 1px solid $table-border-color
+  padding: 0.5em
+  text-align: left
+
+th
+  background-color: lighten($background-color, 10%)
+  font-weight: bold
+
+
+div#postamble
+  border-top: dashed 1px black
+  margin-top: 3em
+  padding-top: 1em
+
diff --git a/pickup.sass b/pickup.sass
new file mode 100644
index 0000000..20eb3b4
--- /dev/null
+++ b/pickup.sass
@@ -0,0 +1,202 @@
+@import 'variables'
+@import 'themes/dark_scarlet'
+
+@import 'fonts'
+@import 'mixins'
+
+@import 'tables'
+
+@warn "the value of $primary-font is #{$primary-font}"
+
+// Base body styles
+body
+  font-family: $primary-font
+  font-size: 16px
+  line-height: 1.6
+  color: $text-color
+  background-color: $background-color
+
+// Headers
+@each $header, $props in $header-styles
+  #{$header}
+    font-family: $secondary-font
+    font-weight: bold
+    color: map-get($props, color)
+    font-size: map-get($props, size)
+    margin-top: 20px
+    margin-bottom: 10px
+
+// Default Link Style (Primary)
+a
+  @include link-primary
+
+// Specific Link Styles
+a.secondary
+  @include link-secondary
+
+a.inverse
+  @include link-inverse
+
+a
+  color: $link-color-primary
+  text-decoration: underline
+
+  &:hover
+    color: $link-color-secondary // Bold pinkish-red on hover
+
+h4 a
+  margin-left: 2em
+  @include link-secondary
+
+// Tables
+table
+  width: 100%
+  border-collapse: collapse
+  margin: 20px 0
+  font-size: 14px
+
+th, td
+  padding: $table-padding
+  text-align: left
+  border-bottom: 1px solid $table-border-color
+
+th
+  background-color: $table-header-bg
+  color: white
+
+tr:nth-child(even)
+  background-color: lighten($table-border-color, 20%)
+
+// Special Classes
+.positives-negatives
+  th, td
+    text-align: center
+    padding: 12px
+  tr:nth-child(even)
+    background-color: lighten($tertiary-color, 30%)
+  th
+    background-color: $tertiary-color
+    color: white
+
+.tax-bracket
+  th, td
+    padding: 8px
+    text-align: right
+  th
+    background-color: $primary-color
+    color: white
+
+.ip-recap
+  th, td
+    padding: 10px
+    text-align: left
+  th
+    background-color: $quaternary-color
+    color: white
+
+// Code Blocks
+pre, code
+  background-color: $code-bg-color
+  padding: 10px
+  border-radius: $code-border-radius
+  font-family: $primary-font
+  color: $code-font-color
+  overflow-x: auto
+  font-size: 14px
+
+// Lists
+ul, ol
+  margin-left: $list-padding-left
+  padding-left: $list-padding-left
+  list-style-position: inside
+
+li
+  margin-bottom: 5px
+
+img
+  width: 20em
+
+div#postamble
+  border-color: $tertiary-color
+
+
+@include toggle-section-numbers(h3, true)
+
+h3
+  margin-left: 1em
+  a
+    font-size: 90%
+    text-decoration: underline
+    text-underline-offset: 4px
+
+
+table
+  width: 100%
+  border-collapse: collapse
+  margin: 20px 0
+  color: $text-color
+
+  th
+    background-color: $table-header-bg
+    color: $text-color
+
+  td
+    border: 1px solid $table-border-color
+    padding: 10px
+
+  tr:nth-child(even)
+    background-color: lighten($table-header-bg, 5%)
+
+
+ul, ol
+  margin: 1em 0
+  padding-left: 1.5em
+  list-style-position: inside
+  font-size: 1rem
+  line-height: 1.6
+
+// Unordered List
+ul
+  list-style-type: disc
+
+  li
+    margin-bottom: 0.5em
+    &:before
+      content: '•'
+      color: $primary-color
+      font-weight: bold
+      display: inline-block
+      width: 1em
+      margin-left: -1.5em
+
+// Ordered List
+ol
+  list-style-type: decimal
+
+  li
+    margin-bottom: 0.5em
+    &:before
+      color: $secondary-color
+      font-weight: bold
+
+// Nested Lists
+ul ul, ol ol, ul ol, ol ul
+  margin-top: 0.5em
+  margin-left: 1em
+  list-style-type: circle
+
+  li
+    margin-bottom: 0.25em
+
+// Special Class for Inline Lists
+.inline-list
+  list-style-type: none
+  margin: 0
+  padding: 0
+  display: flex
+  flex-wrap: wrap
+  gap: 1em
+
+  li
+    display: inline
+
diff --git a/themes/_dark.sass b/themes/_dark.sass
new file mode 100644
index 0000000..62bf9de
--- /dev/null
+++ b/themes/_dark.sass
@@ -0,0 +1,33 @@
+@use "sass:map"
+
+// Color Variables for Dark Theme
+$primary-color: #e74c3c // Bright red for headers
+$secondary-color: #ecf0f1 // Light gray for secondary headers
+$tertiary-color: #1abc9c // Bright green for subheaders
+$quaternary-color: #9b59b6 // Bright purple for smaller headers
+$link-color-primary: #e67e22 // Bright orange for primary links
+$link-color-secondary: #2980b9 // Bright blue for secondary links
+$background-color: #2c3e50 // Dark navy background
+$text-color: #ecf0f1 // Light gray text for contrast
+$table-header-bg: #34495e // Darker shade of blue for table headers
+$table-border-color: #95a5a6 // Lighter gray border color
+
+// Inverse Link Colors
+$inverse-link-color: #2c3e50 // Dark background for inverse links
+$inverse-link-hover-color: #ecf0f1 // Light text color for inverse link hover
+
+// font variables
+$primary-font: 'fira-mono'
+$secondary-font: 'roboto'
+
+
+// Header Sizes and Colors Map
+$header-styles: (h1: (size: 2em, color: $primary-color, border-size: 2px))
+$header-styles: map.set($header-styles, h2, (size: 1.75em, color: $secondary-color, border-size: 2px))
+$header-styles: map.set($header-styles, h3, (size: 1.3em, color: $tertiary-color, border-size: 1px))
+$header-styles: map.set($header-styles, h4, (size: 1.25em, color: $quaternary-color, border-size: 1px))
+
+// Code Block Background
+$code-bg-color: #34495e // Darker background color for code blocks
+$code-font-color: $text-color
+
diff --git a/themes/_dark_graphics.sass b/themes/_dark_graphics.sass
new file mode 100644
index 0000000..39af145
--- /dev/null
+++ b/themes/_dark_graphics.sass
@@ -0,0 +1,32 @@
+@use "sass:map"
+
+// Color Variables for Dark Theme (Updated)
+$primary-color: #f39c12 // Vibrant yellow for headers (contrast with dark background)
+$secondary-color: #e74c3c
+$tertiary-color: #1abc9c // Bright green for subheaders
+$quaternary-color: #8e44ad // Deep violet for smaller headers
+$link-color-primary: #e67e22 // Bright orange for primary links
+$link-color-secondary: #2980b9 // Bright blue for secondary links
+$background-color: #2c3e50 // Dark navy background
+$text-color: #ffffff // Pure white text for strong contrast
+$table-header-bg: #3b4a5a // Muted steel blue for table headers
+$table-border-color: #7f8c8d // Soft cool gray border
+
+// Inverse Link Colors
+$inverse-link-color: #2c3e50 // Dark background for inverse links
+$inverse-link-hover-color: #ecf0f1 // Light text color for inverse link hover
+
+// Font Variables
+$primary-font: 'fira-mono'
+$secondary-font: 'roboto'
+
+// Header Sizes and Colors Map
+$header-styles: (h1: (size: 2em, color: $primary-color, border-size: 2px))
+
+$header-styles: map.set($header-styles, h2, (size: 1.7em, color: $secondary-color, border-size: 2px))
+$header-styles: map.set($header-styles, h3, (size: 1.3em, color: $tertiary-color, border-size: 1px))
+$header-styles: map.set($header-styles, h4, (size: 1.25em, color: $quaternary-color, border-size: 1px))
+
+// Code Block Background
+$code-bg-color: #3d5a6e // Muted navy for code blocks
+$code-font-color: $text-color
diff --git a/themes/_dark_scarlet.sass b/themes/_dark_scarlet.sass
new file mode 100644
index 0000000..d22c917
--- /dev/null
+++ b/themes/_dark_scarlet.sass
@@ -0,0 +1,38 @@
+@use "sass:map"
+
+// Color Variables for Darker Theme
+$primary-color: #d10094 // Dark pink for headers
+$secondary-color: #5b8ee8 // Rich deep blue for secondary headers
+$tertiary-color: #228b22 // Dark green for subheaders
+$quaternary-color: #bd93f9 // Soft purple for smaller headers
+
+$link-color-primary: #6272a4 // Muted blue for primary links
+$link-color-secondary: #ff5555 // Bold pinkish-red for secondary links
+$background-color: #282a36 // Rich black-gray background
+$text-color: #f8f8f2 // Off-white text for high contrast
+$table-header-bg: #44475a // Dark steely blue for table headers
+$table-border-color: #6272a4 // Soft blue-gray for table borders
+
+// Inverse Link Colors
+$inverse-link-color: #44475a // Darker gray for inverse links
+$inverse-link-hover-color: #f8f8f2 // Off-white for inverse link hover
+
+// Font Variables
+$primary-font: 'Fira Mono', monospace
+$secondary-font: 'Roboto', sans-serif
+
+// Header Sizes and Colors Map
+$header-styles: (h1: (size: 2.3em, color: $primary-color, border-size: 2px))
+$header-styles: map.set($header-styles, h2, (size: 2em, color: $secondary-color, border-size: 2px))
+$header-styles: map.set($header-styles, h3, (size: 1.5em, color: $tertiary-color, border-size: 1px))
+$header-styles: map.set($header-styles, h4, (size: 1.25em, color: $quaternary-color, border-size: 1px))
+
+// Code Block Colors
+$code-bg-color: #1e1f29 // Very dark blue for code background
+$code-font-color: #f8f8f2 // Off-white for code text
+$code-keyword-color: #ff79c6 // Vibrant pink for keywords
+$code-string-color: #50fa7b // Neon green for strings
+$code-variable-color: #8be9fd // Light cyan for variables
+$code-border-radius: 4px
+
+
diff --git a/themes/_heb_dark.sass b/themes/_heb_dark.sass
new file mode 100644
index 0000000..1df5fd2
--- /dev/null
+++ b/themes/_heb_dark.sass
@@ -0,0 +1,31 @@
+@use "sass:map"
+
+// Color Variables for Desert Theme
+$primary-color: #d18f77  // Warm sandstone (primary headers)
+$secondary-color: #e0b589 // Light sandy beige (secondary headers)
+$tertiary-color: #a7582e  // Rusty orange-red (subheaders)
+$quaternary-color: #875640 // Deep clay brown (smaller headers)
+$link-color-primary: #967e52 // Muted desert green (primary links)
+$link-color-secondary: #bda27b // Sandy yellow (secondary links)
+$background-color: #f4e9d8 // Soft light beige (background)
+$text-color: #4c3e3b // Dark brown (text for contrast)
+$table-header-bg: #967e52  // Muted desert green for table headers
+$table-border-color: #bda27b  // Sandy yellow for table borders
+
+// Inverse Link Colors
+$inverse-link-color: #875640  // Deep clay brown for inverse links
+$inverse-link-hover-color: #e0b589  // Sandy beige for inverse link hover
+
+// Font Variables
+$primary-font: 'Source Code Pro'  // Clean, readable monospace for code
+$secondary-font: 'Lora'  // Seriffed font for headers
+
+// Header Sizes and Colors Map
+$header-styles: (h1: (size: 2em, color: $primary-color, border-size: 2px))
+$header-styles: map.set($header-styles, h2, (size: 1.75em, color: $secondary-color, border-size: 2px))
+$header-styles: map.set($header-styles, h3, (size: 1.3em, color: $tertiary-color, border-size: 1px))
+$header-styles: map.set($header-styles, h4, (size: 1.25em, color: $quaternary-color, border-size: 1px))
+
+// Code Block Background
+$code-bg-color: #000 // Warm, soft background for code blocks
+$code-font-color: #cd8c7e
diff --git a/themes/_light.sass b/themes/_light.sass
new file mode 100644
index 0000000..6cdb7b8
--- /dev/null
+++ b/themes/_light.sass
@@ -0,0 +1,34 @@
+@use "sass:map"
+
+// Color Variables for Light Theme
+$primary-color: #2980b9 // Bright blue for headers
+$secondary-color: #34495e // Darker gray for secondary headers
+$tertiary-color: #16a085 // Bright teal for subheaders
+$quaternary-color: #8e44ad // Bright purple for smaller headers
+
+$link-color-primary: #d35400 // Vibrant orange for primary links
+$link-color-secondary: #c0392b // Strong red for secondary links
+
+$background-color: #ecf0f1 // Light gray background
+$text-color: #2c3e50 // Dark text for contrast
+$table-header-bg: #bdc3c7 // Lighter gray for table headers
+$table-border-color: #7f8c8d // Medium gray for borders
+
+// Inverse Link Colors
+$inverse-link-color: #ecf0f1 // Light background for inverse links
+$inverse-link-hover-color: #2c3e50 // Dark text color for inverse link hover
+
+// font variables
+$primary-font: 'fira-mono'
+$secondary-font: 'roboto'
+
+// Header Sizes and Colors Map
+$header-styles: (h1: (size: 2em, color: $primary-color, border-size: 2px))
+$header-styles: map.set($header-styles, h2, (size: 1.75em, color: $secondary-color, border-size: 2px))
+$header-styles: map.set($header-styles, h3, (size: 1.3em, color: $tertiary-color, border-size: 1px))
+$header-styles: map.set($header-styles, h4, (size: 1.25em, color: $quaternary-color, border-size: 1px))
+
+// Code Block Background
+$code-bg-color: #bdc3c7 // Lighter background color for code blocks
+$code-font-color: $text-color
+
diff --git a/themes/course_listings/_dark.sass b/themes/course_listings/_dark.sass
new file mode 100644
index 0000000..e7318ca
--- /dev/null
+++ b/themes/course_listings/_dark.sass
@@ -0,0 +1,47 @@
+@use "sass:map"
+
+$primary-color: red
+$secondary-color: blue
+$tertiary-color: green
+$quaternary-color: orange
+
+$primary-color: #c29504
+$secondary-color: #d16f00
+$tertiary-color: #ccad49
+$quaternary-color: #c5b06a
+$quinary-color: #3c78bd
+
+$text-color: #f5f5f5
+$background-color: #343434
+
+$primary-font: "Times"
+$secondary-font: "Roboto"
+
+// Header Sizes and Colors Map
+$header-styles: (h1: (size: 2.5em, color: $primary-color, border-size: 2px))
+$header-styles: map.set($header-styles, h2, (size: 1.5em, color: $secondary-color, border-size: 2px))
+$header-styles: map.set($header-styles, h3, (size: 1.0em, color: $tertiary-color, border-size: 1px))
+$header-styles: map.set($header-styles, h4, (size: 1.0em, color: $quaternary-color, border-size: 1px))
+
+
+// Colors
+$anchor-color: $primary-color
+$anchor-hover-color: lighten($anchor-color, 10)
+
+$anchor-secondary-color: #a19581
+$anchor-secondary-hover-color: #ffad42  // A warm, light orange that pairs well with the yellow marker
+
+// Code Block Background
+$code-bg-color: #000 // Lighter background color for code blocks
+$code-font-color: $text-color
+$code-font-color: #bb7e70
+
+// Header Sizes
+// $default-header-sizes: (h1: 2em, h2: 1.5em, h3: 1em, h4: 1em, h5: 1.1em, h6: 1em)
+
+// Margins
+$first-anchor-margin-left: 2em
+
+
+$playlist-header-color: $primary-color
+
diff --git a/youtube_courses.sass b/youtube_courses.sass
new file mode 100644
index 0000000..ec08659
--- /dev/null
+++ b/youtube_courses.sass
@@ -0,0 +1,94 @@
+@import 'youtubevars.sass'
+@import 'mixins'
+@import './collapsible.sass'
+
+@include toggle-section-numbers(h3, true)
+@include toggle-section-numbers(h4, false)
+@include remove-section-number(h2)
+
+// @include set-header-sizes($default-header-sizes)
+// @include set-header-color($text-color)
+
+// Base body styles
+body
+  font-family: $primary-font
+  font-size: 16px
+  line-height: 1.6
+  color: $text-color
+  background-color: $background-color
+
+// Headers
+@each $header, $props in $header-styles
+  #{$header}
+    font-family: $secondary-font
+    font-weight: bold
+    color: map-get($props, color)
+    font-size: map-get($props, size)
+    margin-top: 20px
+    margin-bottom: 10px
+
+div#postamble
+  border-color: $text-color
+
+a
+  color: $anchor-color
+  text-decoration: none
+
+  &:hover
+    color: $anchor-hover-color
+    border-bottom-color: $anchor-hover-color
+    text-decoration: underline
+
+h3 + .outline-text-3 p
+  margin-top: 0
+
+h3 + .outline-text-3 p > a:first-of-type
+  font-size: 1em
+  margin-left: $first-anchor-margin-left
+
+h4
+  text-transform: uppercase
+  padding-left: 2em
+  color: #c5b06a
+  margin-top: 0
+
+h4 + .outline-text-4 ol
+  padding-left: 4em
+
+  a
+    color: #a19581
+    text-decoration: none
+
+    &:hover
+      color: #ffad42  // A warm, light orange that pairs well with the yellow marker
+      border-bottom-color: #ffad42
+      text-decoration: underline
+
+  li
+    &::marker
+
+      color: #8b872b
+      font-size: 1.2em
+      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3)
+
+    b
+      font-family: arial-black
+      font-size: .7em
+      text-transform: uppercase
+      padding-left: 2em
+      
+      color: #c5b06a
+
+ul.notes
+  list-style-type: square
+  padding-left: 3em
+
+  ul.desc-link
+    li
+      margin-bottom: .2em // Add space between list items
+
+
+      > a
+        display: block
+
+