diff --git a/assets/css/style-no-dark-mode.css b/assets/css/style-no-dark-mode.css
index b37cc72..29f2128 100644
--- a/assets/css/style-no-dark-mode.css
+++ b/assets/css/style-no-dark-mode.css
@@ -1,561 +1,375 @@
-/* Specific styles for the FUN section */
-#fun {
-font-style: normal; /* Ensure the default font style is normal */
-}
-
-#fun .h4 {
-font-style: normal; /* Ensure the heading is not italic */
-font-weight: 500;
-}
-
-#fun .p{
-font-style: normal; /* Ensure the paragraphs are not italic */
-}
-
-#fun ul {
-list-style-type: none; /* Remove bullets from the list */
-padding: 0;
-}
-
-#fun .music-item {
-margin-bottom: 5px;
-display: flex;
-align-items: center;
-font-style: normal; /* Ensure the music items are not italic */
-}
-
-#fun .audio-btn {
-background: none;
-border: none;
-color: #39c;
-font-size: 0.8em;
-margin-left: 4px;
-cursor: pointer;
-font-style: normal; /* Ensure the buttons are not italic */
-}
-
-#fun .audio-btn:focus {
-outline: none;
-}
-
-#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 {
-display: flex;
-align-items: center; /* Vertically center the content */
-}
-
-.links {
-margin-left: 10px;
-display: flex;
-gap: 5px;
-}
-
-.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;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;
+  background-color: #fff;
+  color: #595959;
+  font: 16px/1.5 'Crimson Pro', serif;
+  margin: 0;
+  padding: 0;
 }
 
 h1, h2, h3, h4, h5, h6 {
-color: #000;
-font-weight: 600;
-line-height: 1.1;
-margin: 0 0 20px;
+  color: #000;
+  line-height: 1.1;
+  margin: 0 0 20px;
 }
 
 h1 {
-font-size: 28px;
-font-weight: 500;
+  font-size: 28px;
+  font-weight: 500;
 }
 
 h2 {
-font-size: 157%;
-font-style: normal;
-font-weight: 500;
-margin: 2px 0 15px;
+  font-size: 157%;
+  font-style: normal;
+  font-weight: 500;
+  margin: 2px 0 15px;
 }
 
 h3 {
-font-size: 115%;
-font-weight: 500;
-margin: 2px 0 15px;
+  font-size: 115%;
+  font-weight: 500;
+  margin: 2px 0 15px;
 }
 
 p, ul, ol, table, pre, dl {
-margin: 0 0 20px;
+  margin: 0 0 20px;
 }
 
 a {
-color: #39c;
-text-decoration: none;
+  color: #39c;
+  text-decoration: none;
 }
 
 a:hover {
-color: #069;
+  color: #069;
 }
 
 .wrapper {
-margin: 0 auto;
-width: 1080px; /* Increase the width */
+  margin: 0 auto;
+  max-width: 1080px;
+  width: 100%;
+  padding: 0 20px;
+  box-sizing: border-box;
 }
 
 header {
--webkit-font-smoothing: subpixel-antialiased;
-float: left;
-padding-top: 4em;
-position: fixed;
-text-align: center;
-width: 250px; /* Slightly increase the width of header */
+  padding-top: 4em;
+  text-align: center;
+  width: 100%;
 }
 
 section {
-margin-left: 255px; /* Adjust the left margin to make the section wider */
-padding-bottom: 50px;
-padding-top: 4em;
-width: 860px; /* Adjust the width */
-}
-
-.footer  {
--webkit-font-smoothing: subpixel-antialiased;
-bottom: 5px;
-float: right;
-position: fixed;
-text-align: center;
-width: 250px; /* Adjust the width to match header */
-}
-
-.image {
-border: 0;
-border-radius: 0.35em;
-display: inline-block;
-position: relative;
-}
-
-.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;
-border-radius: 0.35em;
-content: '';
-display: block;
-height: 100%;
-left: 0;
-opacity: 0.5;
-position: absolute;
-top: 0;
-transition: opacity 0.2s ease-in-out;
-width: 100%;
-}
-
-.image.avatar {
-border-radius: 15px;
-display: inline-block;
-height: 230px;
-object-fit: cover;
-padding: 20px;
-position: relative;
-width: 180px;
+  padding-bottom: 50px;
+  padding-top: 4em;
+  width: 100%;
 }
 
-.image.avatar:before {
-display: none;
+.about-me-section, .news-section, .publications, .fun-section {
+  margin-left: 22px;
+  padding-left: 0;
+  margin-top: 25px;
 }
 
-.image.avatar img {
-border-radius: 10px;
-height: 100%;
-object-fit: cover;
-padding: 0;
-width: 100%;
+.footer {
+  bottom: 5px;
+  text-align: center;
+  width: 100%;
 }
 
-#header .image.avatar {
-height: 150px;
-margin: 0 0 1em 0;
-width: 200px;
-}
-
-.icon-button {
-background-color: white;
-border-radius: 3.6rem;
-cursor: pointer;
-display: inline-block;
-font-size: 2rem;
-height: 1.5rem;
-line-height: 1.5rem;
-margin: 0 5px;
-position: relative;
-text-align: center;
--webkit-user-select: none;
--moz-user-select: none;
--ms-user-select: none;
-user-select: none;
-width: 1.5rem;
-}
-
-.icon-button span {
-border-radius: 0;
-display: block;
-height: 0;
-left: 50%;
-margin: 0;
-position: absolute;
-top: 50%;
--webkit-transition: all 0.3s;
--moz-transition: all 0.3s;
--o-transition: all 0.3s;
-transition: all 0.3s;
-width: 0;
-}
-
-.icon-button:hover span {
-border-radius: 2rem;
-height: 2rem;
-margin: -1.8rem;
-width: 2rem;
-}
-
-.icon-button i {
-background: none;
-color: white;
-height: 2rem;
-left: 0;
-line-height: 2rem;
-position: absolute;
-top: 0;
--webkit-transition: all 0.3s;
--moz-transition: all 0.3s;
--o-transition: all 0.3s;
-transition: all 0.3s;
-width: 3.6rem;
-z-index: 10;
-}
-
-.twitter span {
-background-color: #4099ff;
-}
-
-.facebook span {
-background-color: #4286f4;
-}
-
-.linkedin span {
-background-color: #0077B5;
-}
-
-.github span {
-background-color: #000;
-}
-
-.icon-button .icon-twitter {
-color: #4099ff;
-}
-
-.icon-button .icon-facebook {
-color: #4286f4;
-}
-
-.icon-button .icon-github {
-color: #000;
+.image.avatar {
+  border-radius: 15px;
+  display: inline-block;
+  height: 230px;
+  object-fit: cover;
+  padding: 20px;
+  position: relative;
+  width: 180px;
 }
 
-.icon-button .icon-linkedin {
-color: #0077B5;
+.image.avatar img {
+  border-radius: 10px;
+  height: 100%;
+  object-fit: cover;
+  width: 100%;
 }
 
-.icon-button:hover .icon-twitter,
-.icon-button:hover .icon-facebook,
-.icon-button:hover .icon-github,
-.icon-button:hover .icon-linkedin {
-color: white;
+#header .image.avatar {
+  height: 150px;
+  margin: 0 0 1em 0;
+  width: 200px;
 }
 
 .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;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  gap: 10px;
+  margin-top: 20px;
 }
 
 .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 */
-font-size: 0.9rem; /* Reduce the font size for icons and text */
-text-align: left;
-margin-bottom: 6px; /* Reduce margin-bottom for spacing between icons */
-padding: 0 40px; /* Add padding to the left and right */
+  color: #043361;
+  display: flex;
+  align-items: center;
+  font-size: 0.9rem;
+  text-align: center;
+  padding: 10px;
 }
 
 .social-icons a:hover {
-background-color: white;
-color: black;
-transform: scale(1.1); /* Reduce the scale effect on hover */
+  background-color: white;
+  color: black;
+  transform: scale(1.1);
 }
 
 .social-icons i {
-margin-right: 6px; /* Reduce margin to the right of the icon */
-font-size: 1rem; /* Reduce the font size of the icons */
+  margin-right: 6px;
+  font-size: 1rem;
 }
 
 .social-icons span {
-font-size: 0.9rem; /* Set the font size for the text */
-}
-
-.autocolor {
-color: #595959;
-}
-
-.lightonly {
-visibility: visible;
-}
-
-.darkonly {
-visibility: hidden;
-}
-
-.education {
-font-size: 115%;
-font-weight: 500;
-}
-
-.papertitle {
-font-size: 100%;
-font-weight: 600;
+  font-size: 0.9rem;
 }
 
 .email {
-font-family: "Ubuntu Mono";
-font-size: 14px;
-margin-bottom: 20px;
-}
-
-@media print, screen and (max-width: 960px) {
-.pub-row {
-align-items: center;
-display: flex;
+  font-family: "Ubuntu Mono";
+  font-size: 14px;
+  margin-bottom: 20px;
 }
 
-```
-.wrapper {
-  margin: 0;
-  width: auto;
-}
-
-header, section, footer {
-  float: none;
-  position: static;
-  width: auto;
-}
-
-header {
-  padding-right: 320px;
-}
-
-section {
-  border: 1px solid #e5e5e5;
-  border-width: 1px 0;
-  margin: 0 0 20px;
-  padding: 20px 0;
-}
-
-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: 960px) {
-body {
-padding: 15px;
-word-wrap: break-word;
-}
-
-```
+/* Publication Styles */
 .pub-row {
-  align-items: center;
   display: flex;
+  align-items: center;
+  margin-bottom: 40px;
+  flex-direction: column;
 }
 
-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;
+.pub-row .col-sm-3 {
+  flex: 0 0 100%;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 20px;
 }
 
-header ul {
-  width: 99%;
+.pub-row .col-sm-9 {
+  flex: 1;
+  padding-left: 0;
+  text-align: center;
 }
 
-header li, header ul li + li + li {
-  width: 33%;
+.teaser {
+  width: 100%;
+  height: auto;
+  max-width: 250px;
+  max-height: 150px;
+  object-fit: cover;
+  margin-right: 0;
 }
 
-.image.avatar img {
-  border-radius: 100%;
-  padding: 20px;
-  width: 95px;
+.pub-description {
+  margin-top: 10px;
+  font-size: 8pt;
 }
 
-#head1o2, #head2o2 {
-  visibility: hidden;
+/* FUN section styles */
+#fun {
+  font-style: normal;
 }
 
-```
-
+#fun .h4 {
+  font-weight: 500;
 }
 
-@media print {
-body {
-color: #444;
-font-size: 12pt;
-padding: 0.4in;
-}
+#fun ul {
+  list-style-type: none;
+  padding: 0;
 }
 
-.biblink {
-display: inline;
-margin-right: 0;
-text-decoration: none;
+#fun .music-item {
+  margin-bottom: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
 }
 
-.fakelink {
-cursor: pointer;
-text-decoration: none;
+#fun .audio-btn {
+  background: none;
+  border: none;
+  color: #39c;
+  font-size: 0.8em;
+  margin-top: 10px;
+  cursor: pointer;
 }
 
-.bibref {
-display: none;
-font-family: monospace;
-font-size: 70%;
-margin-left: 0;
-margin-top: 10px;
+#fun .audio-btn:focus {
+  outline: none;
 }
 
-/* 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 */
+#fun .audio-btn i {
+  font-size: 0.8em;
 }
 
-.pub-row .col-sm-3 {
-flex: 0 0 25%;
-display: flex;
-align-items: center; /* Center align items vertically within this column */
+#fun .music-item p {
+  margin: 0;
+  text-align: center;
 }
 
-.pub-row .col-sm-9 {
-flex: 1;
-padding-left: 20px; /* Add padding to separate the text from the image */
+/* Periodical styles */
+.periodical {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
 }
 
-.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 */
+.links {
+  margin-top: 10px;
+  display: flex;
+  gap: 5px;
 }
 
-.pub-description mt-2 {
-margin-top: 2px; /* Adjust the margin to space out the description */
-font-size: 8pt;
+.links .btn {
+  padding: 2px 6px;
+  font-size: 0.875em;
 }
 
 /* Additional General Styles */
 .music-list {
-list-style-type: none;
-padding: 0;
+  list-style-type: none;
+  padding-left: 20px;
 }
 
+.music-list li::before {
+  content: "▪";
+  color: #000;
+  display: inline-block;
+  width: 1em;
+  margin-left: -1em;
+}
 .music-item {
-margin-bottom: 20px;
-display: flex;
-align-items: center;
+  margin-bottom: 20px;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
 }
 
 .audio-btn {
-background: none;
-border: none;
-color: #39c;
-font-size: 1em;
-margin-left: 5px;
-cursor: pointer;
-font-style: normal; /* Ensure the buttons are not italic */
+  background: none;
+  border: none;
+  color: #39c;
+  font-size: 0.8em;
+  margin-top: 10px;
+  cursor: pointer;
 }
 
 .audio-btn:focus {
-outline: none;
+  outline: none;
+}
+
+.audio-btn i {
+  font-size: 0.8em;
 }
 
 .music-item p {
-margin: 0;
-flex-grow: 1;
-font-style: normal; /* Ensure the paragraphs are not italic */
+  margin: 0;
+  text-align: center;
 }
 
 .bibliography {
-list-style-type: none;
-padding-left: 0;
+  list-style-type: none;
+  padding-left: 0;
 }
 
 .bibliography li {
-counter-increment: none;
-padding-left: 0;
+  counter-increment: none;
+  padding-left: 0;
+}
+
+/* Media Queries */
+@media screen and (min-width: 768px) {
+  header {
+    float: left;
+    position: fixed;
+    width: 250px;
+  }
+
+  section {
+    margin-left: 255px;
+    width: calc(100% - 255px);
+  }
+
+  .footer {
+    float: right;
+    position: fixed;
+    width: 250px;
+  }
+
+  .social-icons {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .social-icons a {
+    text-align: left;
+    padding: 0 40px;
+  }
+
+  .pub-row {
+    flex-direction: row;
+  }
+
+  .pub-row .col-sm-3 {
+    flex: 0 0 25%;
+    margin-bottom: 0;
+  }
+
+  .pub-row .col-sm-9 {
+    padding-left: 20px;
+    text-align: left;
+  }
+
+  .teaser {
+    width: 120%;
+    margin-right: 20px;
+  }
+
+  .periodical {
+    flex-direction: row;
+  }
+
+  .links {
+    margin-top: 0;
+    margin-left: 10px;
+  }
+
+  #fun .music-item {
+    flex-direction: row;
+    justify-content: flex-start;
+  }
+
+  #fun .audio-btn {
+    margin-top: 0;
+    margin-left: 4px;
+  }
+
+  #fun .music-item p {
+    text-align: left;
+  }
+
+  .music-item {
+    flex-direction: row;
+  }
+
+  .audio-btn {
+    margin-top: 0;
+    margin-left: 5px;
+  }
+
+  .music-item p {
+    text-align: left;
+  }
 }