Add fediverso-style.css

fediverso-style.css

@@ -0,0 +1,81 @@
+.mastodon-box {
+  width: 100%;
+  padding: 20px;
+  margin: 2rem 0;
+  border: 1px solid #e5e7eb;
+  border-radius: 16px;
+  background: linear-gradient(135deg, #f9fafb, #eef2ff);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  font-family: inherit;
+  transition: all 0.3s ease;
+  box-sizing: border-box;
+}
+
+.mastodon-box p {
+  margin: 0 0 12px;
+  color: #444;
+  font-size: 15px;
+  line-height: 1.5;
+}
+
+.mastodon-box span {
+  font-size: 1.1em;
+  font-weight: 600;
+}
+
+.mastodon-box span span {
+  color: #7c3aed;
+}
+
+.mastodon-box #fediFollowForm {
+  display: flex !important;
+  gap: 10px !important;
+  flex-wrap: wrap !important;
+}
+
+.mastodon-box #fediUserInput {
+  flex: 1;
+  padding: 10px 12px;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  font-size: 14px;
+  transition: border 0.2s ease;
+  min-width: 200px;
+}
+
+.mastodon-box #fediFollowBtn {
+  background: #7c3aed;
+  color: #fff;
+  padding: 10px 18px;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  font-weight: 600;
+  transition: background 0.2s ease;
+  white-space: nowrap;
+}
+
+.mastodon-box #fediFollowBtn:hover {
+  background: #5b21b6;
+}
+
+.mastodon-box small {
+  font-size: 13px;
+  color: #666;
+  margin-top: 10px;
+  display: block;
+}
+
+.mastodon-box a {
+  color: #7c3aed;
+  text-decoration: underline;
+}
+
+@media (max-width: 768px) {
+  .mastodon-box #fediFollowForm {
+    flex-direction: column;
+  }
+  .mastodon-box #fediFollowBtn {
+    width: 100%;
+  }
+}