Quiero hacer que el color del número sea verde si es mayor que cero para que sea verde y quiero que sea rojo cuando esté por debajo de cero, pero no puedo hacerlo. No entiendo por qué alguien puede explicarlo.

 const button1 = document.querySelector('.prevBtn'); const button2 = document.querySelector('.nextBtn'); const main = document.querySelector('.main-container') const count = document.getElementById('counter') let counter = 0 main.addEventListener('click', e => { if(e.target.classList.contains('nextBtn')){ counter++ html=` <h1 class="text-uppercase">counter</h1> <h1 id="counter"class =count">${counter}</h1> <div class="btn-container d-flex justify-content-around flex-wrap"> <button class="btn counterBtn prevBtn text-uppercase m-2">lower count</button> <button class="btn counterBtn nextBtn text-uppercase m-2">add count</button> ` main.innerHTML = html }else if(e.target.classList.contains('prevBtn')){ counter-- html=` <h1 class="text-uppercase">counter</h1> <h1 id="counter">${counter}</h1> <div class="btn-container d-flex justify-content-around flex-wrap"> <button class="btn counterBtn prevBtn text-uppercase m-2">lower count</button> <button class="btn counterBtn nextBtn text-uppercase m-2">add count</button> ` main.innerHTML = html } }) if(counter > 0){ count.style.color = 'green' } else if(counter < 0) { count.style.color = 'red' }