ul{list-style:none;padding:0;margin:0}.example-2{display:flex;flex-direction:column;justify-content:center;align-items:center}.example-2 .icon-content{margin:10px 0;position:relative;padding:.5rem}.example-2 .icon-content .tooltip{position:absolute;top:50%;right:100%;margin-right:15px;transform:translateY(-50%) translateX(10px);color:#fff;padding:6px 10px;border-radius:5px;opacity:0;visibility:hidden;font-size:14px;transition:all .3s ease;white-space:nowrap}.example-2 .icon-content:hover .tooltip{opacity:1;visibility:visible;transform:translateY(-50%) translateX(0)}.example-2 .icon-content a{position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;width:40px;height:40px;border-radius:50%;color:#4d4d4d;background-color:#fff;transition:all .3s ease-in-out}.example-2 .icon-content a:hover{box-shadow:3px 2px 45px 0 rgb(0 0 0/12%);color:white}.example-2 .icon-content a svg{position:relative;z-index:1;width:20px;height:20px}.example-2 .icon-content a .filled{position:absolute;top:auto;bottom:0;left:0;width:100%;height:0;background-color:#000;transition:all .3s ease-in-out}.example-2 .icon-content a:hover .filled{height:100%}.example-2 .icon-content a[data-social=linkedin] .filled,.example-2 .icon-content a[data-social=linkedin]~.tooltip{background-color:#0274b3}.example-2 .icon-content a[data-social=github] .filled,.example-2 .icon-content a[data-social=github]~.tooltip{background-color:#24262a}.example-2 .icon-content a[data-social=instagram] .filled,.example-2 .icon-content a[data-social=instagram]~.tooltip{background:linear-gradient(45deg,#405de6,#5b51db,#b33ab4,#c135b4,#e1306c,#fd1f1f)}.example-2 .icon-content a[data-social=facebook] .filled,.example-2 .icon-content a[data-social=facebook]~.tooltip{background-color:#1877F2}.example-2 .icon-content a[data-social=youtube] .filled,.example-2 .icon-content a[data-social=youtube]~.tooltip{background-color:#ff0000}