body {
    font-family: 'Roboto', sans-serif; background: linear-gradient(270deg, rgb(44, 13, 58), rgb(13, 58, 56)); color: white; text-align: center; margin: 0; padding: 50px;
}
h1 {
    font-size: 40px;
    background: linear-gradient(to right, #f32170, #ff6b08, #cf23cf, #eedd44);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    font-weight: bold;
}
#upload-container, #upload-container2 {
    background: rgba(255, 255, 255, 0.2); padding: 20px; width: 70%; border-radius: 10px; display: inline-block; box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.3);
}
#upload, #upload2 {
    font-size: 18px; padding: 10px; border-radius: 5px; border: none; background: #fff; cursor: pointer;
}
#loader {
    margin-top: 10px; margin-left: auto; margin-right: auto; width: 60px; height: 60px; font-size: 12px; text-align: center;
}
p {
    margin-top: 10px; font-size: 12px; color: #3498db;
}
#spinner {
    border: 8px solid #f3f3f3; border-top: 8px solid rgb(117 7 7); border-radius: 50%; animation: spin 1s linear infinite; width: 40px; height: 40px; margin: auto;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
#outputVideo {
    margin-top: 20px; width: 70%; margin-left: auto; margin-right: auto; max-width: 640px; border-radius: 10px; box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.3);
}
#downloadBtn {
    display: block; visibility: hidden; width: 20%; margin-top: 20px; margin-left: auto; margin-right: auto; padding: 10px 15px; font-size: 16px; background: #27ae60; color: white; border: none; border-radius: 5px; cursor: pointer; text-decoration: none;
}
#downloadBtn:hover {
    background: #950606;
}
#checkAnimalBtn {
    display: block; width: 20%; margin-top: 20px; margin-left: auto; margin-right: auto; padding: 10px 15px; font-size: 16px; background: #2752ae; color: white; border: none; border-radius: 5px; cursor: pointer; text-decoration: none;
}
#checkAnimalBtn:hover {
    background: #8127ae;
}
.hidden {
    display: none;
}
@media (max-width: 860px) {
    h1 { font-size: 30px; }
}
@media (max-width: 720px) {
    h1 { font-size: 25px; }
    #upload { font-size: 15px; }
    #downloadBtn { font-size: 13px; }
}
@media (max-width: 580px) {
    h1 { font-size: 20px; }
    #upload { font-size: 10px; }
    #downloadBtn { font-size: 10px; }
}
@media (max-width: 580px) {
    h1 { font-size: 10px; }
}
@media (max-width: 460px) {
    #upload { font-size: 7px; }
}
@media (max-width: 400px) {
    h1 { font-size: 14px; }
}
@media (max-width: 370px) {
    h1 { font-size: 11px; }
    #upload { font-size: 5px; }
    #downloadBtn { font-size: 7px; }
}
@media (max-width: 330px) {
    h1 { font-size: 8px; }
    #upload { font-size: 3px; }
    #downloadBtn { font-size: 5px; }
}