body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* Changed to flex-start to align items from the top */
    background: #2B1347;  /* Dark background for contrast */
    font-family: Arial, sans-serif;
    color: white;
    overflow: auto; /* Ensure overflow content is visible */
}

.introduction {
    text-align: center;
    max-width: 800px;
    font-size: 0.8em;  /* Smaller text size */
    margin-top: 50px; /* Add margin to move it down */
    margin-bottom: 30px; /* Add some margin to ensure it's not cut off */
}

.introduction h2 {
    font-size: 1.2em;
    margin-top: 20px;
}

.introduction p, .introduction ul {
    text-align: left;
    margin: 10px 0;
}

.introduction ul {
    list-style: none;
    padding-left: 0;
}

.introduction ul li::before {
    content: "• ";
    color: rgba(255, 255, 255, 0.9);
    font-weight: bold;
}

.mantra-container {
    text-align: center;
    margin-top: 20px; /* Add margin to ensure it's separated from the introduction */
}

.mantra-list {
    list-style: none;
    padding: 0;
}

.mantra {
    margin: 10px 0;
    font-size: 2em;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    color: rgba(255, 255, 255, 0.9);
}