:root {
    --yellow-bg-color: #ffffc0;
    --light-green-bg-color: rgba(15,252,0,0.3);
    --dark-green-bg-color: rgba(125, 193, 99, 1);
}


li {
    list-style: none;
}

button {
    cursor: pointer;
    border-radius: var(--border-radius-btn);
    padding: 0.8rem 1rem;
    min-width: 5rem;
    border: solid 1px black;
    font-size: medium;
    margin-bottom: 0.3rem;
}

#wrapper {
    max-width: 450px;
}

#page1 menu li,
#page2 menu li, 
#page4 menu li, 
#page5 menu li {
    background-color: var(--yellow-bg-color);
    cursor: pointer;
}

#page6 h2,
#page7 h2,
#page8 h2,
#page9 h2,
#page10 h2 {
    cursor: pointer;
    font-weight:  bold;
    border-radius: var(--border-radius-btn);
    padding: 0.8rem 1rem;
    min-width: 5rem;
    min-height: 3.8rem;
    margin-bottom: 0.3rem;
}

#page6 p,
#page7 p,
#page8 p,
#page9 p,
#page10 p {
    padding: 0rem 1rem;
    min-width: 5rem;
    margin-bottom: 0.3rem;
}


.userChoiceOne,
.userChoiceTwo {
    background-color: var(--light-green-bg-color);
}
.userChoiceThree {
    background-color: var(--dark-green-bg-color);
}

menu > li,
.section-title {
    border-radius: var(--border-radius);
    padding: 0.8rem 1.2rem;
    min-height: 3.8rem;
    margin: 0.2rem 0;
}

.black-bg {
    background-color: black;
    color: white;
}

.red-bg {
    background-color: red;
}


.active {
    background-color: var(--active-button-color);
    animation: active 3.5s infinite ease-in;
}

.space-between {
    display: flex;
    justify-content: space-between;
}