*{
  font-family:'Arial', san serif;
}
html, body{
  display:grid;
  height:100%;
  width: 100%;
  place-items:center;
  background: linear-gradient(315deg, #ffffff, #d7e1ec );
}

h1{ 
	font-family: 'Lato', sans-serif;
	font-weight:400;
	font-size:3em;
}
.w900{
	font-weight:900;
}
.reg {
	font-size:.5em;
	vertical-align: super;
}
.const {
	width:490px;
	font-size:.3em;
	background:#000;
	color:#fff;
	text-align: center;
}

.wrapper{
  display:inline-flex;
}

.wrapper .icon{
  margin: 0 20px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  position: relative;
  z-index:2;
}

.wrapper .icon span{
  position:relative;
  z-index:2;
  height: 60px;
  width: 60px;
  display:block;
  background: #fff;
  box-shadow: 0 10px 10px rgba(0,0,0,0.1);
  border-radius:50%;
  text-align:center;
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrapper .icon span a{
  color: #000;
}

.wrapper .icon span i{
  font-size:25px;
  line-height:60px;
}

.wrapper .icon .tooltip{
  position:absolute;
  top:0px;
  background: #fff;
  box-shadow: 0 10px 10px rgba(0,0,0,0.1);
  font-size: 20px;
  padding: 10px 18px;
  border-radius: 25px;
  color:white;
  opacity:0;
  pointer-events: none;
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrapper .icon:hover .tooltip{
  opacity:1;
  pointer-events: auto;
  top:-70px;
}

.wrapper .icon .tooltip:before{
  position:absolute;
  content:"";
  height:15px;
  width:15px;
  bottom:-8px;
  left:50%;
  transform: translateX(-50%) rotate(45deg);
}
.wrapper .icon:hover span,
.wrapp .icon:hover .tooltip{
  text-shadow: 0px -1px 0px rgba(0,0,0,0.4);
}
.wrapper .icon:hover span a{
  color: #fff;
}

.wrapper .facebook:hover span,
.wrapper .facebook:hover .tooltip,
.wrapper .facebook:hover .tooltip:before{
  background:#3B5999;
}
.wrapper .twitter:hover span,
.wrapper .twitter:hover .tooltip,
.wrapper .twitter:hover .tooltip:before{
  background:#46C1F6;
}
.wrapper .github:hover span,
.wrapper .github:hover .tooltip,
.wrapper .github:hover .tooltip:before{
  background:#333;
}
.wrapper .youtube:hover span,
.wrapper .youtube:hover .tooltip,
.wrapper .youtube:hover .tooltip:before{
  background:#de463b;
}
.wrapper .instagram:hover span,
.wrapper .instagram:hover .tooltip,
.wrapper .instagram:hover .tooltip:before{
  background:#dd2a7b;
}
.wrapper .tiktok:hover span,
.wrapper .tiktok:hover .tooltip,
.wrapper .tiktok:hover .tooltip:before{
  background:#ff0050;
}
.wrapper .kdd:hover span,
.wrapper .kdd:hover .tooltip,
.wrapper .kdd:hover .tooltip:before{
  background:#ffd93b;
}