body {
  font-family: "Lexend Deca", sans-serif;
  background-image: linear-gradient(135deg, #ddd, #ccf);
  height: 100vh;
  overflow-x: hidden;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-size: 1rem; /* Base font size (rem) */
}

#gen,
button,
select {
  font-family: Ubuntu, sans-serif;
  font-size: 1rem; /* Consistent font size for buttons/select */
}

#copyButton,
#gen,
button {
  margin: 0.5rem;
  box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.2);
  font-size: 16px;
  color: #fff;
  background-color: #222a;
  cursor: pointer;
}

h1 {
  color: #248;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
  font-size: 2.2rem; /* Adjusted heading size */
}

p {
  color: #448;
}

.title {
  font-size: 2rem;
  color: #136;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
  margin: 1rem 0;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  width: 90%;
  max-width: 25rem; /* Responsive max-width */
  padding: 1rem;
  box-sizing: border-box;
  line-height: 1.6;
}

button {
  padding: 0.8rem 1.5rem; /* Adjusted padding for consistency */
  border-radius: 8px;
}

#gen {
  padding: 1rem 2rem;
  border-radius: 8px;
}

#copyButton {
  background: linear-gradient(135deg, #4c4, #8f8);
  border: none;
  padding: 0.75rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#copyButton svg {
  width: 2rem;
  height: 2rem;
  stroke: white;
}

select {
  padding: 0.8rem 1rem;
  font-size: 1rem;
  border: 2px solid #48f;
  border-radius: 8px;
  background: #fff;
  color: #136;
  cursor: pointer;
  appearance: none;
  outline: 0;
}

center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #ffffff88;
  border: 2px solid #48f;
  padding: 2rem;
  border-radius: 8px;
  backdrop-filter: blur(5px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  display: none;
  z-index: 1000;
}

.popup-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: center;
}

#customListInput {
  width: 100%;
  height: 15rem; /* Adjusted height */
  padding: 1rem;
  font-size: 1rem;
  border: 2px solid #48f;
  border-radius: 8px;
}

#fileName {
  padding: 1rem;
  width: 100%;
  border: 2px solid #48f;
  border-radius: 8px;
}

#creditsLink {
  color: #136;
  text-decoration: none;
  font-size: 1rem;
  margin-top: 1.5rem;
  cursor: pointer;
  text-align: center;
  display: inline-block;
}

#creditsLink:hover {
  color: #248;
  text-decoration: underline;
}

#backButton {
  background: linear-gradient(135deg, #48f, #5cf);
  border: none;
  padding: 1rem 2rem;
  border-radius: 8px;
  font-size: 1rem;
  color: #fff;
  cursor: pointer;
  margin-top: 1.5rem;
}

#backButton:hover {
  box-shadow: 4px 6px 12px rgba(0, 0, 0, 0.3);
}

#backButton:active {
  transform: scale(0.95);
}
/* Custom scrollbar styles */
::-webkit-scrollbar {
  width: 6px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: #fff3; 
}
::-webkit-scrollbar-thumb {
  background: #8888;
  border-radius:3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #5558; 
}
/* Other styles */
@media (orientation: landscape) {
  .feedback-container {
    background-color: rgba(255, 255, 255, 0.05);
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    width: 25%; /* Adjusted width */
    position: fixed;
    bottom: 1rem;
    left: 1rem;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 9999;
    max-height: 90%;
  }
  textarea {
  font-size: 1rem;
  }
}

@media (orientation: portrait) {
  .feedback-container {
    position: static; /* Let it flow with the page */
    margin-top: 1.5rem; /* Space between buttons and comments */
    background-color: rgba(255, 255, 255, 0.05);
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 9999;
    max-height: 90%;
  }
  
textarea {
  font-size: 1rem;
}
  #sub {
    margin: 1rem 0; /* Adjust spacing */
  }
}

.feedback-container h1,
.feedback-container h2 {
  color: #333;
  text-align: center;
  font-size: 1rem; /* Increased size for readability */
}

textarea {
  height: 5rem; /* Adjusted height */
  padding: 1rem;
  border-radius: 5px;
  resize: none;
  width: 90%;
}

.feedback-container button {
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1rem;
  margin-top: 1rem;
  width: 80%;
}

#comments-section {
  margin-top: 1.5rem;
  max-height: 50vh;
  overflow-y: auto;
}

.comment-time {
  font-size: 11px;
  color: #888;
}
.comment {
  position: relative;
  overflow: auto;
  background-color: #f9f9f966;
  padding: 0.1rem;
  border-radius: 5px;
  margin-bottom: 0.1rem;
  border: 1px solid #ddd;
}
#sub {
  margin: 0.5rem auto; /* Center horizontally */
  display: block; /* Make it a block element */
  box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.2);
  font-size: 13px;
  width: 80%; /* Adjust width as needed */
  color: #fff;
  background-color: #222a;
  padding: 6px;
  cursor: pointer;
}


.comment p {
  margin: 0;
  font-size: 13px;
}