diff --git a/scripts/slides_to_html.sh b/scripts/slides_to_html.sh
index 5b14cd2..534998f 100755
--- a/scripts/slides_to_html.sh
+++ b/scripts/slides_to_html.sh
@@ -9,7 +9,10 @@ for filename in  $*
 do
   echo compiling $filename
   file_out=`echo $filename | sed -e 's/\.md/\.html/g'`
-  sed -e "s|SLIDEHEAD|$headEscapedForSed|g" $filename | pandoc -s --mathjax -t revealjs -o html/$file_out --slide-level=$SLIDE_LEVEL --highlight-style=$HIGHLIGHT_STYLE -V revealjs-url=https://unpkg.com/reveal.js@5.2.0 --template=./templates/template.revealjs
+  sed -e "s|SLIDEHEAD|$headEscapedForSed|g" $filename | pandoc -s --mathjax -t revealjs -o html/$file_out --slide-level=$SLIDE_LEVEL --highlight-style=$HIGHLIGHT_STYLE -V revealjs-url=https://unpkg.com/reveal.js@5.2.0 --template=./templates/template.revealjs --css custom.css
+  if [ -f ./templates/custom.css ]; then
+    cp ./templates/custom.css ./html/custom.css
+  fi
   echo output $file_out
 
 done
diff --git a/templates/custom.css b/templates/custom.css
new file mode 100644
index 0000000..496228c
--- /dev/null
+++ b/templates/custom.css
@@ -0,0 +1,103 @@
+/* Set a clean and professional font */
+body {
+    font-family: 'Arial', sans-serif;
+    color: #333;
+}
+
+/* Style for headers */
+.reveal h1, .reveal h2, .reveal h3, .reveal h4 {
+    color: #00468B; /* Dark blue for headers */
+    font-weight: bold;
+}
+
+/* Style for main content */
+.reveal p, .reveal li, .reveal blockquote {
+    font-size: 0.9em;
+    line-height: 1.1;
+    color: #444;
+}
+
+/* Style for code blocks */
+.reveal pre code {
+    font-family: 'Courier New', Courier, monospace;
+    background-color: #f9f9f9; /* Light gray background */
+    border: 1px solid #ddd; /* Light gray border */
+    padding: 10px; /* Padding inside the code block */
+    border-radius: 5px; /* Rounded corners */
+    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
+}
+
+/* Style for inline code */
+.reveal code {
+    background-color: #f4f4f4; /* Slightly different background for inline code */
+    /*border: 1px solid #ccc; */
+    padding: 1px; /* Padding inside the inline code block */
+    border-radius: 2px; /* Rounded corners */
+}
+/* Style for lists */
+.reveal ul, .reveal ol {
+    margin-left: 2em;
+}
+
+/* Style for blockquotes */
+.reveal blockquote {
+    border-left: 4px solid #ccc;
+    padding-left: 1em;
+    color: #555;
+    font-style: italic;
+}
+
+/* Style for links */
+.reveal a {
+    color: #0056b3;
+    text-decoration: none;
+}
+
+.reveal a:hover {
+    text-decoration: underline;
+}
+
+/* Background color for slides */
+.reveal .slides {
+    background-color: #fcfcfc; /* White background */
+}
+
+/* Style for footer (if used) */
+.reveal .footer {
+    font-size: 0.8em;
+    color: #777;
+}
+
+/* Style for navigation controls */
+.reveal .controls {
+    color: #555;
+}
+
+/* Style for progress bar */
+.reveal .progress {
+    background: #ccc;
+}
+
+.reveal .progress span {
+    background: #0056b3;
+}
+
+/* Optional: Add a subtle header bar */
+.reveal .header {
+    background-color: #00468B;
+    color: #fff;
+    padding: 5px;
+    text-align: left;
+}
+
+/* Optional: Add a subtle footer bar */
+.reveal .footer-bar {
+    background-color: #00468B;
+    color: #fff;
+    padding: 10px;
+    text-align: right;
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+}
+