body {
  background-color: black; /* Set the background color to black */
  color: white; /* Set the default text color to white for readability */
  flex-direction: column;
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 100vh; /* Make it fill the viewport */
  overflow: auto; 
}

.meme-generator {
  margin: 10px auto;
  width: 500px;
  padding: 20px;
  border: 1px solid blue; /* Blue outline */
  background-color: black; /* Same as the body to blend in */
  box-shadow: 0px 0px 15px rgba(0, 0, 255, 0.5); /* Glow effect */
  height: auto; /* Prevent it from exceeding the viewport */
  overflow: visible; /* Add scroll functionality for vertical overflow */
}

.meme-generator label {
  display: block;
  font-weight: bold;
  margin-bottom: 10px;
  color: white; /* Ensure labels are visible */
}

.meme-generator input {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 10px;
  padding: 10px;
  font-size: 16px;
  color: blue;
  background-color: black;
  border: 1px solid blue; /* Match the outline style */
  box-shadow: 0px 0px 10px rgba(0, 0, 255, 0.5); /* Glow effect */
}

.meme-generator input:focus {
  color: white; /* Keep text blue on focus */
  background-color: black; /* Keep background black on focus */
  border-color: blue; /* Highlight border on focus */
  box-shadow: 0px 0px 15px  rgba(0, 0, 255, 0.5); /* Add glow effect on focus */
}

/* Font Size Container */
.font-size-container {
  position: relative; /* Establishes a positioning context for absolute elements inside */
  width: 100%; /* Takes full width of the parent container */
  margin: 20px 0; /* Adds vertical spacing */
}

/* Font Size Display */
#fontSizeDisplay {
  position: absolute; /* Allows positioning relative to the .font-size-container */
  top: -20px; /* Positions the number above the slider */
  left: 0%; /* Initial position; will be updated via JavaScript */
  transform: translateX(-50%); /* Centers the number horizontally */
  color: blue; /* Blue text color */
  font-size: 18px; /* Adjusts the font size */
  font-weight: bold; /* Makes the text bold for emphasis */
  white-space: nowrap; /* Prevents text from wrapping */
  pointer-events: none; /* Allows clicks to pass through to the slider */
}

#meme {
  width: 100%;
  border: 2px solid blue; /* Match the outline style */
  margin-top: 10px;
  margin-bottom: 20px;
  display: block; /* Ensure proper layout in the container */
  z-index: 2;
  box-shadow: 0px 0px 15px rgba(0, 0, 255, 0.5); /* Glow effect */
}

#fontSizeSlider {
  width: 100%;
  margin: 10px 0;
  -webkit-appearance: none; /* Remove default styling */
  appearance: none; /* Remove default styling */
  background: black; /* Slider track background */
  height: 8px; /* Slider track height */
  border: 1px solid blue; /* Blue outline */
  border-radius: 0; /* Flat style */
  cursor: pointer;
  box-shadow: 0px 0px 15px rgba(0, 0, 255, 0.5); /* Glow effect */
}

#fontSizeSlider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Remove default styling for thumb */
  appearance: none;
  width: 15px;
  height: 45px; /* Changed from 45px to 15px for a circular thumb */
  background: black; /* Thumb color */
  border: 1px solid blue; /* Match the blue theme */
  border-radius: 0%; /* Makes the thumb circular */
  cursor: pointer; /* Change cursor to pointer */
  box-shadow: 0px 0px 15px rgba(0, 0, 255, 0.5); /* Glow effect */
}

#fontSizeSlider::-moz-range-thumb {
  width: 15px;
  height: 15px;
  background: white; /* Thumb color */
  border: 2px solid blue; /* Match the blue theme */
  border-radius: 50%; /* Circular thumb */
  cursor: pointer; /* Change cursor to pointer */
}

#fontSizeSlider:focus {
  outline: none; /* Remove default focus outline */
  box-shadow: 0 0 5px blue; /* Glowing blue effect */
}

.doughnut {
  margin: 0px auto;
  position: relative; /* Make the container a positioning context */
  width: 500px; /* Match the iframe width */
  height: 274px; /* Match the iframe height */
  border: 2px solid blue; /* Optional: match theme */
  background-color: black; /* Ensure background consistency */
  box-shadow: 0px 0px 15px rgba(0, 0, 255, 0.5); /* Optional glow effect */
  overflow: hidden; /* Ensure no overflow outside the container */
  filter: brightness(1.5);
  box-shadow: 0px 0px 15px rgba(0, 0, 255, 0.5); /* Glow effect */
}

.doughnut .overlay-top-text {
  position: absolute; /* Position relative to .doughnut */
  top: 10%; /* Center vertically within the .doughnut container */
  left: 50%; /* Center horizontally within the .doughnut container */
  transform: translate(-50%, -50%); /* Adjust for precise centering */
  color: white; /* Text color */
  font-size: 30px; /* Adjust font size as needed */
  font-family: Impact; /* Match theme */
  padding: 10px; /* Add padding around text */
  text-align: center; /* Center-align the text */
  pointer-events: none; /* Ensure iframe interaction remains unaffected */
  z-index: 10; /* Ensure text is above the iframe */
  text-shadow: 0px -2px 4px rgba(255, 255, 255, 0.3);
}

.doughnut .overlay-bottom-text {
  position: absolute; /* Position relative to .doughnut */
  top: 85%; /* Center vertically within the .doughnut container */
  left: 50%; /* Center horizontally within the .doughnut container */
  transform: translate(-50%, -50%); /* Adjust for precise centering */
  color: white; /* Text color */
  font-size: 30px; /* Adjust font size as needed */
  font-family: Impact; /* Match theme */
  padding: 10px; /* Add padding around text */
  text-align: center; /* Center-align the text */
  pointer-events: none; /* Ensure iframe interaction remains unaffected */
  z-index: 10; /* Ensure text is above the iframe */
  text-shadow: 0px -2px 4px rgba(255, 255, 255, 0.3);
}

.custom-file-upload {
  width: 200px;
  margin: 0 auto; /* Center-align the element horizontally */
  display: inline-block;
  padding: 10px 20px;
  font-size: 16px;
  color: blue !important; /* Text color */
  background: black; /* Button background */
  border: 1px solid blue; /* Match theme outline */
  border-radius: 0px; /* Optional: rounded corners */
  text-align: center;
  cursor: pointer; /* Pointer cursor for interactivity */
  transition: all 0.3s ease; /* Smooth transition for hover effects */
  margin-top: 20px; /* Add spacing above the button */
  margin-bottom: 30px !important; /* Increase spacing below the button */
  box-shadow: 0px 0px 15px rgba(0, 0, 255, 0.5); /* Glow effect */
}

.custom-file-upload:hover {
  background-color: #3bd0e6; /* Lighter blue on hover */
  transform: scale(1.05); /* Slightly enlarge the button */
}

.custom-file-upload:hover:active {
  background-color: #1a90ff; /* Darker blue on click */
  transform: scale(1); /* Return to original size */
}

.custom-file-upload input[type="file"] {
  display: none; /* Hide the actual file input */
}

.input-image {
  display: block; /* Ensure it takes up its own line */
  margin: 0 auto 10px auto; /* Center the image and add spacing below */
  max-width: 400px; /* Ensure it scales responsively */
  width: auto; /* Optional: Set a fixed width */
  height: auto; /* Maintain aspect ratio */
  max-height: 300px; /* Restrict maximum height */
  object-fit: contain; /* Ensures the whole image fits within the given dimensions */
}

.centered-text {
  text-align: center; /* Center-align the text */
  font-size: 18px; /* Adjust font size as needed */
  color: white; /* Match the theme with blue text */
  margin-bottom: 0px; /* Add space below the text */
  margin-top: 0px;
  font-family: sans-serif; /* Match your theme's font */
}

/* Scrollbar container */
::-webkit-scrollbar {
  width: 8px; /* Set the width of the scrollbar */
  height: 12px; /* Set the height of the scrollbar for horizontal scrolling */
}

/* Scrollbar track (background) */
::-webkit-scrollbar-track {
  background: black; /* Match the background of the page */
}

/* Scrollbar thumb (the draggable part) */
::-webkit-scrollbar-thumb {
  background: blue; /* Set the scrollbar thumb color */
  border-radius: 0; /* No rounded corners, keep it rectangular */
}

/* Hover effect for the thumb */
::-webkit-scrollbar-thumb:hover {
  background: #3bd0e6; /* Lighter blue for hover effect */
}

.hashtag-link {
  color: blue; /* Blue text color */
  text-decoration: underline; /* Underlined text */
  cursor: pointer; /* Pointer cursor on hover */
  display: inline-block; /* Allows margin adjustments */
  margin-bottom: 20px; /* Space below the link */
  font-size: 20px;
  font-weight: bold;
}

/* Centering the content */
.centered-container {
  text-align: center; /* Centers child elements */
}

.sticker-text {
  font-size: 18px; /* Adjust font size as needed */
  font-weight: bold;
  color: white; /* Match the theme with blue text */
  margin-bottom: 10px; /* Add space below the text */
  margin-top: 10px;
  font-family: sans-serif; /* Match your theme's font */
}

.doughnut-text {
  text-align: center; /* Center-align the text */
  font-size: 18px; /* Adjust font size as needed */
  color: white; /* Match the theme with blue text */
  margin-bottom: 5px; /* Add space below the text */
  margin-top: 20px;
  font-family: sans-serif; /* Match your theme's font */
}


/* Download Button Styles */
.button-container {
  display: flex; /* Enables Flexbox layout */
  justify-content: center; /* Horizontally centers the buttons within the container */
  gap: 0px; /* Adds a 20px space between the buttons */
  margin: 10px auto; /* Adds vertical spacing and centers the container horizontally */
}

.download-button {
  display: block;
  margin: 20px auto; /* Center the button horizontally with spacing */
  padding: 10px 20px;
  font-size: 16px;
  font-weight: bold;
  color: blue; /* White text color for contrast */
  background-color: black; /* Blue background to match theme */
  border: 1px solid blue; /* Remove default border */
  border-radius: 0px; /* Slightly rounded corners */
  cursor: pointer; /* Pointer cursor on hover */
  transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth transitions */
  box-shadow: 0px 0px 15px rgba(0, 0, 255, 0.5); /* Glow effect */
}

.download-button:hover {
  background-color: #3bd0e6; /* Lighter blue on hover */
  transform: scale(1.05); /* Slightly enlarge the button */
}

.download-button:active {
  background-color: #1a90ff; /* Darker blue on click */
  transform: scale(1); /* Return to original size */
}

.download-copy {
  flex-direction: row;
}

/* Sticker container and the custom sticker upload button */
.sticker-option,
.custom-sticker-upload {
  /* Keep them side-by-side if you want, but remove/override conflicting rules */
  display: inline-block !important;
  vertical-align: top; 
  margin: 0;
  padding: 0;
}

/* Custom Sticker Upload Button */
.custom-sticker-upload {
  width: 55px;
  height: 55px;

  /* Position relative so we can absolutely center the child */
  position: relative;  

  background-color: black;
  border: 1px solid blue; 
  box-shadow: 0px 0px 15px rgba(0, 0, 255, 0.5); /* Glow effect */
  cursor: pointer;
  transition: background-color 0.3s ease, 
              transform 0.2s ease, 
              border 0.3s ease; /* Smooth transitions */
}

/* Hover and active states */
.custom-sticker-upload:hover {
  background-color: #3bd0e6; 
  transform: scale(1.05);
  border-color: blue;
}

.custom-sticker-upload:active {
  background-color: #1a90ff; 
  transform: scale(1);
  border-color: #1a90ff;
}

/* Upload Label (the plus sign) */
.upload-label {
  /* Absolutely center within the parent */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);

  color: blue;
  font-size: 45px;
  font-weight: lighter;
  line-height: 1;
  text-align: center;
  margin: 0;
  padding: 0;
}

#stickersContainer {
  width: 500px;        /* Enough for 8 items x 55px plus some gap if needed */
  display: flex;
  flex-wrap: wrap;     /* So first 8 go on line 1, next 8 on line 2 */
  gap: 5px;            /* small spacing between items */
  align-items: center;
  justify-content: flex-start;
}

