/* Typing animation for title */
.typingAnimation span {
  display: inline-block;
  opacity: 0;
  animation: typing 0.5s forwards;
}

/* Delay for each character in the typing animation */
.typingAnimation span:nth-child(1) { animation-delay: 0s; }
.typingAnimation span:nth-child(2) { animation-delay: 0.1s; }
.typingAnimation span:nth-child(3) { animation-delay: 0.2s; }
.typingAnimation span:nth-child(4) { animation-delay: 0.3s; }
.typingAnimation span:nth-child(5) { animation-delay: 0.4s; }
.typingAnimation span:nth-child(6) { animation-delay: 0.5s; }
.typingAnimation span:nth-child(7) { animation-delay: 0.6s; }
.typingAnimation span:nth-child(8) { animation-delay: 0.7s; }
.typingAnimation span:nth-child(9) { animation-delay: 0.8s; }
.typingAnimation span:nth-child(10) { animation-delay: 0.9s; }
.typingAnimation span:nth-child(11) { animation-delay: 1s; }
.typingAnimation span:nth-child(12) { animation-delay: 1.1s; }
.typingAnimation span:nth-child(13) { animation-delay: 1.2s; }
.typingAnimation span:nth-child(14) { animation-delay: 1.3s; }

/* Keyframes for typing animation */
@keyframes typing {
  to {
    opacity: 1;
  }
}

/* Dropdown menu for more formats */
#moreDropdown {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

#moreDropdown.show {
  display: block;
  opacity: 1;
}

/* Custom color palette */
.bgGray900 {
  background-color: #222831;
}

.bgGray800 {
  background-color: #31363F;
}

.bgGray700 {
  background-color: #3F4A59;
}

#more-dropdown {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

#more-dropdown.show {
  display: block;
  opacity: 1;
}

/* Custom color palette */
.bg-gray-900 {
  background-color: #222831;
}

.bg-gray-800 {
  background-color: #31363F;
}

.bg-gray-700 {
  background-color: #31363F;
}

.text-gray-300 {
  color: #EEEEEE;
}

.text-gray-400 {
  color: #EEEEEE;
}

.border-gray-600 {
  border-color: #31363F;
}

.hover\:border-teal-500:hover {
  border-color: #76ABAE;
}

.bg-teal-500 {
  background-color: #76ABAE;
}

.hover\:bg-teal-600:hover {
  background-color: #5D9A9C;
}

.focus\:ring-teal-400:focus {
  outline-color: #76ABAE;
}

.progress-bar {
  transition: width 0.2s ease-in-out;
}

/* Smooth transitions for theme toggle */
body {
  transition: background-color 0.3s, color 0.3s;
}

/* Dark mode styles */
body.dark-mode {
  background-color: #222831;
  color: #EEEEEE;
}

body.dark-mode .bg-gray-900 {
  background-color: #31363F;
}

body.dark-mode .bg-gray-800 {
  background-color: #31363F;
}

body.dark-mode .bg-gray-700 {
  background-color: #31363F;
}

body.dark-mode .text-gray-300 {
  color: #EEEEEE;
}

body.dark-mode .text-gray-400 {
  color: #EEEEEE;
}

body.dark-mode .border-gray-600 {
  border-color: #31363F;
}

body.dark-mode .hover\:border-teal-500:hover {
  border-color: #76ABAE;
}

body.dark-mode .bg-teal-500 {
  background-color: #76ABAE;
}

body.dark-mode .hover\:bg-teal-600:hover {
  background-color: #5D9A9C;
}

body.dark-mode .focus\:ring-teal-400:focus {
  outline-color: #76ABAE;
}

/* Light mode styles */
body.light-mode {
  background-color: #FEF9F2;
  color: #31363F;
}

body.light-mode .bg-gray-900 {
  background-color: #FFE3E3;
}

body.light-mode .bg-gray-800 {
  background-color: #C9E9D2;
}

body.light-mode .bg-gray-700 {
  background-color: #789DBC;
}

body.light-mode .text-gray-300 {
  color: #31363F;
}

body.light-mode .text-gray-400 {
  color: #31363F;
}

body.light-mode .border-gray-600 {
  border-color: #789DBC;
}

body.light-mode .hover\:border-teal-500:hover {
  border-color: #789DBC;
}

body.light-mode .bg-teal-500 {
  background-color: #789DBC;
}

body.light-mode .hover\:bg-teal-600:hover {
  background-color: #5D9A9C;
}

body.light-mode .focus\:ring-teal-400:focus {
  outline-color: #789DBC;
}

/* Light mode start conversion button */
body.light-mode #start-conversion {
  background-color: #C9E9D2;
  color: #31363F;
}

body.light-mode #start-conversion:hover {
  background-color: #A8D5B8;
}

/* Format selection styles */
.format-option.selected {
  background-color: #5D9A9C;
  color: #FFFFFF;
}

body.light-mode .format-option {
  background-color: #C9E9D2;
  color: #31363F;
}

body.light-mode .format-option.selected {
  background-color: #A8D5B8; /* Slightly darker version of #C9E9D2 */
  color: #31363F;
}

/* From Uiverse.io by Madflows */
.toggle-switch {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 60px;
  height: 30px;
  --light: #d8dbe0;
  --dark: #28292c;
  --link: rgb(27, 129, 112);
  --link-hover: rgb(24, 94, 82);
}

.switch-label {
  position: absolute;
  width: 100%;
  height: 30px;
  background-color: var(--dark);
  border-radius: 15px;
  cursor: pointer;
  border: 2px solid var(--dark);
}

.checkbox {
  position: absolute;
  display: none;
}

.slider {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 15px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.checkbox:checked ~ .slider {
  background-color: var(--light);
}

.slider::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 5px;
  width: 18px;
  height: 20px;
  border-radius: 50%;
  -webkit-box-shadow: inset 12px -4px 0px 0px var(--light);
  box-shadow: inset 12px -4px 0px 0px var(--light);
  background-color: var(--dark);
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.checkbox:checked ~ .slider::before {
  -webkit-transform: translateX(30px);
  -ms-transform: translateX(30px);
  transform: translateX(30px);
  background-color: var(--dark);
  -webkit-box-shadow: none;
  box-shadow: none;
}

/* Increase the height of the file upload box */
#upload-area {
  height: 200px; /* Adjust the height as needed */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

#upload-area p {
  font-size: 1.25rem; /* Enlarge the text slightly */
  color: #666666;
}

/* Highlight the file upload box on drag */
#upload-area.dragover {
  border-color: #76ABAE; /* Highlight border color */
  background-color: #E0F7FA; /* Highlight background color */
}