| 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; } | |
| } |