CSS:

• { margin: 0; padding: 0; box-sizing: border-box; }

body {
font-family: "Lato", sans-serif;
background-image: linear-gradient(to left, #d89537, #4e944f);
}

.container {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.Counter {
background-image: linear-gradient(to left, #b4e197, #4e944f);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 500px;
width: 700px;
border: #b21010 solid 3px;
}

h1 {
background-image: linear-gradient(to right, #02abff, #9041da);
color: #fff;
margin-top: 50px;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

p {
font-weight: 400px;
font-size: 20px;
margin-top: 30px;
color: beige;
}

p span {
color: orange;
font-size: 30px;
}
.Buttons {
margin-top: 20px;
display: flex;
flex-direction: row;
gap: 20px;
}

triggerButton {

color: #ca7002;
height: 40px;
width: 75px;
}

triggerbtn {

color: #ca7002;
height: 40px;
width: 75px;
}

JavaScript:
window.addEventListener("load", () => {
const counter = document.querySelector("#counter");
const triggerButton = document.querySelector("#triggerButton");
const triggerBtn = document.querySelector("#triggerbtn");

triggerButton.addEventListener("click", () => {
counter.textContent = parseInt(counter.textContent) + 1;
});
triggerBtn.addEventListener("click", () => {
counter.textContent = parseInt(counter.textContent) - 1;
});
});