CSS падающий объект внутри определенного элемента div

Question

Я делаю секцию, где внутри этого элемента есть объект падающего снега, но моя проблема в том, что снег все еще падает за пределы этого элемента, я хочу, чтобы он был только внутри определенного элемента

Я пробую этот падающий объект, используя этот учебник ссылка: https://www.kirupa.com/html5/the_falling_snow_effect.htm

Вот HTML:

<section class="section-countdown">

        <div id="snowflakeContainer">
            <p class="snowflake">*</p>
        </div>
        <h2>THIS CONGRESS BEGINS IN</h2>
        <ul class="countdown">
            <li> <span id="days"></span>
                <p class="days_ref">DAYS</p>
            </li>
            <li class="seperator">:</li>
            <li> <span id="hours"></span>
                <p class="hours_ref">HOURS</p>
            </li>
            <li class="seperator">:</li>
            <li> <span id="minutes"></span>
                <p class="minutes_ref">MINUTES</p>
            </li>
            <li class="seperator">:</li>
            <li> <span id="seconds"></span>
                <p class="seconds_ref">SECONDS</p>
            </li>
        </ul>
    </section>

вот SCSS:

.section-countdown {
    margin: 0 auto;
    padding: 45px 0;
    max-width: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    text-align: center;
    position: relative;

    #snowflakeContainer {
        position: absolute;
        left: 0px;
        top: 0px;

        .snowflake {
            padding-left: 15px;
            font-family: Cambria, Georgia, serif;
            font-size: 14px;
            line-height: 24px;
            position: relative;
            color: #FFFFFF;
            user-select: none;
            z-index: 1000;

            &:hover {
                cursor: default;
            }
        }
    }
}