resolve logo styling

app.py

@@ -61,7 +61,7 @@ def on_user_logged_in(token: gr.OAuthToken | None):
                 <div style="text-align: center; padding: 20px; border: 2px dashed #ccc;">
                     <h3>🎯 Complete the Quiz to Unlock</h3>
                     <p>Pass the quiz to add your certificate to LinkedIn!</p>
-                    <img src="https://huggingface.co/spaces/mcp-course/unit_1_quiz/resolve/main/li_logo.webp" alt="LinkedIn Add to Profile" style="width: 200px; height: 53px; text-align: center;">
+                    <img src="https://huggingface.co/spaces/mcp-course/unit_1_quiz/resolve/main/li_logo.webp" alt="LinkedIn Add to Profile" style="width: 80px; height: 80px; text-align: center;">
                 </div>
             """,
             ),  # linkedin_btn - now visible with explanatory text
@@ -84,7 +84,7 @@ def on_user_logged_in(token: gr.OAuthToken | None):
                 value="""
                 <div style="text-align: center; padding: 20px; border: 2px dashed #ccc; border-radius: 10px; margin-top: 20px;">
                     <h3>🔒 Login Required</h3>
-                    <img src="https://huggingface.co/spaces/mcp-course/unit_1_quiz/resolve/main/li_logo.webp" alt="LinkedIn Add to Profile" style="width: 200px; height: 53px; text-align: center;">
+                    <img src="https://huggingface.co/spaces/mcp-course/unit_1_quiz/resolve/main/li_logo.webp" alt="LinkedIn Add to Profile" style="width: 80px; height: 80px; text-align: center;">
                 </div>
             """,
             ),  # linkedin_btn - visible with login prompt
@@ -317,7 +317,7 @@ def handle_quiz(
             <div style="text-align: center; padding: 20px; border: 2px dashed #4CAF50;">
                 <h3>🎉 Ready for LinkedIn!</h3>
                 <p>Great! Click "Get your certificate" above to unlock the LinkedIn button.</p>
-                <img src="https://huggingface.co/spaces/mcp-course/unit_1_quiz/resolve/main/li_logo.webp" alt="LinkedIn Add to Profile" style="width: 200px; height: 53px; text-align: center;">
+                <img src="https://huggingface.co/spaces/mcp-course/unit_1_quiz/resolve/main/li_logo.webp" alt="LinkedIn Add to Profile" style="width: 80px; height: 80px; text-align: center;">
             </div>
         """
             if has_passed
@@ -368,7 +368,7 @@ def handle_quiz(
             <div style="text-align: center; padding: 20px; border: 2px dashed #ccc;">
                 <h3>🎯 Keep Going!</h3>
                 <p>Complete the quiz and pass to unlock your LinkedIn certificate!</p>
-                <img src="https://huggingface.co/spaces/mcp-course/unit_1_quiz/resolve/main/li_logo.webp" alt="LinkedIn Add to Profile" style="width: 200px; height: 53px; opacity: 0.5;">
+                <img src="https://huggingface.co/spaces/mcp-course/unit_1_quiz/resolve/main/li_logo.webp" alt="LinkedIn Add to Profile" style="width: 80px; height: 80px; text-align: center;">
             </div>
         """,
         ),  # linkedin button with progress message