* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
    width: 100%;        /* Prevents exceeding viewport width */
    margin: 0;         /* Resets default margin */
    padding: 0;        /* Resets default padding */
    overflow-x: hidden; /* Prevents horizontal scrolling */
}

.concert-one-regular {
  font-family: "Concert One", sans-serif;
  font-weight: 400;
  font-style: normal;
}

body {
    font-family: "Concert One", sans-serif;
    background-color: #92A9B5;
    display: flex;
    flex-direction: column; /* Change direction to column */
    justify-content: flex-start; /* Align items to the start */
    align-items: center;
    height: auto; /* Retain the full viewport height */
}

#home-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%; /* Take full width */
  box-sizing: border-box; /* Ensure padding doesn't affect width */
}

#home-title {
  font-size: 4.5rem;
  text-align: center; /* Center text */
  margin-top: 0.5rem;
  margin-bottom: 2rem;
}

.logo {
  margin-top: 7rem;
  display: flex;
  height: 5rem;
  width: 5rem;
}

.home-screen-buttons {
  display: flex; /* Enable flexbox layout */
  justify-content: center;      /* Center buttons horizontally */
  align-items: center;          /* Center buttons vertically */
  flex-wrap: wrap; /* Allow buttons to wrap to the next line */
}

.dcbutton-container {
  margin-bottom: 2rem;
  display: flex; /* Use flexbox for alignment */
  justify-content: center; /* Center the buttons */
  gap: 1.5rem; /* Space between buttons */
}

#playNowButton {
  padding: 0.5625rem 1.125rem; /* Specific padding for the restart button */
  font-size: 1.125rem; /* Font size specific to the restart button */
  background-color: #65B868; /* Optional: background color for restart button */
  color: white; /* Text color for restart button */
  border: none; /* Remove border */
  border-radius: 0.28rem; /* Rounded corners for restart button */
  cursor: pointer; /* Pointer cursor for hover */
  transition: background-color 0.3s, transform 0.2s; /* Smooth transition */
}

/* Hover effects for enabled button */
#playNowButton:hover {
  background-color: #4BAF4C; /* Darker shade for hover */
  transform: scale(1.05); /* Slightly enlarge the button on hover */
}

/* Styles for the disabled button */
#playNowButton:disabled {
  background-color: #ccc; /* Light gray background for disabled state */
  color: #999; /* Dark gray text color for disabled state */
  cursor: not-allowed; /* Change cursor to not-allowed */
  opacity: 0.9; /* Optional: reduce opacity to indicate disabled state */
}

/* Remove hover effects for disabled button */
#playNowButton:disabled:hover {
  background-color: #ccc; /* Keep the same background color */
  transform: none; /* Prevent scaling effect */
}


#goHomeButton {
  padding: 0.5625rem 1.125rem; /* Specific padding for the quit button */
  font-size: 1.125rem; /* Font size specific to the quit button */
  background-color: #FF4C4C; /* Change to your desired color for quit button */
  color: white; /* Text color for quit button */
  border: none; /* Remove border */
  border-radius: 0.28rem; /* Rounded corners for quit button */
  cursor: pointer; /* Pointer cursor for hover */
  transition: background-color 0.3s, transform 0.2s; /* Smooth transition */
}

#goHomeButton:hover {
  background-color: #FF1F1F; /* Darker shade for hover */
  transform: scale(1.05); /* Slightly enlarge the button on hover */
}

/* Media query for smaller screens */
@media (max-width: 600px) {
  .home-screen-buttons {
    flex-direction: column; /* Stack buttons vertically */
    align-items: center; /* Center buttons when stacked */
  }
}

#daily-challenge-btn {
  margin: 0.5rem 1.5rem;
  padding: 0.6rem 1.125rem; /* Specific padding for the restart button */
  font-size: 1.4rem; /* Font size specific to the restart button */
  background-color: #FF4C4C; /* Optional: background color for restart button */
  color: white; /* Text color for restart button */
  border: none; /* Remove border */
  border-radius: 0.28rem; /* Rounded corners for restart button */
  cursor: pointer; /* Pointer cursor for hover */
  transition: background-color 0.3s, transform 0.2s; /* Smooth transition */
  }

#daily-challenge-btn:hover {
  background-color: #FF1F1F; /* Darker shade for hover */
  transform: scale(1.05); /* Slightly enlarge the button on hover */
}

#unlimited-btn {
  margin: 0.5rem 1.5rem;
  padding: 0.6rem 1.125rem; /* Specific padding for the restart button */
  font-size: 1.4rem; /* Font size specific to the restart button */
  background-color: #65B868; /* Optional: background color for restart button */
  color: white; /* Text color for restart button */
  border: none; /* Remove border */
  border-radius: 0.28rem; /* Rounded corners for restart button */
  cursor: pointer; /* Pointer cursor for hover */
  transition: background-color 0.3s, transform 0.2s; /* Smooth transition */
}

#unlimited-btn:hover {
  background-color: #4BAF4C; /* Darker shade for hover */
  transform: scale(1.05); /* Slightly enlarge the button on hover */
}

#current-date,
#daily-challenge-number {
  margin: 0; /* Remove default margin */
  text-align: center; /* Center text */
}

#current-date {
  font-size: 1rem;
  margin-top: 2rem;
  color: white;
}

#daily-challenge-number {
  font-size: 1rem;
  color: white;
}

.timer {
    color: #FF1F1F; /* Use any color you like; this example is a bright orange */
    font-weight: bold; /* Optional: Makes the text bold */
    font-size: 1.5rem;
}


/* Style for the Navbar */
.navbar {
  display: flex; /* Flex layout for navbar */
  align-items: center; /* Center items vertically */
  justify-content: center; /* Space items between left and right */
  position: fixed; /* Fix it to the top */
  top: 0;
  margin-top: 2rem;
  width: 31.5rem; /* Full viewport width */
  z-index: 1000; /* Make sure it's on top of other elements */
}

/* Style for the Game Title */
#gameTitle {
  margin: 0 2.8125rem; /* Add margin to the left and right of the title */
  font-size: 2.7rem; /* Title font size */
  color: white; /* Title color */
  text-align: center; /* Center the title text */
}

.fa-house {
  margin-left: 5rem;
  margin-right: 5rem;
  font-size: 2rem; /* Icon size */
  color: #46494C; /* Icon color */
  cursor: pointer; /* Pointer cursor on hover */
  transition: color 0.1s ease, transform 0.1s ease; /* Smooth transition for color and scale */
  
}

/* Individual Icon Styles */
.fa-circle-question,
.fa-chart-simple {
  font-size: 2rem; /* Icon size */
  color: #46494C; /* Icon color */
  cursor: pointer; /* Pointer cursor on hover */
  transition: color 0.1s ease, transform 0.1s ease; /* Smooth transition for color and scale */
}

.fa-circle-question:hover,
.fa-house:hover,
.fa-chart-simple:hover {
  color: black; /* Change color on hover */
  transform: scale(1.1); /* Slightly enlarge on hover */
}

/* How to Play Modal Overlay */
.dc-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8); /* Dark transparent background */
  display: none; /* Hidden by default */
  justify-content: center;
  z-index: 1001; /* Makes sure it’s on top of other elements */
}

/* How to Play Modal Overlay */
.how-to-play-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8); /* Dark transparent background */
  display: none; /* Hidden by default */
  justify-content: center;
  z-index: 1001; /* Makes sure it’s on top of other elements */
}

/* How to Play Modal Overlay */
.dchow-to-play-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8); /* Dark transparent background */
  display: none; /* Hidden by default */
  justify-content: center;
  z-index: 1001; /* Makes sure it’s on top of other elements */
}

/* How to Play Modal Content */
.dc-overlay-content {
  margin-top: 13rem;
  background-color: white;
  border-radius: 0.5625rem; /* Rounded corners */
  width: 30rem;
  text-align: center;
  position: fixed;
  display: flex;             /* Use flexbox for alignment */
  flex-direction: column;    /* Stack children vertically */
  justify-content: center;   /* Center items vertically */
  align-items: center;       /* Center items horizontally */
}

/* How to Play Modal Content */
.dc-overlay-content h2 {
  font-size: 2rem;
  padding: 2rem;
}

.dcdate {
  font-size: 1.5rem;
}

.dcchallengenumber {
  padding-bottom: 1.5rem;
  font-size: 1.4rem;
  color: #588AEE;
  letter-spacing: .1rem;
}

.dccountdown {
  font-size: 1.4rem;
  padding-bottom: 1rem;
}

/* How to Play Modal Content */
.how-to-play-content {
  margin-top: 6.5rem;
  background-color: white;
  padding: 2.25rem;
  border-radius: 0.5625rem; /* Rounded corners */
  width: 25rem;
  text-align: center;
  position: fixed;
  line-height: 1.6;
}

/* How to Play Modal Content */
.dchow-to-play-content {
  margin-top: 6rem;
  background-color: white;
  padding: 2.25rem;
  border-radius: 0.5625rem; /* Rounded corners */
  width: 30rem;
  text-align: center;
  position: fixed;
  line-height: 1.6;
}

/* Close button for how to play base styling */
.close-btn {
  background-color: #F39991; /* Red close button */
  color: white; /* White text */
  border: none;
  border-radius: 50%; /* Circular button */
  width: 1.6875rem;  /* Set width to control circle size */
  height: 1.6875rem; /* Set height to control circle size */
  padding: 0; /* Remove extra padding */
  cursor: pointer;
  font-size: 1.125rem;
  position: absolute;
  top: 1rem;
  right: 2rem;
  line-height: 1.6875rem;
  transition: background-color 0.3s ease; /* Smooth transition */
}

/* How to play close button Hover state */
.close-btn:hover {
  background-color: #E94435; /* Darker red when hovered */
  color: white; /* Text color remains white */
}


/* Style the how-to-play header1 */
.how-to-play-content h1 {
  font-size: 2rem;
  margin-top: 0;
  margin-bottom: 1.125rem;
}

/* Style the how-to-play header2 */
.how-to-play-content h2 {
  font-size: 1.35rem;
  margin-top: 0;
  margin-bottom: 0;
}

/* Style the how-to-play p text */
.how-to-play-content p {
  font-size: 1.125rem;
  margin-top: 0.85rem;
  margin-bottom: 0.5625rem;
  font-family: "Concert One", sans-serif;
  
}

/* Style the how-to-play header1 */
.dchow-to-play-content h1 {
  font-size: 2rem;
  margin-top: 0;
}

/* Style the how-to-play header2 */
.dchow-to-play-content h2 {
  font-size: 1.35rem;
  margin-top: 0;
  margin-bottom: 0;
}

/* Style the how-to-play p text */
.dchow-to-play-content p {
  font-size: 1.125rem;
  margin-top: 1.85rem;
  font-family: "Concert One", sans-serif;
  
}

.stats-overlay {
  display: none; /* Start hidden */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent background */
  justify-content: center;
  z-index: 1000; /* Make sure it's above other elements */
}

.stats-content {
  margin-top: 6.5rem;
  background-color: white;
  padding: 2.25rem;
  border-radius: 0.5625rem; /* Rounded corners */
  width: 25rem;
  text-align: center;
  position: fixed;
  line-height: 1.6;
}

/* Style the how-to-play header1 */
.stats-content h1 {
  font-size: 2.25rem;
  margin-top: 0;
  margin-bottom: 1.125rem;
}

/* Style the how-to-play header2 */
.stats-content h2 {
  font-size: 1.125rem;
  margin-top: 0;
  margin-bottom: 0;
}

/* Style the how-to-play p text */
.stats-content p {
  font-size: 1.575rem;
  margin-top: 0.5625rem;
  margin-bottom: 0.85rem;
  font-family: "Concert One", sans-serif; 
}

.stat-number {
    color: #588AEE; /* Replace with your desired color */
    font-weight: bold; /* Optional: Makes the numbers bold */
}

/* Style for Reset Stats Button */
#reset-stats-button {
  padding: 0.5625rem 1.125rem; /* Specific padding for the quit button */
  font-size: 1rem; /* Font size specific to the quit button */
  background-color: #F39991; /* Change to your desired color for quit button */
  color: white; /* Text color for quit button */
  border: none; /* Remove border */
  border-radius: 0.28rem; /* Rounded corners for quit button */
  cursor: pointer; /* Pointer cursor for hover */
  transition: background-color 0.3s, transform 0.2s; /* Smooth transition */
}

#reset-stats-button:hover {
  background-color: #E94435; /* Darker shade for hover */
  transform: scale(1.05); /* Slightly enlarge the button on hover */
}

.close-stats-btn {
  background-color: #F39991; /* Red close button */
  color: white; /* White text */
  border: none;
  border-radius: 50%; /* Circular button */
  width: 1.6875rem;  /* Set width to control circle size */
  height: 1.6875rem; /* Set height to control circle size */
  padding: 0; /* Remove extra padding */
  cursor: pointer;
  font-size: 1.125rem;
  position: absolute;
  top: 1rem;
  right: 2rem;
  line-height: 1.6875rem;
  transition: background-color 0.3s ease; /* Smooth transition */
}

/* How to play close button Hover state */
.close-stats-btn:hover {
  background-color: #E94435; /* Darker red when hovered */
  color: white; /* Text color remains white */
}

.container {
  margin-top: 6rem;
  min-height: 33rem;
  max-width: 100%;
  width: 31.5rem;
  height: auto;           /* Allow the height to adjust based on content */
  overflow: hidden;       /* Prevent any content overflow */
  text-align: center;
  background-color: #fff;
  border-radius: 0.85rem;
  box-shadow: 0 0 1.6875rem rgba(0, 0, 0, 0.2);
}

.game-board {
  max-width:100%;
  display: grid;
  grid-template-columns: repeat(5, 3.375rem);
  grid-gap: 1.125rem;
  justify-content: center;
  margin-top: 1.6875rem;
  margin-bottom: 1.6875rem;
}

/* Styling for a selected slot, not confirmed */
.slot.selected {
    background-color: #B8CDF8;
    color: white;
}


/* Styling for confirmed slots */
.slot.confirmed {
  background-color: #588AEE; /* blue for confirmed slots */
}

button {
  padding: 0.5625rem 1.125rem;
  background-color: #65B868;
  color: white;
  border: none;
  border-radius: 0.28rem;
  cursor: pointer;
  margin: 0.28rem;
}

/* Disabled button styles */
button:disabled {
  background-color: #ADADAD; /* Gray background for disabled buttons */
  cursor: not-allowed; /* Show not-allowed cursor */
  opacity: 0.6; /* Optional: make disabled buttons look grayed out */
}

button:hover:enabled {
  background-color: #479A49;
}

#message {
  margin-top: 0.5625rem;
  font-size: 1rem;
}

#score-container {
  text-align: center; /* Center the score */
  font-family: "Concert One", sans-serif;
  color: #4CAF50; /* Change the color to green or whatever you like */
  transition: transform 0.5s ease; /* For animation */
}

.hidden {
    display: none; /* This will completely remove it from the layout */
}

.number-display {
  background-color: none; /* Pick a background color */
  border: none; /* If you want a border */
  border-bottom: 0.1125rem solid #46494C;
  padding: 0.5625rem 1.125rem; /* Padding around the text */
  margin-bottom: 0.28rem; /* Space between the number display and other elements */
  margin-top: 1rem;
  font-size: 1.8rem; /* Text size */
  color: #000000; /* Dark text color */
  font-weight: bold; /* Make the text bold */
  display: inline-block;
  width: 19.8rem; /* Fixed width for the entire text */
  text-align: left; /* Align text to the left */
  overflow: hidden; /* Prevent container from resizing */
  white-space: nowrap; /* Prevent text from wrapping */
  font-family: "Concert One", sans-serif;
  letter-spacing: 0.1125rem; /* Spacing between characters */
}

.slot {
  position: relative; /* Enable positioning for the ::before pseudo-element */
  width: 3.65625rem;
  height: 3.65625rem;
  background-color: #E0E0E0;
  border: none;
  border-radius: 0.5625rem;
  display: flex; /* Use flexbox to center the content */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  font-size: 1.125rem; /* Adjust font size */
  margin: 0rem;
  cursor: pointer;
  transition: background-color 0.3s, border-color 0.3s; /* Add transition */
}


/* Darken overlay */
.slot::before {
  content: ""; /* Required for the pseudo-element */
  position: absolute; /* Position it over the slot */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1); /* Black with opacity */
  opacity: 0; /* Start invisible */
  transition: opacity 0.3s; /* Smooth transition */
  border-radius: 0.5625rem; /* Match the border radius of the slot */
}

/* Show the darken effect on hover */
.slot:hover::before {
  opacity: 1; /* Show the overlay on hover */
}

.number {
  transition: transform 0.3s; /* Animation for the number */
}

.valid-slot {
  background-color: #B9DFBA; /* Green background for valid slots */
}

.invalid-slot {
  background-color: #F39991; /* Red background for invalid slots */
  transform: scale(0.9); /* Shrink invalid slots */
  transition: transform 1.0s; /* For smooth transition */
}


/* Animation for when numbers are placed */
@keyframes number-placed {
  0% {
    transform: scale(1); /* Start at default size */
  }
  50% {
    transform: scale(1.1); /* Enlarge slightly */
  }
  100% {
    transform: scale(1); /* Return to default size */
  }
}

/* Applying the animation class */
.number-animation {
  animation: number-placed 0.5s ease; /* Duration of the placement animation */
}

.slot.placed {
  background-color: #A1D6A1; /* Change color when number is placed */
}

.main-game-buttons-container {
  display: flex;
  justify-content: center; /* Distributes buttons/icons evenly */
  align-items: center; /* Vertically centers the buttons and icon */
  flex-wrap: nowrap;      /* Prevent wrapping to the next line */
  width: auto;            /* Adjust width as needed */
}

/* Generate Number button */
#generate-button {
  border: 0.1125rem solid #46494C;
  white-space: nowrap;     /* Prevent text from wrapping */
  margin-left: 4rem;
  background-color: #65B868; /* Custom color for Generate */
  font-size: 1rem;
}

#generate-button:hover {
  background-color: #4BAF4C;
}

/* Confirm Placement button */
#confirm-button {
  border: 0.1125rem solid #46494C;
  margin-left: 0.85rem;
  background-color: #588AEE; /* Custom color for Confirm */
  font-size: 1rem;
}

#confirm-button:hover {
  background-color: #4A78D1;
}

/* Generate Number button */
#dcgenerate-button {
  border: 0.1125rem solid #46494C;
  white-space: nowrap;     /* Prevent text from wrapping */
  background-color: #65B868; /* Custom color for Generate */
  font-size: 1rem;
}

#dcgenerate-button:hover {
  background-color: #4BAF4C;
}

/* Confirm Placement button */
#dcconfirm-button {
  border: 0.1125rem solid #46494C;
  margin-left: 0.85rem;
  background-color: #588AEE; /* Custom color for Confirm */
  font-size: 1rem;
}

#dcconfirm-button:hover {
  background-color: #4A78D1;
}

#newGameIcon {
  margin-right: 4rem;
  color: #92A9B5;
  font-size: 1.5rem; /* Adjust icon size */
  cursor: pointer; /* Make the icon clickable */
  margin-left: 0.85rem; /* Add some space around it if necessary */
  transition: transform 0.2s; /* Smooth transition on hover */
}

#newGameIcon:hover {
  color: #F39991;
  transform: scale(1.2); /* Slightly enlarge the icon on hover */
}

#message {
  display: block; /* Ensures message is treated as a block element */
  width: 100%; /* Takes the full width of the container */
  text-align: center; /* Optional: centers the text */
}


/* Fullscreen overlay container */
.overlay {
    position: fixed;
    top: 0; /* Attach to the top of the viewport */
    left: 0; /* Attach to the left of the viewport */
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    display: none;
    justify-content: center; /* Center content horizontally */
    align-items: flex-start; /* Align content at the top */
    padding-top: 2rem; /* Optional: space from the top */
    z-index: 1000; /* Keep it above other elements */
}

/* Prevents interacting with board while overlay is on or off */
.non-interactive {
    pointer-events: none; /* Prevents any mouse interactions */
    opacity: 0.5; /* Optional: makes the board look disabled */
}

/* Overlay box positioned at the top of the overlay content */
.overlay-box {
    margin-top: 2rem; /* Add any additional margin to adjust positioning */
    background-color: rgba(0, 0, 0, 0.85);
    padding: 1.125rem;
    border-radius: 0.85rem;
    box-shadow: 0rem 0.225rem 0.85rem rgba(0, 0, 0, 0.2); /* Shadow for depth */
    display: flex;
    flex-direction: column;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
}

/* Centering .overlay-content horizontally */
.overlay-content {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center items horizontally */
    width: 100%; /* Make it full-width to center children */
    text-align: center;
}

.overlay-content p {
  font-size: 2.7rem;         /* Adjust font size for "Your Score:" */
  margin: 0.5625rem 0;          /* Add spacing for the paragraph */
  color: white;            /* Ensures the text color is white */
}

#overlay-message {
  text-align: center;
  color: white;
  font-size: 4rem; /* Adjust font size for the overlay message */
  font-weight: bold; /* Make the message bold */
}

#final-score {
  flex: nowrap;
  font-size: 3.0375rem; /* Adjust font size for the final score */
  color: white;
}

.button-container {
  display: flex; /* Use flexbox for alignment */
  justify-content: center; /* Center the buttons */
  gap: 0.5625rem; /* Space between buttons */
  margin-bottom: 1.125rem; /* Space below the button container */
}

/* Button On Game Over Overlay */
#restart-button {
  padding: 0.5625rem 1.125rem; /* Specific padding for the restart button */
  font-size: 1.125rem; /* Font size specific to the restart button */
  background-color: #65B868; /* Optional: background color for restart button */
  color: white; /* Text color for restart button */
  border: none; /* Remove border */
  border-radius: 0.28rem; /* Rounded corners for restart button */
  cursor: pointer; /* Pointer cursor for hover */
  transition: background-color 0.3s, transform 0.2s; /* Smooth transition */
}

#restart-button:hover {
  background-color: #4BAF4C; /* Darker shade for hover */
  transform: scale(1.05); /* Slightly enlarge the button on hover */
}

#shareGridButton {
  padding: 0.5625rem 1.125rem; /* Specific padding for the restart button */
  font-size: 1.125rem; /* Font size specific to the restart button */
  background-color: #65B868; /* Optional: background color for restart button */
  color: white; /* Text color for restart button */
  border: none; /* Remove border */
  border-radius: 0.28rem; /* Rounded corners for restart button */
  cursor: pointer; /* Pointer cursor for hover */
  transition: background-color 0.3s, transform 0.2s; /* Smooth transition */
}

#shareGridButton:hover {
  background-color: #4BAF4C; /* Darker shade for hover */
  transform: scale(1.05); /* Slightly enlarge the button on hover */
}

#quit-button {
  padding: 0.5625rem 1.125rem; /* Specific padding for the quit button */
  font-size: 1.125rem; /* Font size specific to the quit button */
  background-color: #FF4C4C; /* Change to your desired color for quit button */
  color: white; /* Text color for quit button */
  border: none; /* Remove border */
  border-radius: 0.28rem; /* Rounded corners for quit button */
  cursor: pointer; /* Pointer cursor for hover */
  transition: background-color 0.3s, transform 0.2s; /* Smooth transition */
}

#quit-button:hover {
  background-color: #FF1F1F; /* Darker shade for hover */
  transform: scale(1.05); /* Slightly enlarge the button on hover */
}

#toggle-visibility-button {
  margin-top: 1.0rem;
  margin-bottom: 2rem;
  padding: 0.5625rem 1.125rem;      /* Adjust button padding */
  font-family: "Concert One", sans-serif;
  font-size: 1.125rem;         /* Adjust font size */
  background-color: #FFC847; /* Match the other buttons' color */
  color: black;
  box-shadow: 0 0rem 1rem 0 rgba(0, 0, 0, 0.9), 0 0rem 1rem 0 rgba(0, 0, 0, 0.8);
  border: none;
  border-radius: 0.28rem;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
}

/* Optional: Add hover effects for the toggle button */
#toggle-visibility-button:hover {
  background-color: #FFB400; /* Darker green on hover */
  transform: scale(1.05); /* Slightly enlarge on hover */
}