change header styles

assets/css/custom_style.css

@@ -1,83 +0,0 @@
-@media screen and (min-width: 70em) { .main-content { max-width: 70rem; padding: 2rem 6rem; margin: 0 auto; font-size: 1.1rem; } }
-@font-face { font-family: 'flexslider-icon'; src: url("../fonts/flexslider-icon.eot"); src: url("../fonts/flexslider-icon.eot?#iefix") format("embedded-opentype"), url("../fonts/flexslider-icon.woff") format("woff"), url("../fonts/flexslider-icon.ttf") format("truetype"), url("../fonts/flexslider-icon.svg#flexslider-icon") format("svg"); font-weight: normal; font-style: normal; }
-header h1, header h2 { font-weight: normal; line-height: normal; }
-
-header h2 { margin-top: .83em; }
-
-.main-content p { text-align: justify; }
-
-.jailbreak-intro-sec { width: 80%; margin: 1em auto; }
-
-#refusal-loss-formula .formula { text-align: center; }
-
-#refusal-loss-formula .formula-list { width: fit-content; margin: 0 auto; }
-
-#refusal-loss-formula .formula-list a { display: inline-block; width: 250px; margin: 0 20px; padding: 8px 10px; text-align: center; background: #DDD; cursor: pointer; text-decoration: none; color: #333; border-radius: 10px; user-select: none; transition-duration: 0.3s; }
-
-#jailbreak-demo .radio-group { margin-right: 5px; }
-
-input[type='radio'] { visibility: hidden; display: none; }
-
-#jailbreak-demo .radio-group .option-label { font-size: 1em; cursor: pointer; position: relative; padding: 0.1em 0.6em; border: 1px solid #999; background: #FFF; border-radius: 0.2em; transition: 0.2s; }
-
-#jailbreak-demo .radio-group .options:checked ~ .option-label { color: #FFF; background: #777; }
-
-#refusal-loss-formula .formula-list a:hover, #jailbreak-demo #defense-methods .defense:hover { background: #555; color: #FFF; }
-
-#jailbreak-demo #defense-methods .options:checked ~ .defense { color: #FFF; background: #555; }
-
-#jailbreak-demo #defense-methods .defense { display: inline-block; width: 60%; margin: 2% auto 8%; padding: 8px 10px; text-align: center; background: #DDD; cursor: pointer; text-decoration: none; color: #333; border-radius: 10px; user-select: none; transition-duration: 0.3s; }
-
-#jailbreak-demo .legend { text-align: center; width: 70%; margin: 0 auto; }
-
-#jailbreak-demo .figure-option { text-align: center; width: 70%; margin: 4% auto 0; /* Customize the label (the container) */ /* Hide the browser's default checkbox */ /* Create a custom checkbox */ /* On mouse-over, add a grey background color */ /* When the checkbox is checked, add a blue background */ /* Create the checkmark/indicator (hidden when not checked) */ /* Show the checkmark when checked */ /* Style the checkmark/indicator */ }
-#jailbreak-demo .figure-option .container { display: block; position: relative; padding-left: 35px; margin-bottom: 12px; cursor: pointer; font-size: 22px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
-#jailbreak-demo .figure-option .container input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }
-#jailbreak-demo .figure-option .checkmark { position: absolute; top: 4px; left: 8px; height: 25px; width: 25px; background-color: #eee; }
-#jailbreak-demo .figure-option .container:hover input ~ .checkmark { background-color: #ccc; }
-#jailbreak-demo .figure-option .container input:checked ~ .checkmark { background-color: #9b9bff; }
-#jailbreak-demo .figure-option .checkmark:after { content: ""; position: absolute; display: none; }
-#jailbreak-demo .figure-option .container input:checked ~ .checkmark:after { display: block; }
-#jailbreak-demo .figure-option .container .checkmark:after { left: 9px; top: 5px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
-
-#jailbreak-demo .figure { margin: 0 auto; display: block; }
-
-#jailbreak-demo .figure #original { display: none; }
-
-#jailbreak-demo .figure img { user-drag: none; -webkit-user-drag: none; user-select: none; -khtml-user-drag: none; -moz-user-drag: none; -o-user-drag: none; pointer-events: none; position: relative; left: 35px; }
-
-#jailbreak-demo .figure-caption { width: 240px; text-align: center; display: block; margin: 0 auto; padding: 10px 0 0; font-size: .8em; }
-
-#jailbreak-demo .figure-caption ul { padding-left: 0; }
-
-#jailbreak-demo .figure-caption ul li { list-style: none; }
-
-#jailbreak-demo .figure-caption .model-prediction { font-weight: bold; }
-
-#jailbreak-demo .figure-caption .correct { color: #009926; }
-
-#jailbreak-demo .figure-caption .wrong { color: #e31327; }
-
-#jailbreak-demo .attack-success-rate { display: inline-block; width: 60%; margin: 2% auto 8%; padding: 8px 10px; text-align: center; text-decoration: none; background: #DDD; color: #333; border-radius: 10px; user-select: none; }
-#jailbreak-demo .attack-success-rate .jailbreak-metric { font-size: 0.75em; display: block; }
-#jailbreak-demo .attack-success-rate .attack-success-rate-value { font-size: 1.5em; font-family: "sans-serif"; color: #820000; }
-
-#jailbreak-demo .benign-refusal-rate { display: inline-block; width: 60%; margin: 2% auto 8%; padding: 8px 10px; text-align: center; text-decoration: none; background: #DDD; color: #333; border-radius: 10px; user-select: none; }
-#jailbreak-demo .benign-refusal-rate .jailbreak-metric { font-size: 0.75em; display: block; }
-#jailbreak-demo .benign-refusal-rate .benign-refusal-rate-value { font-size: 1.5em; font-family: "sans-serif"; color: #820000; }
-
-.warning-quote { padding: 15px; font-size: 0.8em; background-color: #f43636ba; color: white; margin-bottom: 15px; border-left: 5px solid #ff3030; transition-duration: 0.3s; }
-
-.closebtn { margin-left: 15px; color: white; font-weight: bold; float: right; font-size: 6px; line-height: 20px; cursor: pointer; transition: 0.3s; }
-
-/* When moving the mouse over the close button */
-.closebtn:hover { color: black; }
-
-.slider-container { display: block; margin-top: 1em; margin-bottom: 0.5em; float: left; }
-
-.slider-label { width: 140px; float: left; line-height: 1; }
-
-.slider-content { width: 450px; position: relative; float: right; }
-
-#ppl-threshold, #gradient-norm-threshold { width: 3em; height: 1.6em; top: 50%; margin-top: -.8em; text-align: center; line-height: 1.6em; }
-

assets/css/style.css

@@ -4,7 +4,7 @@
 html { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ }
 
 /** Remove default margin. */
-body { margin: 0; }
+body { margin: 0; font-family: sans-serif;}
 
 /* HTML5 display definitions ========================================================================== */
 /** Correct `block` display not defined for any HTML5 element in IE 8/9. Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox. Correct `block` display not defined for `main` in IE 11. */
@@ -275,9 +275,9 @@ a:hover { text-decoration: underline; }
 @media screen and (max-width: 42em) { .page-header { padding: 2rem 1rem; } }
 
 .project-name { margin-top: 0; margin-bottom: 0.1rem; }
-@media screen and (min-width: 64em) { .project-name { font-size: 3.25rem; } }
-@media screen and (min-width: 42em) and (max-width: 64em) { .project-name { font-size: 2.25rem; } }
-@media screen and (max-width: 42em) { .project-name { font-size: 1.75rem; } }
+@media screen and (min-width: 64em) { .project-name { font-size: 4.25rem; } }
+@media screen and (min-width: 42em) and (max-width: 64em) { .project-name { font-size: 3.25rem; } }
+@media screen and (max-width: 42em) { .project-name { font-size: 2.75rem; } }
 
 .project-tagline { margin-bottom: 2rem; font-weight: normal; opacity: 0.7; }
 @media screen and (min-width: 64em) { .project-tagline { font-size: 1.25rem; } }

index.html

@@ -23,8 +23,8 @@
     <link rel="stylesheet" href="assets/css/style.css?v=90447f115a006bc45b738d9592069468b20e2551">
     <!-- start custom head snippets, customize with your own _includes/head-custom.html file -->
     <link rel="stylesheet" href="assets/css/custom_style.css?v=90447f115a006bc45b738d9592069468b20e2551">
-
-    <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
     <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
     <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
@@ -32,133 +32,66 @@
     <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
     <link rel="stylesheet" href="/resources/demos/style.css">
     <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
-    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script> -->
+    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
     
     <!-- for mathjax support -->
     <script src="https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?features=es6"></script>
     <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
     <!-- end custom head snippets -->
     
-    <script>
-        let normalIndex = 0;
-        let attackIndex = 0;
-    
-        function navigateImages(type, direction) {
-            let images;
-            let currentIndex;
-    
-            // Determine which set of images to target and the current index
-            if (type === 'normal') {
-                images = document.querySelectorAll('.normal-gallery .image-gallery img');
-                currentIndex = normalIndex;
-            } else if (type === 'attack') {
-                images = document.querySelectorAll('.attack-gallery .image-gallery img');
-                currentIndex = attackIndex;
-            }
-    
-            // Check if images were found to avoid accessing undefined elements
-            if (images && images.length > 0) {
-                // Hide current image
-                images[currentIndex].classList.remove('active');
-    
-                // Calculate new index (modulo ensures cycling)
-                currentIndex = (currentIndex + direction + images.length) % images.length;
-    
-                // Show new image
-                images[currentIndex].classList.add('active');
-    
-                // Update index tracker
-                if (type === 'normal') {
-                    normalIndex = currentIndex;
-                } else if (type === 'attack') {
-                    attackIndex = currentIndex;
-                }
-            } else {
-                console.error("No images found for type:", type);
-            }
-        }
-    </script>
-    
-    <style>
-      .image-gallery-container {
-          position: relative;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          margin: 20px auto;
-      }
+    <!-- Font Awesome for PDF and GitHub icons -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
 
-      .image-gallery {
-          width: 80%; /* Increased width */
-          max-height: 600px; /* Increased height */
-          overflow: hidden;
-          position: relative;
-          margin-left: 50px;
-          margin-right: 50px;
-      }
-
-      .image-gallery img {
-          width: 100%;
-          height: auto;
-          border-radius: 10px;
-          display: none;
-      }
-
-      .image-gallery img.active {
-          display: block;
-      }
-
-      .arrow {
-          cursor: pointer;
-          position: absolute;
-          top: 50%;
-          transform: translateY(-50%);
-          font-size: 2.5em;
-          color: #444; /* Darker color */
-          padding: 5px 15px;
-          transition: color 0.3s;
-          user-select: none;
-          transform: scaleX(0.7);
-      }
-
-      .arrow:hover {
-          color: #007bff; /* Color on hover */
-      }
-
-      .left-arrow {
-          left: 20px; /* Adjusted position */
-      }
+    <!-- AI2 HTML-CSS Icons (for arXiv) -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/academicons/1.9.1/css/academicons.min.css">
 
-      .right-arrow {
-          right: 20px; /* Adjusted position */
-      }
-
-      .group-title {
-          font-size: large;
-          font-weight: bold;
-          margin-top: 30px;
-          font-size: 1.2em;
-          text-align: center; /* Center the text */
-          display: block; /* Ensure it behaves as a block element */
-          margin-bottom: 10px; /* Add some space below the title */
-      }
-      
-      .green {
-        color: green; /* Set text color to green */
-      }
-
-      .red {
-        color: red; /* Set text color to green */
+    <script>
+      let normalIndex = 0;
+      let attackIndex = 0;
+  
+      function navigateImages(type, direction) {
+          let images;
+          let currentIndex;
+  
+          // Determine which set of images to target and the current index
+          if (type === 'normal') {
+              images = document.querySelectorAll('.normal-gallery .image-gallery img');
+              currentIndex = normalIndex;
+          } else if (type === 'attack') {
+              images = document.querySelectorAll('.attack-gallery .image-gallery img');
+              currentIndex = attackIndex;
+          }
+  
+          // Check if images were found to avoid accessing undefined elements
+          if (images && images.length > 0) {
+              // Hide current image
+              images[currentIndex].classList.remove('active');
+  
+              // Calculate new index (modulo ensures cycling)
+              currentIndex = (currentIndex + direction + images.length) % images.length;
+  
+              // Show new image
+              images[currentIndex].classList.add('active');
+  
+              // Update index tracker
+              if (type === 'normal') {
+                  normalIndex = currentIndex;
+              } else if (type === 'attack') {
+                  attackIndex = currentIndex;
+              }
+          } else {
+              console.error("No images found for type:", type);
+          }
       }
-    </style>
-
+  </script>
+    
   </head>
   <body>
     <header class="page-header" role="banner">
-      <h1 class="project-name">Attention Tracker</h1>
+      <h1 class="project-name" style="font-weight: 500;">Attention Tracker</h1>
       <h2 class="project-tagline">Attention Tracker: Detecting Prompt Injection Attacks in LLMs</h2>
-      <h2 class="project-tagline"><a href="https://arxiv.org/abs/xxx" style="color: white;" target="_blank" rel="noopener noreferrer">https://arxiv.org/abs/xx.xx</a></h2>
-      <div style="text-align: center; font-size: large;">
+      <p/>
+      <div style="text-align: center; font-size:larger; ">
         <div>
           <a href="https://khhung906.github.io/" style="color: white;" target="_blank" rel="noopener noreferrer">
             Kuo-Han Hung<sup>1</sup>,
@@ -182,12 +115,57 @@
           </a>
         </div>
         
-        <div>
+        <div style="color: #f1f0f0">
           <sup>1</sup>National Taiwan University <sup>2</sup>IBM Research
         </div>
+
+        <div class="publication-links">
+          <span class="link-block">
+              <a href="https://arxiv.org/pdf/<ARXIV PAPER ID>.pdf" target="_blank"
+                  class="external-link button is-normal is-rounded is-dark">
+                  <span class="icon">
+                      <i class="fas fa-file-pdf"></i>
+                  </span>
+                  <span>Paper</span>
+              </a>
+          </span>
+      
+          <span class="link-block">
+              <a href="https://arxiv.org/abs/<ARXIV PAPER ID>" target="_blank"
+                  class="external-link button is-normal is-rounded is-dark">
+                  <span class="icon">
+                      <i class="ai ai-arxiv"></i>
+                  </span>
+                  <span>arXiv</span>
+              </a>
+          </span>
+      
+          <span class="link-block">
+              <a href="https://github.com/YOUR REPO HERE" target="_blank"
+                  class="external-link button is-normal is-rounded is-dark">
+                  <span class="icon">
+                      <i class="fab fa-github"></i>
+                  </span>
+                  <span>Code</span>
+              </a>
+          </span>
+      
+          <span class="link-block">
+              <a href="https://dataset-link.com" target="_blank"
+                  class="external-link button is-normal is-rounded is-dark">
+                  <span class="icon">
+                      <i class="fas fa-laptop"></i>
+                  </span>
+                  <span>Demo</span>
+              </a>
+          </span>
+      </div>
+
     </header>
+
+    
     <main id="content" class="main-content" role="main">
-      <h2 id="abstract">Abstract</h2>
+      <h2 id="abstract" class="section-title">Abstract</h2>
 
       <p>Large Language Models (LLMs) have revolutionized various domains but remain vulnerable to prompt injection attacks, where malicious inputs manipulate the model into ignoring original instructions and executing designated action. In this paper, we investigate
         the underlying mechanisms of these attacks by analyzing the attention patterns within LLMs.
@@ -199,11 +177,11 @@
         demonstrate the robustness of our approach through extensive evaluations and provide insights into safeguarding LLM-integrated systems from prompt injection vulnerabilities.
       </p>
 
-      <h2 id="what-is-jailbreak">What is Prompt Injection Attack?</h2>
+      <h2 id="what-is-jailbreak" class="section-title">What is Prompt Injection Attack?</h2>
       <p>A Prompt Injection Attack is a technique used to manipulate language models (like GPT-3 or similar AI systems) by injecting malicious or deceptive prompts into the input data, causing the model to behave in unexpected or undesired ways. This attack exploits the way language models interpret and respond to instructions, tricking them into providing information or performing actions that were not originally intended.</p>
 
 
-      <h2 id="refusal-loss">Distraction Effect</h2>
+      <h2 id="refusal-loss" class="section-title">Distraction Effect</h2>
 
       <p>
         In this section, we analyze the reasons behind the success of prompt injection attacks on LLMs. Specifically, we aim to understand 
@@ -223,7 +201,7 @@
 
       </div>
 
-      <h2 id="proposed-approach-attention-tracker">Proposed Approach: Attention Tracker</h2>
+      <h2 id="proposed-approach-attention-tracker" class="section-title">Proposed Approach: Attention Tracker</h2>
       <p> With the discover of distraction effect, we propose <strong>Attention Tracker</strong>, 
         a prompt injection detection method based on tracking the attention pattern on instruction. Our detection procedure is shown below:
       </p>
@@ -245,7 +223,7 @@
       We provide more details about the running flow of Attention Tracker in the paper.
       </p>
             
-      <h2 id="result-attention-tracker">Experiment Result</h2>
+      <h2 id="result-attention-tracker" class="section-title">Experiment Result</h2>
       <p>
         In this section, we evaluate Attention Tracker against various baselines with the AUROC score on two prompt injection detection benchmarks: Open-Prompt-Injection and deepset prompt injection dataset:
       </p>
@@ -254,7 +232,7 @@
       <p>
         As shown in the table, Attention Tracker consistently outperforms existing baselines, with an AUROC improvement of up to 3.1% on the Open-Prompt-Injection benchmark and 10.0% on the deepset prompt injection dataset. Among training-free methods, it achieves even greater gains, with an average AUROC improvement of 31.3% and 20.9% across the two datasets, respectively. Unlike LLM-based methods that rely on larger models for stability, Attention Tracker delivers robust and effective performance even with smaller LLMs, underscoring its suitability for real-world applications.
       </p>
-      <h2 id="demonstration">Demo</h2>
+      <h2 id="demonstration" class="section-title">Demo</h2>
 
       <p>
         We evaluated the effectiveness of the Attention Tracker by visualizing the distribution of attention aggregation for key heads across different data types (normal data vs. attack data) in the Open-Prompt-Injection dataset. Additionally, we calculated the focus score for these data samples. A higher focus score indicates a lower likelihood of prompt injection attacks. The tested model is Qwen-2 1.8b.
@@ -268,7 +246,6 @@
               <img id="normalImage2" src="./demo_results/normal_2.png" alt="Normal Image 2">
               <img id="normalImage3" src="./demo_results/normal_3.png" alt="Normal Image 3">
               <img id="normalImage4" src="./demo_results/normal_4.png" alt="Normal Image 4">
-              <img id="normalImage4" src="./demo_results/normal_5.png" alt="Normal Image 5">
           </div>
           <span class="arrow right-arrow" onclick="navigateImages('normal', 1)">&gt;</span>
       </div>
@@ -285,12 +262,12 @@
           <span class="arrow right-arrow" onclick="navigateImages('attack', 1)">&gt;</span>
       </div>
 
-      <h2 id="inquiries"> Inquiries on Attention Tracker</h2>
-      <p> Please contact <a href="Mailto:khhung906@gmail.com">Kuo-Han Hung</a>
+      <!-- <h2 id="inquiries" class="section-title"> Inquiries on Attention Tracker</h2>
+      <p class="section-title"> Please contact <a href="Mailto:khhung906@gmail.com">Kuo-Han Hung</a>
           and <a href="Mailto:pin-yu.chen@ibm.com">Pin-Yu Chen</a> 
-      </p>
+      </p> -->
 
-      <h2 id="citations">Citations</h2>
+      <h2 id="citations" class="section-title">Citations</h2>
       <p>If you find Attention Tracker helpful and useful for your research, please cite our main paper as follows:</p>
 
       <div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>

style.css

@@ -1,86 +1,112 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+.image-gallery-container {
+	position: relative;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	margin: 20px auto;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+.image-gallery {
+	width: 80%; /* Increased width */
+	max-height: 600px; /* Increased height */
+	overflow: hidden;
+	position: relative;
+	margin-left: 50px;
+	margin-right: 50px;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+.image-gallery img {
+	width: 100%;
+	height: auto;
+	border-radius: 10px;
+	display: none;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+.image-gallery img.active {
+	display: block;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+.arrow {
+	cursor: pointer;
+	position: absolute;
+	top: 50%;
+	transform: translateY(-50%);
+	font-size: 2.5em;
+	color: #444; /* Darker color */
+	padding: 5px 15px;
+	transition: color 0.3s;
+	user-select: none;
+	transform: scaleX(0.7);
 }
 
-.image-gallery {
-	display: flex; /* Use flexbox for side-by-side images */
-	justify-content: center;
-	gap: 20px; /* Space between images */
-	margin-top: 20px; /* Add space above the image gallery */
+.arrow:hover {
+	color: #007bff; /* Color on hover */
 }
 
-.image-gallery img {
-	width: 80%; /* Set width to 80% of the window */
-	max-width: 500px; /* Ensure maximum width remains 500px */
-	height: auto; /* Maintain aspect ratio */
-	border-radius: 10px; /* Rounded corners for images */
-	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Add shadow to images */
-	display: none; /* Initially hide all images */
+.left-arrow {
+	left: 20px; /* Adjusted position */
 }
 
-.button-container {
-	text-align: center;
-	margin-top: 20px;
+.right-arrow {
+	right: 20px; /* Adjusted position */
 }
 
-.button-container .group-title {
+.group-title {
+	font-size: large;
 	font-weight: bold;
-	margin: 20px 0 10px;
+	margin-top: 30px;
 	font-size: 1.2em;
+	text-align: center; /* Center the text */
+	display: block; /* Ensure it behaves as a block element */
+	margin-bottom: 10px; /* Add some space below the title */
 }
 
-.normal-button {
-	background-color: #28a745; /* Green for Normal Data */
+.green {
+  color: green; /* Set text color to green */
 }
 
-.attack-button {
-	background-color: #dc3545; /* Red for Attack Data */
+.red {
+  color: red; /* Set text color to green */
 }
 
-.button-container button {
-	padding: 10px 20px;
-	margin: 5px;
-	border: none;
-	color: white;
-	cursor: pointer;
-	border-radius: 5px;
-	font-size: 1em; /* Increased font size */
-	transition: background-color 0.3s, transform 0.3s; /* Smooth transitions */
+.section-title {
+  text-align: center;
+}
+
+
+.publication-links {
+    text-align: center;
+    margin-top: 20px;
+}
+
+.link-block {
+    display: inline-block;
+    margin: 8px; /* Increase spacing between buttons */
+}
+
+.button {
+    display: inline-flex;
+    align-items: center;
+    padding: 10px 18px; /* Larger padding for bigger buttons */
+    text-decoration: none;
+    color: black; /* Fixed text color */
+    background-color: rgb(236, 236, 236); /* Dark background color */
+    border-radius: 25px; /* Rounded corners */
+    font-size: 18px; /* Larger font size */
+    transition: background-color 0.3s ease;
 }
 
-.button-container button:hover {
-	transform: scale(1.05); /* Slightly increase size on hover */
+.button:hover {
+    background-color: #495057; /* Slightly lighter on hover */
+    color: white; /* Ensure text color remains white on hover */
 }
 
-.normal-button:hover {
-	background-color: #218838; /* Darker green on hover */
+.icon {
+    margin-right: 8px; /* Adjust spacing between icon and text */
+    font-size: 20px; /* Larger icon size */
 }
 
-.attack-button:hover {
-	background-color: #c82333; /* Darker red on hover */
+/* Adjust font size for icons */
+.fas, .fab, .ai {
+    font-size: 20px; /* Ensuring all icons match the new size */
 }