измени дизайн кнопок соц сетей под видео на красно белый

index.html

@@ -49,26 +49,26 @@ playsinline
                     preload="auto"
                 ></video>
 </div>
-            <div class="mt-4 flex justify-center gap-4 bg-accent p-2 rounded-lg">
-                <a href="https://instagram.com/pervotvorec" target="_blank" class="text-white hover:text-accent transition">
+            <div class="mt-4 flex justify-center gap-4 p-2">
+                <a href="https://instagram.com/pervotvorec" target="_blank" class="social-icon bg-white text-red-600 hover:bg-red-600 hover:text-white transition-colors duration-300 rounded-full p-2">
                     <i data-feather="instagram"></i>
                 </a>
-                <a href="https://facebook.com/pervotvorec" target="_blank" class="text-white hover:text-accent transition">
+                <a href="https://facebook.com/pervotvorec" target="_blank" class="social-icon bg-white text-red-600 hover:bg-red-600 hover:text-white transition-colors duration-300 rounded-full p-2">
                     <i data-feather="facebook"></i>
                 </a>
-                <a href="https://youtube.com/pervotvorec" target="_blank" class="text-white hover:text-accent transition">
+                <a href="https://youtube.com/pervotvorec" target="_blank" class="social-icon bg-white text-red-600 hover:bg-red-600 hover:text-white transition-colors duration-300 rounded-full p-2">
                     <i data-feather="youtube"></i>
                 </a>
-                <a href="https://soundcloud.com/pervotvorec" target="_blank" class="text-white hover:text-accent transition">
+                <a href="https://soundcloud.com/pervotvorec" target="_blank" class="social-icon bg-white text-red-600 hover:bg-red-600 hover:text-white transition-colors duration-300 rounded-full p-2">
                     <i data-feather="music"></i>
                 </a>
-                <a href="https://twitch.tv/pervotvorec" target="_blank" class="text-white hover:text-accent transition">
+                <a href="https://twitch.tv/pervotvorec" target="_blank" class="social-icon bg-white text-red-600 hover:bg-red-600 hover:text-white transition-colors duration-300 rounded-full p-2">
                     <i data-feather="twitch"></i>
                 </a>
-                <a href="https://bandcamp.com/pervotvorec" target="_blank" class="text-white hover:text-accent transition">
+                <a href="https://bandcamp.com/pervotvorec" target="_blank" class="social-icon bg-white text-red-600 hover:bg-red-600 hover:text-white transition-colors duration-300 rounded-full p-2">
                     <i data-feather="cloud"></i>
                 </a>
-                <a href="https://vk.com/pervotvorec" target="_blank" class="text-white hover:text-accent transition">
+                <a href="https://vk.com/pervotvorec" target="_blank" class="social-icon bg-white text-red-600 hover:bg-red-600 hover:text-white transition-colors duration-300 rounded-full p-2">
                     <i data-feather="radio"></i>
                 </a>
             </div>

style.css

@@ -45,6 +45,19 @@ article h3 {
 .grid.md\:grid-cols-2 {
     align-items: start;
 }
+.social-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    transition: transform 0.3s ease;
+}
+
+.social-icon:hover {
+    transform: scale(1.1);
+}
+
 /* Custom scrollbar */
 ::-webkit-scrollbar {
     width: 8px;