/* static/css/pages/onboarding.css */

.onboarding-container {
  margin: var(--space-6) auto;
  width: 90%;
  max-width: 420px;
  background-color: var(--neutral-900);
  padding: var(--space-6) var(--space-4);
  border-radius: var(--space-3);
  text-align: center;
}

.onboarding-container h1 {
  margin-top: 0;
  margin-bottom: var(--space-4);
}

.onboarding-container p {
  margin-bottom: var(--space-4);
  color: var(--neutral-200);
}

.steam-login-button img {
  height: 50px;
}

/* Link between login/register pages */
.onboarding-switch {
  margin-top: var(--space-4);
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .onboarding-container {
    margin: var(--space-4) auto;
    padding: var(--space-6) var(--space-3);
  }
}

@media (max-width: 480px) {
  .onboarding-container {
    padding: var(--space-4) var(--space-3);
  }

  .steam-login-button img {
    height: 40px;
  }
}

/* Divider text between login options */
.login-divider {
  margin: var(--space-4) 0;
  color: var(--neutral-500);
  font-size: 0.9rem;
  position: relative;
}

.login-divider::before,
.login-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 40%;
  height: 1px;
  background-color: var(--neutral-700);
}

.login-divider::before { left: 0; }
.login-divider::after { right: 0; }