diff --git a/assets/css/style-no-dark-mode.css b/assets/css/style-no-dark-mode.css
index 45e84e2..1d712ed 100644
--- a/assets/css/style-no-dark-mode.css
+++ b/assets/css/style-no-dark-mode.css
@@ -1,30 +1,30 @@
 /* Specific styles for the FUN section */
 #fun {
   font-style: normal; /* Ensure the default font style is normal */
-}
-
-#fun .h4 {
+  }
+  
+  #fun .h4 {
   font-style: normal; /* Ensure the heading is not italic */
   font-weight: 500;
-}
-
-#fun .p {
+  }
+  
+  #fun .p{
   font-style: normal; /* Ensure the paragraphs are not italic */
-}
-
-#fun ul {
+  }
+  
+  #fun ul {
   list-style-type: none; /* Remove bullets from the list */
   padding: 0;
-}
-
-#fun .music-item {
+  }
+  
+  #fun .music-item {
   margin-bottom: 5px;
   display: flex;
   align-items: center;
   font-style: normal; /* Ensure the music items are not italic */
-}
-
-#fun .audio-btn {
+  }
+  
+  #fun .audio-btn {
   background: none;
   border: none;
   color: #39c;
@@ -32,128 +32,124 @@
   margin-left: 4px;
   cursor: pointer;
   font-style: normal; /* Ensure the buttons are not italic */
-}
-
-#fun .audio-btn:focus {
+  }
+  
+  #fun .audio-btn:focus {
   outline: none;
-}
-
-#fun .music-item p {
+  }
+  
+  #fun .music-item p {
   margin: 0;
   flex-grow: 1;
   font-style: normal; /* Ensure the paragraphs are not italic */
-}
-
-/* Additional styles to align links with periodical info */
-.periodical {
+  }
+  
+  /* Additional styles to align links with periodical info */
+  .periodical {
   display: flex;
   align-items: center; /* Vertically center the content */
-}
-
-.links {
+  }
+  
+  .links {
   margin-left: 10px;
   display: flex;
   gap: 5px;
-}
-
-.links .btn {
+  }
+  
+  .links .btn {
   padding: 2px 6px;
   font-size: 0.875em;
-}
-
-/* General styles */
-@import url("https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,400;0,500;0,600&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Ubuntu+Mono&display=swap");
-
-body {
+  }
+  
+  /* General styles */
+  @import url("https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,400;0,500;0,600;1,500;1,600&display=swap");
+  @import url("https://fonts.googleapis.com/css2?family=Ubuntu+Mono&display=swap");
+  
+  body {
   background-color: #fff;
   color: #595959;
   font: 16px/1.5 'Crimson Pro', serif;
   font-weight: 400;
   margin: 0;
   padding: 0;
-}
-
-h1, h2, h3, h4, h5, h6 {
+  }
+  
+  h1, h2, h3, h4, h5, h6 {
   color: #000;
   font-weight: 600;
   line-height: 1.1;
   margin: 0 0 20px;
-}
-
-h1 {
+  }
+  
+  h1 {
   font-size: 28px;
   font-weight: 500;
-}
-
-h2 {
+  }
+  
+  h2 {
   font-size: 157%;
   font-style: normal;
   font-weight: 500;
   margin: 2px 0 15px;
-}
-
-h3 {
+  }
+  
+  h3 {
   font-size: 115%;
   font-weight: 500;
   margin: 2px 0 15px;
-}
-
-p, ul, ol, table, pre, dl {
+  }
+  
+  p, ul, ol, table, pre, dl {
   margin: 0 0 20px;
-}
-
-a {
+  }
+  
+  a {
   color: #39c;
   text-decoration: none;
-}
-
-a:hover {
+  }
+  
+  a:hover {
   color: #069;
-}
-
-.wrapper {
+  }
+  
+  .wrapper {
   margin: 0 auto;
-  width: 100%;
-  max-width: 1080px; /* Maintain a maximum width */
-  display: flex;
-  flex-wrap: wrap;
-}
-
-header {
+  width: 1080px; /* Increase the width */
+  }
+  
+  header {
   -webkit-font-smoothing: subpixel-antialiased;
-  text-align: center;
-  width: 200px; /* Set a fixed width for the header */
-  flex: 0 0 200px; /* Ensure the header does not shrink */
+  float: left;
   padding-top: 4em;
-}
-
-section {
+  position: fixed;
+  text-align: center;
+  width: 200px; /* Slightly increase the width of header */
+  }
+  
+  section {
   margin-left: 255px; /* Adjust the left margin to make the section wider */
   padding-bottom: 50px;
   padding-top: 4em;
-  width: calc(100% - 255px); /* Adjust the width */
-  flex: 1; /* Allow the section to grow */
-}
-
-.footer {
+  width: 860px; /* Adjust the width */
+  }
+  
+  .footer  {
   -webkit-font-smoothing: subpixel-antialiased;
   bottom: 5px;
+  float: right;
+  position: fixed;
   text-align: center;
   width: 280px; /* Adjust the width to match header */
-  flex: 0 0 280px; /* Ensure the footer does not shrink */
-  position: fixed;
-  right: 0;
-}
-
-.image {
+  }
+  
+  .image {
   border: 0;
   border-radius: 0.35em;
   display: inline-block;
   position: relative;
-}
-
-.image:before {
+  }
+  
+  .image:before {
   -moz-transition: opacity 0.2s ease-in-out;
   -webkit-transition: opacity 0.2s ease-in-out;
   -ms-transition: opacity 0.2s ease-in-out;
@@ -167,9 +163,9 @@ section {
   top: 0;
   transition: opacity 0.2s ease-in-out;
   width: 100%;
-}
-
-.image.avatar {
+  }
+  
+  .image.avatar {
   border-radius: 15px;
   display: inline-block;
   height: 230px;
@@ -177,27 +173,27 @@ section {
   padding: 20px;
   position: relative;
   width: 180px;
-}
-
-.image.avatar:before {
+  }
+  
+  .image.avatar:before {
   display: none;
-}
-
-.image.avatar img {
+  }
+  
+  .image.avatar img {
   border-radius: 10px;
   height: 100%;
   object-fit: cover;
   padding: 0;
   width: 100%;
-}
-
-#header .image.avatar {
+  }
+  
+  #header .image.avatar {
   height: 150px;
   margin: 0 0 1em 0;
   width: 200px;
-}
-
-.icon-button {
+  }
+  
+  .icon-button {
   background-color: white;
   border-radius: 3.6rem;
   cursor: pointer;
@@ -213,9 +209,9 @@ section {
   -ms-user-select: none;
   user-select: none;
   width: 1.5rem;
-}
-
-.icon-button span {
+  }
+  
+  .icon-button span {
   border-radius: 0;
   display: block;
   height: 0;
@@ -228,16 +224,16 @@ section {
   -o-transition: all 0.3s;
   transition: all 0.3s;
   width: 0;
-}
-
-.icon-button:hover span {
+  }
+  
+  .icon-button:hover span {
   border-radius: 2rem;
   height: 2rem;
   margin: -1.8rem;
   width: 2rem;
-}
-
-.icon-button i {
+  }
+  
+  .icon-button i {
   background: none;
   color: white;
   height: 2rem;
@@ -251,56 +247,56 @@ section {
   transition: all 0.3s;
   width: 3.6rem;
   z-index: 10;
-}
-
-.twitter span {
+  }
+  
+  .twitter span {
   background-color: #4099ff;
-}
-
-.facebook span {
+  }
+  
+  .facebook span {
   background-color: #4286f4;
-}
-
-.linkedin span {
+  }
+  
+  .linkedin span {
   background-color: #0077B5;
-}
-
-.github span {
+  }
+  
+  .github span {
   background-color: #000;
-}
-
-.icon-button .icon-twitter {
+  }
+  
+  .icon-button .icon-twitter {
   color: #4099ff;
-}
-
-.icon-button .icon-facebook {
+  }
+  
+  .icon-button .icon-facebook {
   color: #4286f4;
-}
-
-.icon-button .icon-github {
+  }
+  
+  .icon-button .icon-github {
   color: #000;
-}
-
-.icon-button .icon-linkedin {
+  }
+  
+  .icon-button .icon-linkedin {
   color: #0077B5;
-}
-
-.icon-button:hover .icon-twitter,
-.icon-button:hover .icon-facebook,
-.icon-button:hover .icon-github,
-.icon-button:hover .icon-linkedin {
+  }
+  
+  .icon-button:hover .icon-twitter,
+  .icon-button:hover .icon-facebook,
+  .icon-button:hover .icon-github,
+  .icon-button:hover .icon-linkedin {
   color: white;
-}
-
-.social-icons {
+  }
+  
+  .social-icons {
   display: flex;
   flex-direction: column; /* Change to vertical layout */
   align-items: flex-start; /* Center align items horizontally */
   gap: 3px; /* Reduce the gap between items */
   margin-top: 20px;
-}
-
-.social-icons a {
+  }
+  
+  .social-icons a {
   color: #043361 !important;
   display: flex; /* Use flex to align icon and text */
   align-items: center; /* Vertically center align the icon and text */
@@ -308,200 +304,233 @@ section {
   text-align: left;
   margin-bottom: 6px; /* Reduce margin-bottom for spacing between icons */
   padding: 0 40px; /* Add padding to the left and right */
-}
-
-.social-icons a:hover {
+  }
+  
+  .social-icons a:hover {
   background-color: white;
   color: black;
   transform: scale(1.1); /* Reduce the scale effect on hover */
-}
-
-.social-icons i {
+  }
+  
+  .social-icons i {
   margin-right: 6px; /* Reduce margin to the right of the icon */
   font-size: 1rem; /* Reduce the font size of the icons */
-}
-
-.social-icons span {
+  }
+  
+  .social-icons span {
   font-size: 0.9rem; /* Set the font size for the text */
-}
-
-.autocolor {
+  }
+  
+  .autocolor {
   color: #595959;
-}
-
-.lightonly {
+  }
+  
+  .lightonly {
   visibility: visible;
-}
-
-.darkonly {
+  }
+  
+  .darkonly {
   visibility: hidden;
-}
-
-.education {
+  }
+  
+  .education {
   font-size: 115%;
   font-weight: 500;
-}
-
-.papertitle {
+  }
+  
+  .papertitle {
   font-size: 100%;
   font-weight: 600;
-}
-
-.email {
+  }
+  
+  .email {
   font-family: "Ubuntu Mono";
   font-size: 14px;
   margin-bottom: 20px;
-}
-
-@media print, screen and (max-width: 960px) {
+  }
+  
+  @media print, screen and (max-width: 960px) {
   .pub-row {
-    align-items: center;
-    display: flex;
+  align-items: center;
+  display: flex;
   }
-
+  
+  ```
   .wrapper {
     margin: 0;
     width: auto;
-    flex-direction: column;
   }
-
-  header, section, .footer {
+  
+  header, section, footer {
     float: none;
     position: static;
-    width: 100%;
+    width: auto;
   }
-
+  
   header {
-    padding-top: 2em;
-    padding-bottom: 2em;
+    padding-right: 320px;
   }
-
+  
   section {
-    margin-left: 0;
-    padding: 20px;
-    width: 100%;
+    border: 1px solid #e5e5e5;
+    border-width: 1px 0;
+    margin: 0 0 20px;
+    padding: 20px 0;
   }
-
-  .footer {
-    bottom: 0;
-    float: none;
-    width: 100%;
-    padding-top: 2em;
-    padding-bottom: 2em;
+  
+  header a small {
+    display: inline;
   }
-
+  
+  header ul {
+    position: absolute;
+    right: 50px;
+    top: 52px;
+  }
+  
   .image.avatar img {
     border-radius: 100%;
     padding: 20px;
     width: 117px;
   }
-
+  
   #head1o2, #head2o2 {
     visibility: hidden;
   }
-}
-
-@media print, screen and (max-width: 480px) {
+  
+  ```
+  
+  }
+  
+  @media print, screen and (max-width: 960px) {
+  body {
+  padding: 15px;
+  word-wrap: break-word;
+  }
+  
+  ```
   .pub-row {
     align-items: center;
-    display: block;
+    display: flex;
   }
-
+  
+  header {
+    padding: 0;
+  }
+  
+  pre, code {
+    word-wrap: normal;
+  }
+  
+  ```
+  
+  }
+  
+  @media print, screen and (max-width: 480px) {
+  .pub-row {
+  align-items: center;
+  display: block;
+  }
+  
+  ```
   body {
     padding: 15px;
   }
-
+  
   header ul {
-    width: 100%;
+    width: 99%;
   }
-
+  
   header li, header ul li + li + li {
-    width: 100%;
+    width: 33%;
   }
-
+  
   .image.avatar img {
     border-radius: 100%;
     padding: 20px;
     width: 95px;
   }
-
+  
   #head1o2, #head2o2 {
     visibility: hidden;
   }
-}
-
-@media print {
+  
+  ```
+  
+  }
+  
+  @media print {
   body {
-    color: #444;
-    font-size: 12pt;
-    padding: 0.4in;
+  color: #444;
+  font-size: 12pt;
+  padding: 0.4in;
+  }
   }
-}
-
-.biblink {
+  
+  .biblink {
   display: inline;
   margin-right: 0;
   text-decoration: none;
-}
-
-.fakelink {
+  }
+  
+  .fakelink {
   cursor: pointer;
   text-decoration: none;
-}
-
-.bibref {
+  }
+  
+  .bibref {
   display: none;
   font-family: monospace;
   font-size: 70%;
   margin-left: 0;
   margin-top: 10px;
-}
-
-/* Publication Styles */
-.pub-row {
+  }
+  
+  /* Publication Styles */
+  .pub-row {
   display: flex;
   align-items: center; /* Center align items vertically */
   margin-bottom: 40px; /* Increase the margin to add more space between publications */
-}
-
-.pub-row .col-sm-3 {
+  }
+  
+  .pub-row .col-sm-3 {
   flex: 0 0 25%;
   display: flex;
   align-items: center; /* Center align items vertically within this column */
-}
-
-.pub-row .col-sm-9 {
+  }
+  
+  .pub-row .col-sm-9 {
   flex: 1;
   padding-left: 20px; /* Add padding to separate the text from the image */
-}
-
-.teaser {
+  }
+  
+  .teaser {
   width: 120%; /* Ensure the image takes the full width of the column */
   height: auto;
   max-width: 180px; /* Adjust this value to control the maximum width of the image */
   max-height: 200px; /* Adjust this value to control the maximum height of the image */
   object-fit: cover; /* Ensure the image covers the area without distortion */
   margin-right: 20px; /* Add margin to the right to space out from the text */
-}
-
-.pub-description mt-2 {
+  }
+  
+  .pub-description mt-2 {
   margin-top: 2px; /* Adjust the margin to space out the description */
   font-size: 8pt;
-}
-
-/* Additional General Styles */
-.music-list {
+  }
+  
+  /* Additional General Styles */
+  .music-list {
   list-style-type: none;
   padding: 0;
-}
-
-.music-item {
+  }
+  
+  .music-item {
   margin-bottom: 20px;
   display: flex;
   align-items: center;
-}
-
-.audio-btn {
+  }
+  
+  .audio-btn {
   background: none;
   border: none;
   color: #39c;
@@ -509,25 +538,24 @@ section {
   margin-left: 5px;
   cursor: pointer;
   font-style: normal; /* Ensure the buttons are not italic */
-}
-
-.audio-btn:focus {
+  }
+  
+  .audio-btn:focus {
   outline: none;
-}
-
-.music-item p {
+  }
+  
+  .music-item p {
   margin: 0;
   flex-grow: 1;
   font-style: normal; /* Ensure the paragraphs are not italic */
-}
-
-.bibliography {
+  }
+  
+  .bibliography {
   list-style-type: none;
   padding-left: 0;
-}
-
-.bibliography li {
+  }
+  
+  .bibliography li {
   counter-increment: none;
   padding-left: 0;
-}
-
+  }