:root { --bdl-bg: #ffffff; --bdl-fg: #000000; }

html, body { 
  height: 100%; 
  background: var(--bdl-bg); 
  color: var(--bdl-fg); 
  font-family: 'Lora', serif; 
}

.bdl-wrap { 
  min-height: 100%; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  padding: 2rem; 
}

.bdl-card { 
  border: none; 
  background: transparent; 
  text-align: center; 
  max-width: 720px; 
  margin-top: -5rem;
  opacity: 1;
  animation-name: fadeInDelay;
  animation-duration: 8s;
}

.bdl-logo {
  margin-top: 0rem;
  opacity: 1;
  animation-name: fadeInDelay;
  animation-duration: 8s;
}

@keyframes fadeInDelay {
  from { opacity: 0; }
  to { opacity: 1; }
}

.bdl-title { 
  line-height: 1.25; 
  opacity: 1;
  animation-name: fadeIn;
  animation-duration: 4s;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.bdl-subtitle { 
  opacity: 0.85; 
  animation-name: fadeIn-2;
  animation-duration: 4s;
}

@keyframes fadeIn-2 {
  from { opacity: 0; }
  to { opacity: 0.85; }
}

.bdl-links a { 
  color: var(--bdl-fg); 
  text-decoration: none; 
  margin: 0 0.5rem; 
  font-size: 1.5rem; 
}

.bdl-links a:hover { text-decoration: underline; }

.sr-only { 
  position: absolute; 
  width: 1px; 
  height: 1px; 
  padding: 0; 
  margin: -1px; 
  overflow: hidden; 
  clip: rect(0,0,0,0); 
  border: 0; 
}