/* Page-specific styles for about.html and landingpage.html */

/* Animated Register Arrow - Only visible for non-authenticated users */
.register-arrow-container {
  position: fixed;
  left: 250px;
  top: 80px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: fadeInSlide 0.6s ease-out;
}

@keyframes fadeInSlide {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.register-arrow {
  animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  10% {
    transform: translateY(-15px) rotate(-5deg);
  }
  30% {
    transform: translateY(-10px) rotate(3deg);
  }
  40% {
    transform: translateY(-20px) rotate(-3deg);
  }
  60% {
    transform: translateY(-8px) rotate(2deg);
  }
}

.register-arrow svg {
  filter: drop-shadow(0 2px 4px rgba(74, 144, 226, 0.3));
}

.register-text {
  margin-top: 12px;
  font-size: 14px;
  font-weight: 600;
  color: #4a90e2;
  text-align: center;
  line-height: 1.4;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  max-width: 140px;
}

/* Hide arrow on small screens */
@media (max-width: 768px) {
  .register-arrow-container {
    display: none;
  }
}

/* About page - color and font-size variations */
.inline-style-4805b204 {
  color: #4a90e2;
}

.inline-style-1dd69459 {
  font-size: 1.2em;
}

.inline-style-f1f2a956 {
  color: #00796b;
}

.inline-style-ccf3edfe {
  font-size: 1.1em;
}

.inline-style-493e2761 {
  font-size: 1.15em;
  color: #e67e22;
}

.inline-style-16a15da4 {
  color: #d9534f;
}

.inline-style-28ceed85 {
  font-size: 1.05em;
}

/* Landing page - logo max-width */
.inline-style-1dd78b20 {
  max-width: 320px;
  width: 100%;
}