/* Basic reset to remove margins and padding from body */
body {
    margin: 0;
    padding: 0;
    background-color: #000;
    overflow: hidden;
}

/* Full-Screen Image Container */
.image-container {
    position: relative; /* Needed for absolute positioning of the play button */
    width: 100vw; /* Full width of the viewport */
    height: 100vh; /* Full height of the viewport */
}

.image-container2 {
    position: absolute; /* Needed for absolute positioning of the play button */
    width: 23vw; /* Full width of the viewport */
    height: 22vh; /* Full height of the viewport */
}

.image-text {
    /* Positions the text relative to the .image-container2 */
    position: absolute;
    /* Example positioning: Bottom left corner */
    bottom: 10px;
    left: 10px;
    /* Add styling for readability over an image */
    color: white;
    background-color: rgba(0, 0, 0, 1);
    padding: 5px;
    font-size: 14px;
}

/* Full-Screen Image Styling */
.image {
    width: 100%; /* Make the image fill the full width */
    height: 100%; /* Make the image fill the full height */
    object-fit: cover; /* Ensures the image covers the entire screen while maintaining its aspect ratio */
}

.smallimage {
    width: 23%; /* Make the image fill the full width */
    height: 22%; /* Make the image fill the full height */
    object-fit: cover; /* Ensures the image covers the entire screen while maintaining its aspect ratio */
}
.smallimage2 {
    width: 100%; /* Make the image fill the full width */
    height: 100%; /* Make the image fill the full height */
    object-fit: cover; /* Ensures the image covers the entire screen while maintaining its aspect ratio */
}

/* Play button styling */
.play-button {
    position: absolute; /* Position the button absolutely over the image */
    top: 35%; /* Center vertically */
    left: 20%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust for exact center */
    background-color: #9582b2; /* Blue background */
    border: none;
    width: 130px;
    border-radius: 5%; /* Circular button */
    padding: 0px; /* Size of the button */
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0);
}
.volume1-button {
    position: absolute; /* Position the button absolutely over the image */
    top: -345%; /* Center vertically */
    left: 220%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust for exact center */
    background-color: #90EE90; /* Blue background */
    background-color: transparent;
    border: none;
    border-radius: 50%; /* Circular button */
    padding: 0px; /* Size of the button */
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0);
}
.volume2-button {
    position: absolute; /* Position the button absolutely over the image */
    top: -215%; /* Center vertically */
    left: 220%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust for exact center */
    background-color: #90EE90; /* Blue background */
    background-color: transparent;
    border: none;
    border-radius: 50%; /* Circular button */
    padding: 0px; /* Size of the button */
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0);
}
.shop-button {
    position: absolute; /* Position the button absolutely over the image */
    top: -195%; /* Center vertically */
    left: 87%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust for exact center */
    background-color: #ac7bac; /* Blue background */
    background-color: transparent;
    border: none;
    border-radius: 50%; /* Circular button */
    padding: 0px; /* Size of the button */
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0);
}

.moregames-button {
    position: absolute; /* Position the button absolutely over the image */
    top: -95%; /* Center vertically */
    left: 87%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust for exact center */
    background-color: #ac7bac; /* Blue background */
    background-color: transparent;
    border: none;
    border-radius: 50%; /* Circular button */
    padding: 0px; /* Size of the button */
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0);
}

.help-button {
    position: absolute; /* Position the button absolutely over the image */
    top: -245%; /* Center vertically */
    left: 87%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust for exact center */
    background-color: #ac7bac; /* Blue background */
    background-color: transparent;
    border: none;
    border-radius: 50%; /* Circular button */
    padding: 0px; /* Size of the button */
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0);
}

.back-button {
    position: absolute; /* Position the button absolutely over the image */
    top: -70%; /* Center vertically */
    left: 153%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust for exact center */
    background-color: #ac7bac; /* Blue background */
    background-color: transparent;
    border: none;
    border-radius: 50%; /* Circular button */
    padding: 0px; /* Size of the button */
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0);
}

.back-button2 {
    position: absolute; /* Position the button absolutely over the image */
    top: -60%; /* Center vertically */
    left: 225%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust for exact center */
    background-color: #ac7bac; /* Blue background */
    background-color: transparent;
    border: none;
    border-radius: 50%; /* Circular button */
    padding: 0px; /* Size of the button */
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0);
}

.back-button3 {
    position: absolute; /* Position the button absolutely over the image */
    top: -30%; /* Center vertically */
    left: 220%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust for exact center */
    background-color: #ac7bac; /* Blue background */
    background-color: transparent;
    border: none;
    border-radius: 50%; /* Circular button */
    padding: 0px; /* Size of the button */
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0);
}

.replay-button {
    position: absolute; /* Position the button absolutely over the image */
    top: -70%; /* Center vertically */
    left: 263%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust for exact center */
    background-color: #ac7bac; /* Blue background */
    background-color: transparent;
    border: none;
    border-radius: 50%; /* Circular button */
    padding: 0px; /* Size of the button */
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0);
}

.coin-button {
    position: absolute; /* Position the button absolutely over the image */
    top: -430%; /* Center vertically */
    left: 400%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust for exact center */
    background-color: rgba(1,1,1,0); /* Blue background */
    border: none;
    border-radius: 50%; /* Circular button */
    padding: 0px; /* Size of the button */
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0);
}
.coin-button2 {
    position: absolute; /* Position the button absolutely over the image */
    top: -280%; /* Center vertically */
    left: 250%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust for exact center */
    background-color: rgba(1,1,1,0); /* Blue background */
    border: none;
    border-radius: 50%; /* Circular button */
    padding: 0px; /* Size of the button */
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0);
}

.trophy-button {
    position: absolute; /* Position the button absolutely over the image */
    top: -212%; /* Center vertically */
    left: 155%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust for exact center */
    background-color: #ac7bac; /* Blue background */
    background-color: transparent;
    border: none;
    border-radius: 50%; /* Circular button */
    padding: 0px; /* Size of the button */
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0);
}
.mute-button {
    position: absolute; /* Position the button absolutely over the image */
    top: -145%; /* Center vertically */
    left: 87%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust for exact center */
    background-color: #ac7bac; /* Blue background */
    background-color: transparent;
    border: none;
    border-radius: 50%; /* Circular button */
    padding: 0px; /* Size of the button */
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0);
}

.st1-button {
    position: absolute; /* Position the button absolutely over the image */
    top: -205%; /* Center vertically */
    left: 105%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust for exact center */
    background-color: #ac7bac; /* Blue background */
    border: none;
    border-radius: 5%; /* Circular button */
    padding: 0px; /* Size of the button */
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0);
}

.st2-button {
    position: absolute; /* Position the button absolutely over the image */
    top: -205%; /* Center vertically */
    left: 225%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust for exact center */
    background-color: #ac7bac; /* Blue background */
    border: none;
    border-radius: 5%; /* Circular button */
    padding: 0px; /* Size of the button */
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0);
}

.st3-button {
    position: absolute; /* Position the button absolutely over the image */
    top: -205%; /* Center vertically */
    left: 345%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust for exact center */
    background-color: #ac7bac; /* Blue background */
    border: none;
    border-radius: 5%; /* Circular button */
    padding: 0px; /* Size of the button */
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0);
}
/* Play button icon color */
.play-button svg {
    fill: none;
    stroke: #211921; /* Set the icon color to white */
}

.shop-icon {
    width: 18vw;
    height: 10vw;
    pointer-events: none; /* prevents click issues */
}

.volume-icon {
    width: 23vw;
    height: 12vw;
    pointer-events: none; /* prevents click issues */
}

.help-icon {
    width: 18vw;
    height: 10vw;
    pointer-events: none; /* prevents click issues */
}
.mute-icon {
    width: 18vw;
    height: 10vw;
    pointer-events: none; /* prevents click issues */
}

.st1-icon {
    width: 20vw;
    height: 20vw;
    pointer-events: none; /* prevents click issues */
}

.coin-icon {
    width: 14vw;
    height: 14vw;
    pointer-events: none; /* prevents click issues */
}

.trophy-icon {
    width: 10vw;
    height: 10vw;
    pointer-events: none; /* prevents click issues */
}

.back-icon {
    width: 14vw;
    height: 14vw;
    pointer-events: none; /* prevents click issues */
}

.replay-icon {
    width: 14vw;
    height: 14vw;
    pointer-events: none; /* prevents click issues */
}

.slidecontainer {
  width: 100%; /* Width of the outside container */
}

/* The slider itself */
.slider3 {
  position: absolute;
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  left: 10%;
  top: 30%;
  width: 80%; /* Full-width */
  height: 25px; /* Specified height */
  background: #d3d3d3; /* Grey background */
  outline: none; /* Remove outline */
  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
}

/* Mouse-over effects */}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider3::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #04AA6D; /* Green background */
  cursor: pointer; /* Cursor on hover */
}

.slider3::-moz-range-thumb {
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #04AA6D; /* Green background */
  cursor: pointer; /* Cursor on hover */
}
.slider2 {
  position: absolute;
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  left: 10%;
  top: 60%;
  width: 80%; /* Full-width */
  height: 25px; /* Specified height */
  background: #d3d3d3; /* Grey background */
  outline: none; /* Remove outline */
  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
}

/* Mouse-over effects */}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider2::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #04AA6D; /* Green background */
  cursor: pointer; /* Cursor on hover */
}

.slider2::-moz-range-thumb {
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #04AA6D; /* Green background */
  cursor: pointer; /* Cursor on hover */
}
/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 150px;
  height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 200;
  left: -250;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
/* Hover effect */

/* Focus effect for accessibility */
.play-button:focus {
    outline: none;
    box-shadow: 0 0 5px 2px rgba(0, 123, 255, 0.8); /* Blue focus */
}
.text-overlay {
  position: absolute; /* Position the text relative to its parent container */
  top: 67%; /* Start the text from the vertical center */
  left: 50%; /* Start the text from the horizontal center */
  transform: translate(-50%, -50%); /* Centers the text perfectly */
  color: #9079b3; /* Optional: Make text readable on the image */
  background-color: rgba(0, 0, 0, 0); /* Optional: Add a semi-transparent background */
  font-family: Impact, Arial, sans-serif;
  font-size: 9vw;
  width: 250px;
  padding: 0px; /* Optional: Add some space around the text */
  text-align: center; /* Optional: Center the text content */
}
.text-overlay2 {
  position: absolute; /* Position the text relative to its parent container */
  top: 53%; /* Start the text from the vertical center */
  left: 50%; /* Start the text from the horizontal center */
  transform: translate(-50%, -50%); /* Centers the text perfectly */
  color: #9079b3; /* Optional: Make text readable on the image */
  background-color: rgba(0, 0, 0, 0); /* Optional: Add a semi-transparent background */
  font-family: Impact, Arial, sans-serif;
  font-size: 9vw;
  width: 250px;
  padding: 0px; /* Optional: Add some space around the text */
  text-align: center; /* Optional: Center the text content */
}
.text-overlay3 {
  position: absolute; /* Position the text relative to its parent container */
  top: 6%; /* Start the text from the vertical center */
  left: 80%; /* Start the text from the horizontal center */
  transform: translate(-50%, -50%); /* Centers the text perfectly */
  color: #9079b3; /* Optional: Make text readable on the image */
  background-color: rgba(0, 0, 0, 0); /* Optional: Add a semi-transparent background */
  font-family: Impact, Arial, sans-serif;
  font-size: 9vw;
  width: 250px;
  padding: 0px; /* Optional: Add some space around the text */
  text-align: center; /* Optional: Center the text content */
}
.text-overlay4 {
  position: absolute; /* Position the text relative to its parent container */
  top: 67%; /* Start the text from the vertical center */
  left: 24%; /* Start the text from the horizontal center */
  transform: translate(-50%, -50%); /* Centers the text perfectly */
  color: #613375; /* Optional: Make text readable on the image */
  background-color: rgba(0, 0, 0, 0.2); /* Optional: Add a semi-transparent background */
  font-family: Impact, Arial, sans-serif;
  font-size: 2vw;
  width: 200px;
  padding: 0px; /* Optional: Add some space around the text */
  text-align: center; /* Optional: Center the text content */
}
.text-overlay5 {
  position: absolute; /* Position the text relative to its parent container */
  top: 67%; /* Start the text from the vertical center */
  left: 52%; /* Start the text from the horizontal center */
  transform: translate(-50%, -50%); /* Centers the text perfectly */
  color: #613375; /* Optional: Make text readable on the image */
  background-color: rgba(0, 0, 0, 0.2); /* Optional: Add a semi-transparent background */
  font-family: Impact, Arial, sans-serif;
  font-size: 2vw;
  width: 200px;
  padding: 0px; /* Optional: Add some space around the text */
  text-align: center; /* Optional: Center the text content */
}
.text-overlay6 {
  position: absolute; /* Position the text relative to its parent container */
  top: 67%; /* Start the text from the vertical center */
  left: 79%; /* Start the text from the horizontal center */
  transform: translate(-50%, -50%); /* Centers the text perfectly */
  color: #613375; /* Optional: Make text readable on the image */
  background-color: rgba(0, 0, 0, 0.2); /* Optional: Add a semi-transparent background */
  font-family: Impact, Arial, sans-serif;
  font-size: 2vw;
  width: 200px;
  padding: 0px; /* Optional: Add some space around the text */
  text-align: center; /* Optional: Center the text content */
}
.text-overlay7 {
  position: absolute; /* Position the text relative to its parent container */
  top: 30%; /* Start the text from the vertical center */
  left: 50%; /* Start the text from the horizontal center */
  transform: translate(-50%, -50%); /* Centers the text perfectly */
  color: #613375; /* Optional: Make text readable on the image */
  background-color: rgba(0, 0, 0, 0.0); /* Optional: Add a semi-transparent background */
  font-family: Impact, Arial, sans-serif;
  font-size: 5vw;
  width: 250px;
  padding: 0px; /* Optional: Add some space around the text */
  text-align: center; /* Optional: Center the text content */
}
.text-overlay8 {
  position: absolute; /* Position the text relative to its parent container */
  top: 75%; /* Start the text from the vertical center */
  left: 52%; /* Start the text from the horizontal center */
  transform: translate(-50%, -50%); /* Centers the text perfectly */
  color: #613375; /* Optional: Make text readable on the image */
  background-color: rgba(0, 0, 0, 0); /* Optional: Add a semi-transparent background */
  font-family: Impact, Arial, sans-serif;
  font-size: 5vw;
  width: 500px;
  padding: 0px; /* Optional: Add some space around the text */
  text-align: center; /* Optional: Center the text content */
}
.text-overlay9 {
  position: absolute; /* Position the text relative to its parent container */
  top: 38%; /* Start the text from the vertical center */
  left: 42%; /* Start the text from the horizontal center */
  transform: translate(-50%, -50%); /* Centers the text perfectly */
  color: #9B111E; /* Optional: Make text readable on the image */
  background-color: rgba(0, 0, 0, 0); /* Optional: Add a semi-transparent background */
  font-family: Impact, Arial, sans-serif;
  font-size: 9vw;
  width: 250px;
  padding: 0px; /* Optional: Add some space around the text */
  text-align: center; /* Optional: Center the text content */
}
.small-button {
  position: absolute;
  top: 86%;
  left: 4%;
  font-size: 5vw;      /* Smaller text */
  padding: 2px 4px;     /* Less internal spacing */
  width: auto;          /* Fit width to content */
  color: rgba(255, 215, 0, 1);
  background-color: #613375;
  font-family: Impact, Arial, sans-serif;
  /* You can add more styling here, e.g., border, background color */
}
/* Hover effect */
.small-button:hover {
    color: rgba(181, 148, 16, 1); /* Darker blue on hover */
}
.small-button2 {
  position: absolute;
  top: 86%;
  left: 13%;
  font-size: 5vw;      /* Smaller text */
  padding: 2px 4px;     /* Less internal spacing */
  width: auto;          /* Fit width to content */
  color: rgba(255, 215, 0, 1);
  background-color: #613375;
  font-family: Impact, Arial, sans-serif;
  /* You can add more styling here, e.g., border, background color */
}
/* Hover effect */
.small-button2:hover {
       color: rgba(181, 148, 16, 1); /* Darker blue on hover */
}
.small-button3 {
  position: absolute;
  top: 86%;
  left: 22%;
  font-size: 5vw;      /* Smaller text */
  padding: 2px 4px;     /* Less internal spacing */
  width: auto;          /* Fit width to content */
  color: rgba(255, 215, 0, 1);
  background-color: #613375;
  font-family: Impact, Arial, sans-serif;
  /* You can add more styling here, e.g., border, background color */
}
/* Hover effect */
.small-button3:hover {
       color: rgba(181, 148, 16, 1); /* Darker blue on hover */
}
.small-button4 {
  position: absolute;
  top: 86%;
  left: 31%;
  font-size: 5vw;      /* Smaller text */
  padding: 2px 4px;     /* Less internal spacing */
  width: auto;          /* Fit width to content */
  color: rgba(255, 215, 0, 1);
  background-color: #613375;
  font-family: Impact, Arial, sans-serif;
  /* You can add more styling here, e.g., border, background color */
}
/* Hover effect */
.small-button4:hover {
       color: rgba(181, 148, 16, 1); /* Darker blue on hover */
}
.iframe2 {
    position: absolute;
    z-index: 99999;
    top: 39%;
    left: 10%;
}
.iframe3 {
    position: absolute;
    z-index: 99999;
    top: 100px;
    left: 10%;
}
.iframe4 {
    position: absolute;
    z-index: 99999;
    top: 64%;
    left: 10%;
}
.iframe5 {
    position: absolute;
    z-index: 1;
    bottom: 2px;
}
#game-container {
  position: relative; /* anchor for absolute children */
  width: 85vw;
  height: 85vw;
}

#myCanvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100vw;
  height: 100vw;
  pointer-events: none
}

#controls {
  position: absolute;
  bottom: 20px;
  left: 50%;
  z-index: 9999; /* ABOVE canvas */
  pointer-events: auto;
}

.btn {
  width: 60px;
  height: 60px;
  font-size: 24px;
  border-radius: 12px;
  border: none;
  margin: 6px;
  background: rgba(74, 74, 82, 0.85);
  color: white;
}

.btn:active {
  background: #7a3ab5;
}

}
.big-rectangular-button {
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: 200px;
  height: 60px;
  font-size: 20px;
  background: red;
  color: white;
  border: none;
  z-index: 9999;
}


/* Optional: Add hover effect for better user experience */
.big-rectangular-button:hover {
    background-color: #0056b3; /* Darker blue on hover */
}