Update app.py

app.py

@@ -44,65 +44,7 @@ title = """
     </div>
 """
 
-css = '''
-    #col-container, #col-container-2 {max-width: 510px; margin-left: auto; margin-right: auto;}
-    a {text-decoration-line: underline; font-weight: 600;}
-    div#record_btn > .mt-6 {
-        margin-top: 0!important;
-    }
-    div#record_btn > .mt-6 button {
-        width: 100%;
-        height: 40px;
-    }
-    .footer {
-            margin-bottom: 45px;
-            margin-top: 10px;
-            text-align: center;
-            border-bottom: 1px solid #e5e5e5;
-        }
-        .footer>p {
-            font-size: .8rem;
-            display: inline-block;
-            padding: 0 10px;
-            transform: translateY(10px);
-            background: white;
-        }
-        .dark .footer {
-            border-color: #303030;
-        }
-        .dark .footer>p {
-            background: #0b0f19;
-        }
-    .animate-spin {
-        animation: spin 1s linear infinite;
-    }
-    @keyframes spin {
-        from {
-            transform: rotate(0deg);
-        }
-        to {
-            transform: rotate(360deg);
-        }
-    }
-    #share-btn-container {
-        display: flex; padding-left: 0.5rem !important; padding-right: 0.5rem !important; background-color: #000000; justify-content: center; align-items: center; border-radius: 9999px !important; width: 13rem;
-    }
-    #share-btn {
-        all: initial; color: #ffffff;font-weight: 600; cursor:pointer; font-family: 'IBM Plex Sans', sans-serif; margin-left: 0.5rem !important; padding-top: 0.25rem !important; padding-bottom: 0.25rem !important;right:0;
-    }
-    #share-btn * {
-        all: unset;
-    }
-    #share-btn-container div:nth-child(-n+2){
-        width: auto !important;
-        min-height: 0px !important;
-    }
-    #share-btn-container .wrap {
-        display: none !important;
-    }
-'''
-
-with gr.Blocks(css=css) as demo:
+with gr.Blocks(css="style.css") as demo:
     
     with gr.Column(elem_id="col-container"):