body {
  /* font-family: "Inter", sans-serif; */
  font-family: "Inter", sans-serif;
  transition: background-color 0.4s ease;

}

.header,
.paragraph,
.icon,
.activity,
.border,
.card {
  transition:
    background-color 0.35s ease,
    color 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease,
    transform 0.25s ease;
}

.body-night {
  background-color: #18181b;
}

.header-night {
  color: #f8fafc;
}

.paragraph-night {
  color: #c9d1d9;
}

.icon-night,
.activity-night {
  color: #c9d1d9;
}

.icon-night:hover,
.activity-night:hover {
  color: #9ec7a7;
}

.border {
  border-top: 1px solid #e5e7eb;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
}

.border-night {
  border-top-color: #3f3f46;
}

.card:hover {
  background: #f3f8f4;
  transform: translateY(-4px);
}

.body-night .card:hover {
  background: #27272a;
}

::selection {
  background: #9ec7a7;
  color: white;
}

.body-night ::selection {
  background: #27272a;
  color: #9ec7a7;
}

.cursor-glow {
  position: fixed;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  pointer-events: none;

  background: radial-gradient(
    circle,
    rgba(34, 197, 94, 0.18) 0%,
    rgba(34, 197, 94, 0.1) 30%,
    rgba(34, 197, 94, 0.04) 55%,
    transparent 75%
  );

  filter: blur(35px);

  left: 0;
  top: 0;

  transform: translate(-50%, -50%);
  transition: opacity 0.25s;
}

.body-night .cursor-glow {
  background: radial-gradient(
    circle,
    rgba(34, 197, 94, 0.28) 0%,
    rgba(34, 197, 94, 0.16) 35%,
    rgba(34, 197, 94, 0.05) 60%,
    transparent 80%
  );
}

.card:hover {
  transform: translateY(-4px);
}

@media (hover: none), (pointer: coarse) {
  .cursor-glow {
    display: none;
  }
}