.socials-container { width: fit-content; height: fit-content; display: flex; align-items: center; justify-content: center; gap: 25px; padding: 20px 40px; background-color: #333333; } .social { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgb(194, 194, 194); } .twitter:hover { background: linear-gradient(45deg, #66757f, #00acee, #36daff, #dbedff); } .facebook:hover { background: linear-gradient(45deg, #134ac0, #316ff6, #78a3ff); } .google-plus:hover { background: linear-gradient(45deg, #872419, #db4a39, #ff7061); } .instagram:hover { background: #f09433; background: -moz-linear-gradient( 45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100% ); background: -webkit-linear-gradient( 45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100% ); background: linear-gradient( 45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100% ); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 ); } .social svg { fill: white; height: 20px; }