/*B"H*/

body, html {
    margin: 0;
    overflow: hidden;
    background-color: #000;
    height: 100%;
    font-family: "Times New Roman", serif;
}

canvas {
    display: block;
    background: #000;
    cursor: none;
}

/* --- Teachings Screen Styles --- */
#teachings-screen::before{
content:'B"H'
}
#teachings-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #010002;
    color: #FFF;
    z-index: 10;
    box-sizing: border-box;

    /* --- FIX 2.0: Use Flexbox for a robust layout --- */
    display: flex;
    flex-direction: column;
    padding: 2vh 0; /* Add some padding at the top and bottom */
}

#teachings-screen .content {
    /* Let this area grow to fill available space and scroll if needed */
    flex: 1; 
    overflow-y: auto; 
    max-height:70vh;

    /* Centering and width */
    width: 90%;
    max-width: 600px;
    margin: 0 auto;
    padding-right: 15px; /* For scrollbar spacing */
}

#teachings-screen h1 {
    font-size: 4vh;
    text-align: center;
    margin-bottom: 2vh;
}

#teachings-screen h2 {
    font-size: 3vh;
    margin-top: 3vh;
    color: #FFD700;
}

#teachings-screen p {
    font-size: 2.5vh;
    line-height: 1.6;
    margin-bottom: 2vh;
    text-align: justify;
}

#back-button {
    /* This button will now sit naturally at the bottom */
    flex-shrink: 0; /* Prevent the button from shrinking */
    display: block;
    margin: 20px auto 0 auto; /* Top margin, and centered horizontally */
    
    width: 60vw;
    max-width: 300px;
    height: 60px;
    background: none;
    border: 2px solid #FFF;
    color: #FFF;
    font-size: 3vh;
    font-family: "Courier New", monospace;
    cursor: pointer;
}

#back-button:hover {
    border-color: #FFFF00;
}

.hidden {
    display: none !important;
}