body {
    font-family: Arial, sans-serif;
    text-align: left;
    margin: 0;
    padding: 20px;
    background-color: rgba(0,0,0,0);
    color: white;
}

.counter-box {
    display: inline-block;
    background-color: rgba(0,0,0,0.658);
    border-radius: 20px;
    padding: 20px 40px;
    margin-bottom: 10px;
    text-align: left;
}

.boutons-box {
    display: block;
    width: max-content;
    padding: 20px 40px;
    background-color: rgba(0,0,0,0.658);
    border-radius: 20px;
    margin-top: 10px;
}

button {
    font-size: 32px;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 10px;
    border: none;
    color: white;
    transition: background-color 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.plus-one-anim {
    position: absolute;
    transform: translate(-50%, -50%) scale(1);
    font-size: 48px;
    color: #00ff00;
    font-weight: bold;
    pointer-events: none;
    animation: plusOne 0.6s ease-out forwards;
    z-index: 99999;
}

@keyframes plusOne {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -120%) scale(2.3);
    }
}


button.reset { background-color: rgba(216,29,29,0.7); }
button.reset:hover { background-color: rgba(247,76,85,0.6); }

button.less { background-color: rgba(243,140,6,0.7); }
button.less:hover { background-color: rgba(248,167,73,0.6); }

button.more { background-color: rgba(13,243,13,0.7); }
button.more:hover { background-color: rgba(0,255,0,0.6); }

button i { font-size: 32px; margin: 0; }