body{
font-family:Arial;
text-align:center;
margin:0;
height:100vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;

background:radial-gradient(circle at center,#001a12,#000000);
color:#9affc9;
}

/* top buttons */

.top{
position:absolute;
top:25px;
display:flex;
gap:12px;
}

.top button,select{
padding:10px 18px;
border-radius:30px;
border:1px solid #00ff9c;
background:#021d15;
color:#9affc9;
cursor:pointer;

box-shadow:
0 0 10px #00ff9c55,
inset 0 0 10px #00ff9c22;
}

.top button:hover{
box-shadow:
0 0 15px #00ff9c,
inset 0 0 12px #00ff9c;
}

/* counter */

#counter{
font-size:110px;
margin-bottom:50px;
text-shadow:
0 0 10px #00ff9c,
0 0 30px #00ff9c;
}

/* buttons */

.buttons{
display:flex;
flex-direction:column;
align-items:center;
gap:25px;
}

/* big button */

#addBtn{
width:240px;
height:240px;
border-radius:50%;
border:none;
font-size:70px;
cursor:pointer;

background:radial-gradient(circle,#00ff9c,#003b2b);

box-shadow:
0 0 25px #00ff9c,
0 0 60px #00ff9c55;

animation:pulse 2.5s infinite;
}

#addBtn:hover{
transform:scale(1.05);
}

/* small button */

#minusBtn{
width:90px;
height:90px;
border-radius:50%;
border:none;
font-size:30px;
cursor:pointer;

background:radial-gradient(circle,#007a55,#002d22);

box-shadow:
0 0 15px #00ff9c66;
}

/* neon pulse */

@keyframes pulse{

0%{
box-shadow:
0 0 20px #00ff9c,
0 0 50px #00ff9c44;
}

50%{
box-shadow:
0 0 40px #00ff9c,
0 0 80px #00ff9c88;
}

100%{
box-shadow:
0 0 20px #00ff9c,
0 0 50px #00ff9c44;
}

}

/* footer */

.footer{
position:absolute;
bottom:20px;
}

.footer a{
color:#00ff9c;
text-decoration:none;
font-size:14px;
}

.footer a:hover{
text-shadow:0 0 10px #00ff9c;
}

/* light mode */

.light{
background:#eafff4;
color:#004d36;
}

.light #counter{
text-shadow:none;
}

.light .top button,
.light select{
background:#c9ffe6;
color:#004d36;
}

.light #addBtn{
background:radial-gradient(circle,#55ffb3,#00a66a);
}

.light #minusBtn{
background:#aaffd8;
}