/* heart.css */

/* Global body styling to ensure full viewport coverage and set default font */
body {
    background-color: black;
    width: 100%;
    height: 100vh;
    /* Use viewport height for full screen coverage */
    margin: 0px;
    overflow: hidden;
    /* Prevent scrolling */
    font-family: 'Inter', sans-serif;
    /* Recommended font for modern look */
}

/* Container for all main application elements, acts as a stacking context */
.container_all {
    display: flex;
    /* Using flex for overall layout (though absolute positioning is used for overlay) */
    flex-direction: column;
    /* Stacks elements if not absolutely positioned */
    width: 100%;
    height: 100%;
    /* Fills the body */
    position: relative;
    /* Essential for absolute positioning of children */
}

/* Container for the heart canvas, positioned to fill the entire .container_all */
.heart_container {
    height: 100%;
    width: 100%;
    position: absolute;
    /* Allows it to sit underneath other elements */
    top: 0;
    left: 0;
}

/* Styling for the canvas element itself */
canvas {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .2);
}

.container_timers {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    align-items: center;
    color: white;
    text-align: center;
    font-size: 200%;
}