#surprise {
            display: flex;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column; /* Stack divs vertically */
            margin: 0;
            color: #fff;
            //font-family: 'Arial', sans-serif;
            width:100%;
            text-align: center;
            position: relative;
            font-weight: 800;
        }

        #tree-container {
            width: 320px;
            text-align: center;
            position: relative;
        }

        #overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #000;
            opacity: 1;
            transition: opacity 1s ease-out; /* Fade-out transition for the tree */
        }

        #overlay.hidden {
            opacity: 0;
        }

        #tree-container span {
            display: inline-block;
            width: 20px !important; /* Adjust the width as needed */
            margin: 0 2px; /* Add some spacing between digits */
            transition: opacity 0.5s ease-in, color 2s ease-in-out; /* Fade-in transition for the text and color transition */
        }

        #tree-text, #sign-text, #star-text {
            margin-top: 20px;
            opacity: 0;
            transition: opacity 2s ease-in; /* Fade-in transition for the text */
        }

        #tree-text.visible, #sign-text.visible, #star-text.visible {
            opacity: 1;
        }

        .red {
            color: red; /* Red color for lights */
        }

        .yellow {
            color: yellow; /* Yellow color for lights */
        }

        .green {
            color: #00FF00; /* Green color for the tree */
        }