@import url("https://fonts.googleapis.com/css2?

family=Poppins&display=swap");

*{

margin: 0;

padding: 0;

box-sizing: border-box;

*:focus,

*:active {

outline: none !important;

-webkit-tap-highlight-color: transparent;

html,

body {

display: grid;

height: 100%;

width: 100%;

font-family: "Poppins", sans-serif;

place-items: center;

background: linear-gradient(315deg, #ffffff, #d7e1ec);

.wrapper {
 display: inline-flex;

list-style: none;

.wrapper .icon {

position: relative;

background: #ffffff;

border-radius:15px;

padding: 15px;

margin: 10px;

width: 50px;

height: 50px;

font-size: 18px;

display: flex;

justify-content: center;

align-items: center;

flex-direction: column;

box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);

cursor: pointer;

transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);

.wrapper .tooltip {

position: absolute;

top: 0;
 font-size: 14px;

background: #ffffff;

color: #ffffff;

padding: 5px 8px;

border-radius: 5px;

box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);

opacity: 0;

pointer-events: none;

transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);

.wrapper .tooltip::before {

position: absolute;

content: "";

height: 8px;

width: 8px;

background: #ffffff;

bottom: -3px;

left: 50%;

transform: translate(-50%) rotate(45deg);

transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);

.wrapper .icon:hover .tooltip {

top: -45px;
 opacity: 1;

visibility: visible;

pointer-events: auto;

.wrapper .icon:hover span,

.wrapper .icon:hover .tooltip {

text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);

.wrapper .facebook:hover,

.wrapper .facebook:hover .tooltip,

.wrapper .facebook:hover .tooltip::before {

background: #1877F2;

color: #ffffff;

.wrapper .tiktok:hover,

.wrapper .tiktok:hover .tooltip,

.wrapper .tiktok:hover .tooltip::before {

background: #000000;

color: #ffffff;

.wrapper .instagram:hover,
.wrapper .instagram:hover .tooltip,

.wrapper .instagram:hover .tooltip::before {

background: #7a21b6;

color: #ffffff;

.wrapper .youtube:hover,

.wrapper .youtube:hover .tooltip,

.wrapper .youtube:hover .tooltip::before {

background: #CD201F;

color: #ffffff;