Remove a bunch of unnecessary CSS

index.html

@@ -64,13 +64,13 @@
         </div>
       </button>
     </a>
-    <a href="https://radio.jimbosfiles.com/public/jimbops/">
+    <a href="https://icecast.jimbosfiles.com/">
       <button class="custom-button radio">
         <div class="color-part"></div>
         <div class="button-content">
           <img class="button-image" src="./images/azuracast.png" alt="Button Logo" style="width: 5em; height: auto;">
           <span class="button-text">Radio</span>
-          <span class="button-subtext">My Music Folder</span>
+          <span class="button-subtext">In Production</span>
         </div>
       </button>
     </a>

styles.css

@@ -10,15 +10,10 @@
 body {
   display: flex;
   flex-direction: column;
-  align-items: center;
-  justify-content: center; /* Center the button container vertically */
   margin: 0;
-  overflow-x: hidden;
   height: 100vh; /* Ensure body height fits within viewport */
   background: #20256e;
   color: white;
-  position: relative; /* Relative positioning for footer */
-  overflow-y: auto; /* Allow vertical scrolling if content overflows */
 }
 
 header {
@@ -32,8 +27,6 @@ header {
   align-items: center;
   flex-wrap: wrap;
   margin-top: 5em;
-  margin-bottom: 2em;
-  margin-left: 2em;
 }
 
 header img {
@@ -46,10 +39,8 @@ header img {
   display: flex;
   flex-wrap: wrap; /* Allow wrapping of buttons to the next line */
   justify-content: center; /* Center buttons horizontally within the container */
-  max-width: calc(13em * var(--button-scale) * 3 + 2em); /* Max width for 3 buttons plus gap */
   gap: 1em; /* Space between buttons */
   margin: auto; /* Center the button container vertically */
-  position: relative; /* Ensure container is within the viewport */
 }
 
 .custom-button {
@@ -69,16 +60,6 @@ header img {
   transform: scale(1.05); /* Slightly enlarge the button on hover */
 }
 
-.custom-button.selected {
-  transform: scale(1.05); /* Keep the button enlarged */
-  border-color: #007BFF; /* Optional: Add a border color to indicate selection */
-}
-
-.button-offline {
-  filter: grayscale(40%) contrast(100%); /* Greyscale effect */
-  opacity: 0.5; /* Reduced opacity */
-}
-
 /* Color classes for buttons */
 .cloud .color-part { background-color: #5ca9d6; }
 .warden .color-part { background-color: #63b8a4; }
@@ -104,14 +85,13 @@ header img {
 .button-content {
   display: flex;
   flex-direction: column; /* Stack text lines vertically */
-  align-items: center;
   justify-content: center; /* Center content horizontally */
   margin-left: calc(1.8em * var(--button-scale)); /* Space for the colored part */
   position: relative;
   z-index: 2; /* Ensure this is above the colored part */
-  flex: 1;
   height: 100%; /* Ensure it fills the button's height */
   padding: 0 0.5em; /* Optional: add padding for spacing */
+  flex: 1;
 }
 
 .button-content .button-text {
@@ -133,10 +113,6 @@ header img {
   z-index: 2; /* Ensure this is above the colored part */
 }
 
-.image-container {
-  justify-content: center;
-}
-
 .image-container img {
   width: 83%;
   display: flex;
@@ -150,15 +126,12 @@ header img {
 @media (max-width: 800px) {
   header {
     position: relative; /* Keep header at the top */
-    flex-direction: row;
-    align-items: center;
     margin-left: 0;
     margin-top: 0;
     margin-bottom: 0;
   }
 
   body {
-    min-height: 100%; /* Ensure minimum height covers full viewport */
     height: unset;
     padding-top: 1em; /* Add space for footer */
     justify-content: flex-start; /* Ensure content starts from the top */
@@ -170,5 +143,6 @@ header img {
     max-width: 100%; /* Allow the container to fit within viewport width */
     gap: 1em; /* Adjust gap for mobile */
     padding-bottom: 5em;
+    height: 100%;
   }
 }