css cleanup

src/main/resources/templates/fragments/errorBannerPerPage.html

@@ -1,23 +1,5 @@
 <th:block th:fragment="errorBannerPerPage">
 
-  <style scoped>
-    #github-button,
-    #discord-button {
-      display: inline-block;
-      padding: 1rem 2rem;
-      background-color: #008CBA;
-      color: #fff;
-      text-align: center;
-      text-decoration: none;
-      border-radius: 3rem;
-      transition: all 0.3s ease-in-out;
-    }
-
-    #github-button:hover,
-    #discord-button:hover {
-      background-color: #005b7f;
-    }
-  </style>
   
   <div id="errorContainer" class="alert alert-danger alert-dismissible fade show" role="alert" style="display: none;">
   <h4 class="alert-heading">Error</h4>
@@ -40,105 +22,7 @@
 </div>
 
 <!-- Help Modal -->
-   <style scoped>
-   #errorContainer {
-      margin: 20px; /* adjust this value as needed */
-    }
-    
-	#helpModalDialog {
-        width: 90%;
-        max-width: 800px;
-    }
-      #helpModal h1 {
-        text-align: center;
-        margin-top: 10%;
-      }
-
-      #helpModal p {
-
-        text-align: center;
-        margin-top: 2em;
-      }
-
-
-        #helpModal .button:hover {
-          background-color: #005b7f;
-        }
-  
-      #helpModal .features-container {
-        display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(21rem, 3fr));
-        gap: 25px 30px;
-      }
-
-      #helpModal .feature-card {
-        border: 1px solid rgba(0, 0, 0, .125);
-        border-radius: 0.25rem;
-        padding: 1.25rem;
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-      }
-
-      #helpModal .feature-card .card-text {
-        flex: 1;
-      }
-      
-#support-section {
-background-color: #f9f9f9;
-padding: 4rem;
-  margin-top: 1rem;
-text-align: center;
-}
-
-#support-section h1 {
-margin-top: 0;
-}
-
-#support-section p {
-margin-top: 0;
-}
-
-#button-group {
-  display: flex;
-  justify-content: center;
-  flex-wrap: wrap;
-}
-
-#github-button, #discord-button {
-  display: inline-block;
-  padding: 1rem 2rem;
-  margin: 1rem;
-  background-color: #008CBA;
-  color: #fff;
-  font-size: 1.2rem;
-  text-align: center;
-  text-decoration: none;
-  border-radius: 3rem;
-  transition: all 0.3s ease-in-out;
-}
-
-#github-button:hover, #discord-button:hover, #home-button:hover {
-  background-color: #005b7f;
-}
-
-#home-button {
-  display: block;
-        width: 200px;
-        height: 50px;
-        margin: 2em auto;
-        background-color: #008CBA;
-        color: white;
-        text-align: center;
-        line-height: 50px;
-        text-decoration: none;
-        font-weight: bold;
-        border-radius: 25px;
-  transition: all 0.3s ease-in-out;
-}
-
-      
-    </style>
+<link rel="stylesheet" href="css/errorBanner.css">
     
 	<div class="modal fade" id="helpModal" tabindex="-1" role="dialog" aria-labelledby="helpModalLabel" aria-hidden="true">
 	  <div class="modal-dialog modal-dialog-centered" role="document" id="helpModalDialog">