/* overall container for the ways to contact cards */
.ways_contact_container {
  margin: 0 auto;
  justify-content: space-around;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  max-width: 80vw;
  padding-bottom: 2rem;
  gap: 1.5rem;
}

/* style for individual way to contact cards */
.ways_contact_card {
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(24, 24, 30, 0.08);
  background: rgb(var(--gray-100), 0.02);
  border-radius: 0.6rem;
  position: relative;
  height: 11rem;
  width: 23rem;
  text-decoration: none;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
  padding: 1rem;
  transition: 0.25s ease-out;
}

/* To increase the opacity of the glowing effect when the card is hovered */
.ways_contact_card:hover,
.ways_contact_card:focus {
  transform: translateY(-3%);
  box-shadow: 0 1px 0 rgba(24, 24, 30, 0.04), 0 10px 30px rgba(24, 24, 30, 0.08);
  transition-delay: 0s;
}

/* Transition delay for both resume and email card so that it goes up one by one */
.ways_contact_card:nth-child(2) {
  transition-delay: 200ms;
}

.ways_contact_card:nth-child(3) {
  transition-delay: 300ms;
}

/* styling for the glowing effect on the cards */
.ways_contact_card::before {
  background: radial-gradient(
    600px circle at var(--mouse-x) var(--mouse-y),
    rgb(var(--gray-100), 0.1),
    transparent 40%
  );
  border-radius: inherit;
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0px;
  top: 0px;
  z-index: 2;
  opacity: var(--before_opacity, 0);
  transition: opacity 500ms;
}

/* style for the icon in each way contact card */
.ways_contact_card i {
  font-size: var(--font-size-5xl);
  background: linear-gradient(45deg, rgb(var(--blue-400)), rgb(209, 213, 219));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* style for title in the way to contact card */
.ways_contact_card h3 {
  color: rgb(var(--gray-900));
  font-size: var(--font-size-xl);
  font-weight: 500;
}

/* style for the description for the way to contact card */
.ways_contact_card p {
  color: rgb(var(--gray-700));
  font-size: var(--font-size-m);
  font-weight: 300;
}

/* show the glow without JS + sensible default center */
.ways_contact_card {
  --mouse-x: 50%;
  --mouse-y: 50%;
}
.ways_contact_card:hover,
.ways_contact_card:focus {
  --before_opacity: 1;
}