diff --git a/index.html b/index.html
index 76f98b6..4ca740e 100644
--- a/index.html
+++ b/index.html
@@ -64,13 +64,13 @@
-
+
diff --git a/styles.css b/styles.css
index 079c673..dbecbdd 100644
--- a/styles.css
+++ b/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%;
}
}