.links {
  margin-top: 30px;
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.links a {
  width: 130px;
  height: 55px;

  display: inline-flex;
  justify-content: center;
  align-items: center;

  text-decoration: none;
  font-size: 1.2em;
  font-weight: bold;

  background: rgba(255, 255, 255, 0.08);

  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);

  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 18px;

  box-shadow:
    inset 0 0 15px rgba(255, 255, 255, 0.05),
    0 8px 25px rgba(0, 0, 0, 0.35);

  transition:
    transform 0.3s ease,
    background 0.3s ease,
    box-shadow 0.3s ease,
    color 0.3s ease,
    text-shadow 0.3s ease;
}

.links a:nth-child(1) {
  color: #5865f2;
  text-shadow: 0 0 10px rgba(88, 101, 242, 0.55);
}

.links a:nth-child(2) {
  color: #ffffff;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.55);
}

.links a:nth-child(3) {
  color: #ff0000;
  text-shadow: 0 0 10px rgba(255, 0, 0, 0.55);
}

.links a:nth-child(4) {
  color: #00a2ff;
  text-shadow: 0 0 10px rgba(0, 162, 255, 0.55);
}

.links a:hover {
  transform: translateY(-8px) scale(1.08);
  background: rgba(255, 255, 255, 0.16);
}

.links a:nth-child(1):hover {
  color: #5865f2;
  text-shadow: 0 0 15px rgba(88, 101, 242, 0.9);
  box-shadow:
    0 0 30px #5865f2,
    inset 0 0 20px rgba(255, 255, 255, 0.15);
}

.links a:nth-child(2):hover {
  color: #ffffff;
  text-shadow: 0 0 15px rgba(255, 255, 255, 0.9);
  box-shadow:
    0 0 30px #ffffff,
    inset 0 0 20px rgba(255, 255, 255, 0.15);
}

.links a:nth-child(3):hover {
  color: #ff0000;
  text-shadow: 0 0 15px rgba(255, 0, 0, 0.9);
  box-shadow:
    0 0 30px #ff0000,
    inset 0 0 20px rgba(255, 255, 255, 0.15);
}

.links a:nth-child(4):hover {
  color: #00a2ff;
  text-shadow: 0 0 15px rgba(0, 162, 255, 0.9);
  box-shadow:
    0 0 30px #00a2ff,
    inset 0 0 20px rgba(255, 255, 255, 0.15);
}