* {
    margin: 0;
  }
  
  body {
    display: flex;
    justify-content: center;
    overflow: hidden;
    align-items: center;
    text-align: center;
    flex-direction: column;
    height: 100vh;
    background-color:#2f4f4f;
    color: white;
    font-family: 'Montserrat', sans-serif;
  }

  h1 {
    font-size: 3.5rem;
  }

  h2 {
    font-size: 1.5rem;
  }

  a {
    text-decoration: none;
    color: white;
  }

  #particles-js{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
  }

  .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;
    margin-top: 2vh;
    height: 3rem;
    width: 3rem;
    display:block;
    background: #fff;
    color: rgb(41, 41, 41);
    box-shadow: 0 10px 10px rgba(0,0,0,0.1);
    border-radius:30%;
    text-align:center;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }

  .wrapper .icon span i{
    font-size:1.7rem;
    line-height:3rem;
  }


  .wrapper .icon:hover span,
  .wrapp .icon:hover .tooltip{
    text-shadow: 0px 25px 25px rgba(0,0,0,0.4);
  }
  .wrapper .icon:hover span{
    color: #fff;
  }

  
.wrapper .github:hover span,
.wrapper .github:hover .tooltip,
.wrapper .github:hover .tooltip:before{
  background:#333;
}
.wrapper .linkedin:hover span,
.wrapper .linkedin:hover .tooltip,
.wrapper .linkedin:hover .tooltip:before{
  background:#0077B5;
}