body {
    background-color: #fdfcf7;
    color: #3e2723;
}

.text-brown {
    color: #5d4037;
}

.verse-box {
    background: #fffaf0;
    border-left: 10px solid #6c757d;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
}

footer {
  flex-shrink: 0;
}

/* floating button */
@keyframes floaty {
  0% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
  100% { transform: translateY(0); }
}

/* animated header */
 .animated-header {
      color: #a1887f;
      font-weight: bold;
      font-size: 1.3rem;
      white-space: nowrap;
      overflow: hidden;
      text-align: center;
      padding-bottom: 5px;
    }

    .typing {
      animation: blink-caret 0.75s step-end infinite;
    }

    .caret {
  display: inline-block;
  color: #a1887f;
  animation: blinkCaret 0.8s step-start infinite;
  font-weight: bold;
}

@keyframes blinkCaret {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}



/* social media icons */

.social-share {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }

  .social-share a {
    text-decoration: none;
    color: #333;
    font-size: 18px;
    padding: 6px;
    transition: 0.3s;
  }

  .social-share a:hover {
    color: #007bff;
    transform: scale(1.2);
  }