diff --git a/website/_quarto.yml b/website/_quarto.yml
index 5c30137..6f24c6f 100644
--- a/website/_quarto.yml
+++ b/website/_quarto.yml
@@ -53,13 +53,28 @@ bibliography: references.bib
 
 numbered: true
 
+
 format:
   html:
-    theme: darkly
-    css: styles.css
+    anchor-sections: true
+    smooth-scroll: true
     toc: true
     toc-depth: 3
     number-sections: true
+    link-external-icon: true
+    link-external-newwindow: true
+    html-math-method:
+      method: "mathjax"
+      url: "https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"
+    theme:
+      light: ["light-style.scss"]
+      dark: ["dark-style.scss"]
+    highlight-style: zenburn
+    self-contained-math: true
+    code-tools: true
+    code-overflow: wrap
+    code-link: true
+    code-download: true
     site-url: "https://genetictournament.com/"
   pdf:
     documentclass: scrreprt
diff --git a/website/dark-style.scss b/website/dark-style.scss
new file mode 100644
index 0000000..3368366
--- /dev/null
+++ b/website/dark-style.scss
@@ -0,0 +1,108 @@
+/* Define font family variables */
+$tex-gyre-schola: "TeX Gyre Schola";
+$iosevka: "Iosevka";
+
+/* CUSTOM FONTS ##############################################################*/
+@font-face {
+  font-family: $tex-gyre-schola;
+  src: url("./assets/fonts/tex-gyre/texgyreschola-regular.otf") format("opentype");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: $tex-gyre-schola;
+  src: url("./assets/fonts/tex-gyre/texgyreschola-bold.otf") format("opentype");
+  font-weight: bold;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: $tex-gyre-schola;
+  src: url("./assets/fonts/tex-gyre/texgyreschola-italic.otf") format("opentype");
+  font-weight: normal;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: $tex-gyre-schola;
+  src: url("./assets/fonts/tex-gyre/texgyreschola-bolditalic.otf") format("opentype");
+  font-weight: bold;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: $iosevka;
+  src: url("./assets/fonts/iosevka/Iosevka-Regular.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: $iosevka;
+  src: url("./assets/fonts/iosevka/Iosevka-Bold.ttf") format("truetype");
+  font-weight: bold;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: $iosevka;
+  src: url("./assets/fonts/iosevka/Iosevka-Italic.ttf") format("truetype");
+  font-weight: normal;
+  font-style: italic;
+}
+
+/*BODY #######################################################################*/
+
+/*-- scss:rules --*/
+body {
+  font-family: $tex-gyre-schola, serif;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-variant: small-caps;
+}
+
+code {
+  font-family: $iosevka, monospace;
+}
+
+/*-- scss:defaults --*/
+
+// base  colors
+$body-bg: black;  // black background for the page
+$body-color: #f7f7f7;  // light text for contrast
+$link-color: #800000;  // maroon for links (bright contrast)
+
+$code-bg: gray;  // dark background for inline code
+$code-color: #f7f7f7;  // white text for inline code to make it stand out
+
+.output {
+  color: white;
+}
+
+// code blocks
+// $code-block-bg-alpha: -0.2;  // slight transparency on code block background
+// $code-block-bg: #2c2c2c;  // dark background for code blocks
+$code-block-border-left: #800000;  // maroon left border for code blocks
+$code-block-border-left-style: solid;  // solid border style
+$code-block-border-left-size: 2px;  // border size
+$code-block-padding-left: 1rem;  //padding between code and left border
+
+// table of contents
+$toc-color: #f7f7f7;  // light gray for Table of Contents text
+$toc-active-border: #800000;  // maroon border for active TOC item
+$toc-inactive-border: #555555;  // dark gray border for inactive TOC items
+
+// navbar and sidebar
+$navbar-bg: black;  // dark background for the navbar
+$navbar-fg: #f7f7f7;  // light gray text color in the navbar
+$navbar-hl: #800000;  // maroon for navbar link hover
+
+$sidebar-bg: black;  // dark background for sidebar
+$sidebar-fg: #e0e0e0;  // light gray text in the sidebar
+$sidebar-hl: #800000;  //maroon highlight color for sidebar links
+
+// footer
+$footer-bg: black;  // dark background for footer
+$footer-fg: #f7f7f7;  // Light gray text for footer
diff --git a/website/light-style.scss b/website/light-style.scss
new file mode 100644
index 0000000..45b5a75
--- /dev/null
+++ b/website/light-style.scss
@@ -0,0 +1,111 @@
+/* Define font family variables */
+$tex-gyre-schola: "TeX Gyre Schola";
+$iosevka: "Iosevka";
+
+/* CUSTOM FONTS ##############################################################*/
+@font-face {
+  font-family: $tex-gyre-schola;
+  src: url("./assets/fonts/tex-gyre/texgyreschola-regular.otf") format("opentype");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: $tex-gyre-schola;
+  src: url("./assets/fonts/tex-gyre/texgyreschola-bold.otf") format("opentype");
+  font-weight: bold;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: $tex-gyre-schola;
+  src: url("./assets/fonts/tex-gyre/texgyreschola-italic.otf") format("opentype");
+  font-weight: normal;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: $tex-gyre-schola;
+  src: url("./assets/fonts/tex-gyre/texgyreschola-bolditalic.otf") format("opentype");
+  font-weight: bold;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: $iosevka;
+  src: url("./assets/fonts/iosevka/Iosevka-Regular.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: $iosevka;
+  src: url("./assets/fonts/iosevka/Iosevka-Bold.ttf") format("truetype");
+  font-weight: bold;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: $iosevka;
+  src: url("./assets/fonts/iosevka/Iosevka-Italic.ttf") format("truetype");
+  font-weight: normal;
+  font-style: italic;
+}
+
+/*BODY #######################################################################*/
+
+/*-- scss:rules --*/
+body {
+  font-family: $tex-gyre-schola, serif;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-variant: small-caps;
+}
+
+code {
+  font-family: $iosevka, monospace;
+}
+
+
+/*-- scss:defaults --*/
+
+// base document colors
+$body-bg: #FFFFF0;  // light yellow background
+$body-color: black;  // black for body text
+$link-color: #800000;  // maroon for links
+
+// code blocks
+// $code-block-bg-alpha: -0.1;  // slight transparency
+//$code-block-bg: gray;  // light background
+$code-block-border-left: #800000;  // black left border
+$code-block-border-left-style: solid;  // solid border
+$code-block-border-left-size: 2px;  // border size
+$code-block-padding-left: 1rem;  // padding between code and left border
+
+// inline code styling
+$code-bg: #cccccc;  // light background for inline code
+$code-color: black;  // maroon for inline code text
+
+.output {
+    color: black;
+  }
+
+// table of contents
+$toc-color: black;  // black for Table of Contents text
+$toc-active-border: #800000;  // maroon border for active TOC item
+$toc-inactive-border: #cccccc;  // light gray border for inactive TOC items
+
+// navbar and sidebar
+$navbar-bg: gray;  // yellowish background for the navbar
+$navbar-fg: white;  // white text color in the navbar
+$navbar-hl: #800000;  // maroon for navbar link hover
+
+
+$sidebar-bg: #FFFFF0;  // light background for sidebar
+$sidebar-fg: black;  // dark gray for sidebar text
+$sidebar-hl: #800000;  // maroon highlight color for sidebar links
+
+// footer
+$footer-bg: #FFFFF0;  // light background for footer
+$footer-fg: black;  // Dark gray for footer text
diff --git a/website/styles.css b/website/styles.css
deleted file mode 100644
index 2a475c0..0000000
--- a/website/styles.css
+++ /dev/null
@@ -1,250 +0,0 @@
-
-/* CUSTOM FONTS ##############################################################*/
-@font-face {
-    font-family: 'TeX Gyre Schola';
-    src: url('./assets/fonts/tex-gyre/texgyreschola-regular.otf') format('opentype');
-    font-weight: normal;
-    font-style: normal;
-  }
-
-@font-face {
-    font-family: 'TeX Gyre Schola';
-    src: url('./assets/fonts/tex-gyre/texgyreschola-bold.otf') format('opentype');
-    font-weight: bold;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: 'TeX Gyre Schola';
-    src: url('./assets/fonts/tex-gyre/texgyreschola-italic.otf') format('opentype');
-    font-weight: normal;
-    font-style: italic;
-}
-
-@font-face {
-    font-family: 'TeX Gyre Schola';
-    src: url('./assets/fonts/tex-gyre/texgyreschola-bolditalic.otf') format('opentype');
-    font-weight: bold;
-    font-style: italic;
-}
-
-@font-face {
-    font-family: 'Iosevka';
-    src: url('./assets/fonts/iosevka/Iosevka-Regular.ttf') format('truetype');
-    font-weight: normal;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: 'Iosevka';
-    src: url('./assets/fonts/iosevka/Iosevka-Bold.ttf') format('truetype');
-    font-weight: bold;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: 'Iosevka';
-    src: url('./assets/fonts/iosevka/Iosevka-Italic.ttf') format('truetype');
-    font-weight: normal;
-    font-style: italic;
-}
-
-/*BODY #######################################################################*/
-
-body {
-    font-family: 'TeX Gyre Schola', serif;
-    background-color: black;
-    color: white;
-}
-
-h1, h2, h3, h4, h5, h6 {
-    font-variant: small-caps;
-    text-transform: lowercase;
-    color: white;
-}
-
-em {
-    color: white;
-}
-
-/* code {
-    color: white;
-} */
-
-/* pre, code {
-    font-family: 'Iosevka', monospace;
-} */
-
-img {
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
-    border: 1px solid white;
-}
-
-p code {
-    background-color: gray !important;
-}
-
-code {
-    background-color: gray;  /* Gray background */
-    color: white;  /* White text */
-    font-family: 'Iosevka', monospace;
-}
-
-pre, pre code {
-    color: white;  /* White text */
-    font-family: 'Iosevka', monospace;
-}
-
-a {
-    color: #993333;
-}
-
-a:hover {
-    color: rgb(255, 21, 21);
-}
-
-/*QUARTO SPECIFICS ###########################################################*/
-
-.quarto-post a {
-    color: white !important;
-}
-
-.navbar-title {
-    font-style: italic; /* Makes the text italic */
-    font-size: 150%; /* Increases the font size */
-    font-variant: small-caps;
-    color: black; /* Adjust the color as needed */
-    padding: 5px; /* Add padding for better spacing */
-    display: inline-block; /* Keep the span inline but allow for padding and background */
-}
-
-.navbar {
-    background-color: rgb(142, 140, 140);
-    height: 100%;
-    padding: 0; /* Remove padding if present */
-    margin: 0; /* Remove margin */
-}
-
-.nav-footer {
-    font-size: 1.5rem; /* Increases the font size */
-    background-color: black;
-    color: gray;                    /* Set text color to white, or adjust based on your design */
-    padding: 10px;                   /* Add padding to ensure content has space */
-    height: 75px;
-}
-
-
-
-/* Keep the menu text always black */
-.menu-text, .nav-link {
-    font-variant: small-caps;
-}
-
-/* .navbar-nav .nav-item .nav-link i {
-    color: black !important;
-    font-size: 25px;
-} */
-
-/* Ensure dropdown menus also keep black text */
-/* .navbar-collapse .dropdown-menu .dropdown-item {
-    color: black !important;
-} */
-
-.listing-date {
-    color: lightgray !important;
-}
-
-/* Set the .listing-description text to white */
-.listing-description p {
-    color: lightgray !important;
-}
-
-/* Apply white text color to other metadata */
-.metadata, .metadata div {
-    color: lightgray !important;
-}
-
-.quarto-title-banner {
-    margin: 0px;
-    padding-bottom: 0em;
-}
-
-.quarto-categories {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 10px;  /* Optional: adds space between categories */
-  }
-
-.quarto-category {
-    white-space: normal;  /* Allow text to wrap inside each category */
-    word-wrap: break-word;
-}
-
-/* TABLE OF CONTENTS #########################################################*/
-
-/* Table of contents links default to white */
-#TOC a {
-    color: white !important; /* White text when not hovered */
-    text-decoration: none; /* Remove underline */
-    font-size: 1rem; /* Adjust this value for larger or smaller text */
-}
-
-/* Hover state for TOC links */
-#TOC a:hover {
-    color: maroon !important; /* Change to maroon when hovered */
-    text-decoration: underline; /* Optional: underline on hover */
-}
-
-/* Active TOC link */
-#TOC a.active {
-    color: red !important; /* Active link stays maroon */
-}
-
-
-.nav-link {
-    border-left-color: white !important;
-}
-
-#quarto-appendix.default {
-    background-color: black;
-}
-
-#quarto-appendix.default .quarto-appendix-heading {
-    font-variant: small-caps;
-    text-transform: lowercase;
-    font-family: 'TeX Gyre Schola', serif;
-    font-size: 2.2rem !important;
-}
-
-/*SIDEBAR ####################################################################*/
-
-#quarto-sidebar a.sidebar-link {
-    color: white;
-}
-
-/* Hover state: Make the links maroon */
-#quarto-sidebar a.sidebar-link:hover {
-    color: maroon;
-}
-
-/* Active state: Make the current section link red */
-#quarto-sidebar a.sidebar-link.active {
-    color: red;
-}
-
-
-
-/*CHAPTER TITLES ####################################################################*/
-
-
-.chapter-title {
-    color: white;
-}
-.chapter-title:hover {
-    color: maroon;
-}
-.chapter-title.active {
-    color: red;
-}