@font-face {
    font-family: 'MYFONT';
    src: url('fonts/MonumentExtended-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

.text-container {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers text horizontally */
    justify-content: center; /* Centers content vertically */
    height: 100vh; /* Full height of the viewport */
    font-family: 'MYFONT', sans-serif;
    text-align: center; /* Center the text within each p */
    position: relative; /* Make sure the text container is above the canvas */
    z-index: 10; /* Bring text container in front of the canvas */
}

.words p {
    margin: 5px 0; /* Spacing between words */
    font-size: 20px; /* Adjust size as needed */
}

#datetime {
    font-size: 14px; /* Adjust size to make the date smaller */
    margin-top: 20px; /* Add space between words and date */
}