/* ===== Font Family ===== */
@import url('https://fonts.googleapis.com/css2?family=Ballet:opsz@16..72&family=Birthstone&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Lavishly+Yours&family=Mea+Culpa&family=Monsieur+La+Doulaise&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Rouge+Script&display=swap');

/* 
Font Family: 
  0- Roboto
  1- Inter
  2- Ballet
  3- Birthstone
  4- Lavishly Yours
  5- Mea Culpa
  6- Monsieur La Doulaise
  7- Playfair Display
  8- Rouge Script
*/

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

/* ===== Background Color Gradient and Animations ===== */
body {
  background: linear-gradient(
    -45deg,
    black,
    #02020a
  );
}

/* container */
.nova-social-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Title */
.nova-title {
  font-family: 'Mea Culpa';
  font-style: italic;
  font-size: 4rem;
  color: white;
  margin-bottom: 2rem;
}

ul.nova-table-icons {
  list-style: none;
}

li.nova-element-icons {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* a link => icons */
.icon {
  position: relative;
  width: 80px;
  height: 50px;
  background-color: #fff;
  border-radius: 10%;
  overflow: hidden;
  margin: 0 10px;
  /* if you needed border on icons */
  /* border: 3px solid #fff; */
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* i => icons from font awesome */
.icon i {
  color: #000;
  font-size: 1.5rem;
  z-index: 2;
  transition: 0.4s;
  display: inline-block;
}

.icon::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  background: var(--clr-bg);
  transition:  0.6s ease-in-out;
  z-index: 1;
}

.icon:hover::before {
  height: 100%;
}

/* hover a link and icon */
.icon:hover i {
  color: #fff;
  animation: spin 3s linear infinite;
}

.icon:hover {
  animation: neon 1.5s ease-in-out infinite alternate;
}


/* Effects to Icons Animation and Hover */

/* Animation to icon spin */
@keyframes spin {
  0% {
    transform: rotateY(0deg) scale(1);
  }
  20%{
    transform: rotate(360deg) scale(1.3);
  }
  100%{
    transform: rotate(360deg) scale(1);
  }
}

/* Animation to icon around border effects  */
@keyframes neon {
  form {
    box-shadow: 0 0 10px var(--clr-neon);
  }
  to {
    box-shadow: 0 0 40px var(--clr-neon),
      0 0 40px var(--clr-neon);
  }
}

/* hover icons  */
/*
  --clr-bg => background-color to icons from bottom to top .
  --clr-neon => Effects Around the Icons.

*/
.facebook:hover {
  --clr-bg:#1877F2;
  --clr-neon: #1877F2;
}

.messenger:hover {
  --clr-bg:linear-gradient(
    45deg,
    #006AFF,
    #00C6FF,
    #8B5CF6,
    #FF2D95
  );
  --clr-neon: #00C6FF;

}

.whatsapp:hover {
  --clr-bg: #25D366;
  --clr-neon: #25D366;

}

.threads:hover {
  --clr-bg: #000000;
  --clr-neon: #ffffff;

}


.instagram:hover {
  --clr-bg: linear-gradient(
    45deg, 
    #833AB4,
    #E1306c,
    #F56040,
    #FCAF45
  );
  --clr-neon: #E1306c;

}


.x-twitter:hover {
  --clr-bg: #000000;
  --clr-neon: #ffffff;

}

.linkedin:hover {
  --clr-bg: #0A66C2;
  --clr-neon: #0A66C2;

}


.discord:hover {
  --clr-bg: #5865F2;
  --clr-neon: #5865F2;
  
}

.tiktok:hover {
  --clr-bg: #000000;
  --clr-neon: #ffffff;
}

.youtube:hover {
  --clr-bg: #FF0000;
  --clr-neon: #FF0000;
}

.github:hover {
  --clr-bg: #24292F;
  --clr-neon: #24292F;
}



.pinterest:hover {
  --clr-bg: #E60023;
  --clr-neon: #E60023;
}


.telegram:hover {
  --clr-bg: #229ED9;
  --clr-neon: #229ED9;

}

.reddit:hover {
  --clr-bg: #FF4500;
  --clr-neon: #FF4500;
}


.snapchat:hover {
  --clr-bg: #FFFC00;
  --clr-neon: #FFFC00;
}

.skype:hover {
  --clr-bg: #00AFF0;
  --clr-neon: #00AFF0;
}