body {  
  font-family: 'Poppins', sans-serif;  
  background: linear-gradient(135deg, #161625, #1a1a2e);  
  color: #e0e0e0;  
  margin: 0;  
  padding: 2rem 1rem;  
  line-height: 1.6;  
  min-height: 100vh;  
  display: flex;  
  flex-direction: column;  
}  
  
.container {  
  max-width: 750px;  
  margin: auto;  
  width: 100%;  
  flex-grow: 1;  
}  
  
header {  
  text-align: center;  
  margin-bottom: 2.5rem;  
}  
  
.logo {  
  font-size: 2.8rem;  
  font-family: 'Oswald', sans-serif;  
  color: #ffffff;  
  margin-bottom: 0.5rem;  
  font-weight: 700;  
  letter-spacing: 1px;  
}  
  
.tagline {  
  font-size: 1rem;  
  color: #a0a0c0;  
  font-weight: 300;  
  max-width: 600px;  
  margin: 0 auto;  
}  
  
.main-card {  
  background: #2a2a3e;  
  border-radius: 15px;  
  padding: 2rem 2.5rem;  
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);  
  margin-bottom: 2rem;  
}  
  
.main-card h2 {  
  text-align: center;  
  color: #ffffff;  
  margin-top: 0;  
  margin-bottom: 1.8rem;  
  font-weight: 600;  
}  
  
.main-card h2 .fas {  
  margin-right: 0.5rem;  
  color: #6c5ce7;  
}  
  
.input-group {  
  display: flex;  
  gap: 0.8rem;  
  margin-bottom: 1rem;  
  flex-wrap: wrap;  
}  
  
.input-group input[type="text"] {  
  flex: 1 1 300px;  
  padding: 0.9rem 1.2rem;  
  border-radius: 8px;  
  border: 1px solid #44445a;  
  background: #1e1e30;  
  color: #f1f1f1;  
  font-size: 0.95rem;  
  transition: border-color 0.3s ease, box-shadow 0.3s ease;  
}  
  
.input-group input[type="text"]::placeholder {  
  color: #77778a;  
}  
  
.input-group input[type="text"]:focus {  
  outline: none;  
  border-color: #6c5ce7;  
  box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.3);  
}  
  
.input-group button {  
  padding: 0.9rem 1.5rem;  
  border-radius: 8px;  
  background: #6c5ce7;  
  color: white;  
  border: none;  
  font-size: 1rem;  
  font-weight: 600;  
  cursor: pointer;  
  transition: background-color 0.3s ease, transform 0.2s ease;  
  display: inline-flex;  
  align-items: center;  
  gap: 0.5rem;  
  flex-shrink: 0;  
}  
  
.input-group button:hover {  
  background: #5a4bdb;  
  transform: translateY(-2px);  
}  
  
.input-group button .fas {  
  font-size: 0.9em;  
}  

.disclaimer {  
  font-size: 0.85rem;  
  color: #a0a0c0;  
  background-color: rgba(255, 255, 255, 0.05);  
  padding: 0.8rem 1rem;  
  border-radius: 6px;  
  margin-top: 1.5rem;  
  margin-bottom: 1.5rem;  
  line-height: 1.5;  
  text-align: left;  
}  
  
.disclaimer .fas {  
  margin-right: 0.5rem;  
  color: #f0ad4e;  
}  
  
.loading {  
  text-align: center;  
  padding: 2rem 1rem;  
  font-size: 1.1rem;  
  color: #a0a0c0;  
  margin-top: 1.5rem;  
  margin-bottom: 1.5rem;  
}  
  
.loading .fa-spinner {  
  margin-right: 0.5rem;  
  color: #6c5ce7;  
}  
  
.error-message {  
    background-color: rgba(217, 83, 79, 0.1);  
    color: #d9534f;  
    border: 1px solid rgba(217, 83, 79, 0.3);  
    padding: 1rem;  
    border-radius: 8px;  
    margin-top: 1.5rem;  
    margin-bottom: 1.5rem;  
    text-align: center;  
}  
  
.result-container {  
  margin-top: 2rem;  
  text-align: center;  
}  
  
.result-container h3 {  
    color: #ffffff;  
    margin-bottom: 1rem;  
    font-weight: 600;  
}  
  
.video-player {  
  width: 100%;  
  max-width: 100%;  
  border-radius: 8px;  
  margin-top: 1rem;  
  border: 1px solid #44445a;  
  display: block;  
  margin-left: auto;  
  margin-right: auto;  
  margin-bottom: 1.5rem;  
  background-color: #000;  
}  
  
.download-links {  
  margin-top: 1.5rem;  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
  gap: 0.8rem;  
}  
  
.btn.download-btn {  
  display: inline-flex;  
  align-items: center;  
  justify-content: center;  
  gap: 0.6rem;  
  padding: 0.8rem 2rem;  
  border-radius: 8px;  
  background: #1abc9c;  
  color: white;  
  border: none;  
  font-size: 1rem;  
  font-weight: 600;  
  cursor: pointer;  
  transition: background-color 0.3s ease, transform 0.2s ease;  
  text-decoration: none;  
  text-align: center;  
  min-width: 200px;  
}  
  
.btn.download-btn:hover {  
  background: #16a085;  
  transform: translateY(-2px);  
}  
  
.btn.download-btn .fas {  
    font-size: 0.9em;  
}  
  
footer {  
  text-align: center;  
  margin-top: 3rem;  
  padding: 1.5rem 0; /* Increased padding */  
  color: #8888a0;  
  font-size: 0.85rem;  
  border-top: 1px solid #3a3a4e; /* Add a subtle top border */  
}  
  
.copyright {  
    margin-bottom: 1rem;
}  
  
.author-section {  
    margin-top: 1rem;  
}  
  
.author-name {  
    color: #a0a0c0;  
    font-size: 0.9rem;  
    margin-bottom: 0.8rem;  
}  
  
.social-links a {  
    color: #a0a0c0;
    font-size: 1.4rem; 
    margin: 0 0.7rem;   
    text-decoration: none;  
    transition: color 0.3s ease, transform 0.3s ease;  
}  
  
.social-links a:hover {  
    color: #ffffff;  
    transform: scale(1.1);
}
  
.floating-messenger {  
    position: fixed;  
    bottom: 25px;  
    right: 25px;  
    background-color: #0084ff; 
    color: white;  
    width: 55px; 
    height: 55px;  
    border-radius: 50%;
    display: flex;  
    justify-content: center;  
    align-items: center;  
    font-size: 1.8rem;   
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);  
    z-index: 1000;
    text-decoration: none;  
    transition: transform 0.3s ease, background-color 0.3s ease;  
}  
  
.floating-messenger:hover {  
    background-color: #0073e0; 
    transform: scale(1.08); 
}  
  
  
@media (max-width: 600px) {  
  body {  
    padding: 1rem 0.5rem; 
  }  
  .container {  
      padding-left: 0.5rem; 
      padding-right: 0.5rem;  
  }  
  .logo {  
    font-size: 2rem;  
  }  
  .tagline {  
    font-size: 0.9rem; 
  }  
  .main-card {  
    padding: 1.5rem 1rem; 
  }  
  .input-group {  
    flex-direction: column; 
  }  
  .input-group input[type="text"] {  
    flex-basis: auto;  
    width: 100%;  
    box-sizing: border-box; 
  }  
  .input-group button {  
     width: 100%;  
     justify-content: center;  
     padding: 1rem;  
     box-sizing: border-box;  
  }  
  .disclaimer {  
      font-size: 0.8rem; 
      padding: 0.6rem 0.8rem;  
  }  
  .btn.download-btn {  
      width: 90%; 
      padding: 1rem;  
      box-sizing: border-box;  
  }  
  .result-container h3 {  
      font-size: 1.1rem; 
  }  
   .footer {  
        font-size: 0.8rem; 
    }  
  .social-links a {  
      font-size: 1.3rem;  
      margin: 0 0.5rem; 
  }  
  .floating-messenger {  
      width: 50px;  
      height: 50px;  
      font-size: 1.6rem;   
      bottom: 15px;
      right: 15px;  
  }  
}