/*
 * Custom CSS
 */

:root {
  --nearly-white: #f7f7f7;
  --avatar-border-colour: #7f7f7f;
}

html,
body {
  width: 100vw;
  height: 100vh;
}

body {
  font-family: 'Poppins', sans-serif;
}

img.avatar {
  border-radius: 50%;
  border: 2px solid var(--avatar-border-colour);
  width: 200px;
  height: 200px;
  box-shadow: 4px 4px 32px 8px rgba(0, 0, 0, 0.5);
}

.title {
  font-family: 'Poppins', sans-serif;
  font-size: 3rem;
  /* color: var(--nearly-white); */
  color: #ffffff;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.85);
}

.title .title_first {
  font-style: italic;
  font-weight: 500;
}

.title .title_second {
  font-style: italic;
  font-weight: 100;
}

.icon {
  font-size: 2.5rem;
  padding: 0 0.5rem;
}

.icon-btn {
  color: unset;
  text-decoration: none;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.85);
}

.icon-btn:hover {
  color: var(--nearly-white);
  text-decoration: none;
}

.poppins-light {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-style: normal;
}

.poppins-regular {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-style: normal;
}

.poppins-semibold {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-style: normal;
}

.poppins-bold {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-style: normal;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes softPulse {
  0%,
  100% {
    text-shadow: 0 0 0 rgba(255, 255, 255, 0);
  }
  50% {
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.15);
  }
}

.redesign-animate {
  animation:
    fadeUp 0.8s ease-out both,
    softPulse 4s ease-in-out infinite;
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .redesign-animate {
    animation: none;
  }
}