@import './color.css';

.btn-cta, .btn-go-to-region, .btn-go-to-country,
.btn-return, .btn-country-page, .btn-region-page,
.btn-previous, .btn-next, .btn-exit, .btn-quit, .quiznow-choice, .btn-toggle,
.btn-next-question, .btn-return-to-quiznow, .btn-play-again, .btn-edit,
.btn-reset, .btn-submit, .btn-reset-account {
    font-weight: bold;

    border-style: none;
    padding: 18px 32px;
    border-radius: 18px;

    cursor: pointer;

    transition: background-color 0.5s ease, color 0.5s ease, box-shadow 0.2s ease, scale 0.2s ease;
}

.btn-cta, .btn-go-to-region, .btn-go-to-country,
.btn-return, .btn-country-page, .btn-region-page,
.btn-previous, .btn-next, .btn-exit, .btn-quit, .btn-toggle,
.btn-next-question, .btn-return-to-quiznow, .btn-play-again,
.btn-edit, .btn-reset, .btn-submit {
    font-size: 16px;

    background-color: var(--saffron-30);

}

.btn-edit.active {
    background-color: white;

    padding: 14px 28px;
    border: 4px solid var(--saffron-30)
}

.quiznow-choice {
    font-size: 24px;

}

.btn-reset-account {
    background-color: red;
    color: rgb(67, 0, 0);

    font-size: 16px;

    transition: background-color 0.2s ease, color 0.5s ease, box-shadow 0.2s ease, scale 0.2s ease;
}

.btn-cta:hover, .btn-go-to-region:hover, .btn-go-to-country:hover,
.btn-return:hover, .btn-country-page:hover, .btn-region-page:hover,
.btn-previous:hover, .btn-next:hover, .btn-exit:hover, .btn-quit:hover, .btn-toggle:hover,
.btn-next-question:hover, .btn-return-to-quiznow:hover, .btn-play-again:hover,
.btn-edit:hover, .btn-reset:hover, .btn-submit:hover {
    color: white;

    background-color: var(--saffron-50);

    box-shadow: 0px 2px 10px var(--saffron-80);
}

.btn-cta:active, .btn-go-to-region:active, .btn-go-to-country:active,
.btn-return:active, .btn-country-page:active, .btn-region-page:active,
.btn-previous:active, .btn-next:active, .btn-exit:active, .btn-quit:active, .btn-toggle:active,
.btn-next-question:active, .btn-return-to-quiznow:active, .btn-play-again:active,
.btn-edit:active, .btn-reset:active, .btn-submit:active {
    color: white;

    background-color: var(--saffron-40);

    box-shadow: 0px 2px 10px var(--saffron-60);
    
    scale: 0.95;
}

.btn-reset-account:active {
    color: whitesmoke;

    background-color: rgb(140, 0, 0);

    box-shadow: 0px 2px 10px var(--saffron-60);
    
    scale: 0.95;

}

@media screen and (max-width: 800px) {
    .btn-cta, .btn-go-to-region, .btn-go-to-country,
    .btn-return, .btn-country-page, .btn-region-page,
    .btn-previous, .btn-next, .btn-exit, .btn-quit, .quiznow-choice, .btn-toggle,
    .btn-next-question, .btn-return-to-quiznow, .btn-play-again, .btn-edit,
    .btn-reset, .btn-submit, .btn-reset-account{
        padding: 10px 24px;
        border-radius: 12px;

    }

    .btn-cta, .btn-go-to-region, .btn-go-to-country,
    .btn-return, .btn-country-page, .btn-region-page,
    .btn-previous, .btn-next, .btn-exit, .btn-quit, .btn-toggle,
    .btn-next-question, .btn-return-to-quiznow, .btn-play-again,
    .btn-edit, .btn-reset, .btn-submit {
        font-size: 12px;

    }

    .btn-edit.active {
        padding: 6px 20px;
    }
}