body {
    font-family: sans-serif;
    background: #f4f4f4;
    padding: 20px;
    align-items: center;
    text-align: center;
}

#quiz {
    max-width: 600px;
    margin: auto;
    background: white;
    padding: 20px;
    border-radius: 10px;
}

.question {
    font-size: 18px;
    text-align: center;
    margin-bottom: 15px;
}

.answers button {
    width: 100%;
    margin: 5px 0;
    padding: 12px;
    font-size: 16px;
    cursor: pointer;
    background: #833bf6;
    color: #e3f63b;
    border: none;
    border-radius: 15px;
}

.answers button:hover {
    transition-duration: 0.1s;
    background: #e3f63b;
    color: #833bf6;
    border-radius: 20px;
}

.answers button:active {
    transition-duration: 0.1s;
    background: #fffb00;
    color: #8000ff;
}

.result {
    text-align: center;
    margin-top: 30px;
}

.result button {
    margin-top: 20px;
}

.button{
    padding: 10px 10px;
    border-radius: 10px;
    border: none;
    background: #8000ff;
    color: #e3f63b;
}
.button:hover{
    border-radius: 15px;
    background: #6a00ff;
}
.button:active{
    transform: scale(1.1);
    border-radius: 20px;
    background: #4000ff;
}
.buy_coffee:hover{
    transition-duration: 0.1s;
    border-radius: 20px;
    transform: scale(1.1);
}
.buy_coffee:active{
    border-radius: 15px;
    transform: scale(115%);
}