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

/* Body styling */
body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f9;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh; /* Ensure full height on all devices */
}

/* Container styling */
.container {
  max-width: 600px; /* Limit width on larger screens */
  width: 90%; /* Use most of the screen width on smaller devices */
  background-color: white;
  padding: 20px;
  border-radius: 12px; /* Rounded corners */
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2); /* Subtle shadow */
}

/* Heading styling */
h1 {
  font-size: 24px;
  color: #333;
  text-align: center;
}

/* Meme container styling (image/video) */
#meme-container {
  margin-bottom: 20px; /* Spacing between meme and buttons */
}

#meme-image,
#meme-video {
  max-width: 100%; /* Ensure images/videos scale to container width */
  height: auto; /* Maintain aspect ratio */
}

/* Button container for layout adjustments */
.button-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap; /* Allow buttons to wrap on smaller screens */
  gap: 10px; /* Add spacing between buttons */
}

/* Button styling for a modern look */
button {
  background-color: #007BFF; /* Primary blue color */
  color: white;
  border: none;
  padding: 12px; /* Padding for desktop screens */
  font-size: 16px; /* Default font size for desktop screens */
  font-weight: bold;
  border-radius: 25px; /* Rounded pill-shaped buttons */
}

button:hover {
  background-color: #0056b3; /* Darker blue on hover */
}

button#upload-page {
  background-color: #28a745; /* Green button color for upload page button */
}

button#upload-page:hover {
  background-color: #218838; /* Darker green on hover for upload page button */
}

/* Responsive Design */

/* Adjust video size for Full HD screens (1920x1080) or smaller */
@media (max-width: 1920px) and (min-width: 1280px) {
    #meme-video {
        max-width: calc(80%); /* Reduce video size slightly for Full HD screens */
    }
}

/* Adjust video size for smaller screens (below Full HD) */
@media (max-width: 1280px) {
    #meme-video {
        max-width: calc(70%); /* Further reduce video size for smaller screens */
    }
}

/* Adjust styles for mobile devices (768px or smaller) */
@media (max-width: 768px) {
    button {
        padding:10 px