@media only screen and (max-width: 956px) {
    .trivia-box {
        align-items: center;
        flex-direction: column;
    }

    .trivia-box .trivia-content{
        width: 100% !important;
        flex: 100% !important;
    
    }    

    .trivia-box .trivia-img{
        width: 100% !important;
        flex: 100% !important;
    }
    
    .trivia-box .trivia-scoreboard{
        position: relative !important;
        transform: translateY(0px) !important;
        background: transparent !important;
        padding: 0px !important;       
    }
}

.trivia-box {
    background:  linear-gradient(to bottom, #ededed19, #ededed62) !important;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    width: 100%;
    padding: 20px;
    text-align: center;
    color: #ededed;
    display: flex;
}

.trivia-box .trivia-scoreboard{    
    position: absolute;
    font-weight: 700;
    display: flex;
    gap: 15px;
    transform: translateY(-55px);
    background: #292929;
    padding: 5px 10px 5px 10px;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.trivia-box .trivia-scoreboard .trivia-played{

}
.trivia-box .trivia-scoreboard .trivia-correct{
    color: #00afff;
}
.trivia-box .trivia-scoreboard .trivia-incorrect{
    color: #fd0000;
}

.trivia-box .trivia-content{
    width: 60%;
    flex: 60%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0px 10px;
}

.trivia-box .trivia-img{
    width: 40%;
    flex: 40%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.trivia-box .trivia-img img {
    max-width: 400px;
    height: auto;
    border-radius: 8px;
}

.trivia-question {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 20px;
    width: 100%;
}

.trivia-options {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.modal-validate{
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 99999999;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    backdrop-filter: blur(10px);
    transition: .3s;
    opacity: 0;
}
.modal-validate::before{
    content: ' ';
    width: 100%;
    height: 100vh;
    backdrop-filter: blur(10px);
    position: fixed;
    top: 0px;
    left: 0px;
}

.modal-validate.show{
    opacity: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1 !important;
    pointer-events: initial !important;
    z-index: 999999 !important;
}

.modal-validate.fade{
    opacity: 0;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: -9999 !important;
}

.modal-validate img{
    transition: 1s;
    width: 100% !important;
    max-width: 400px !important;
}
.modal-validate img.fade {
    transform: scale(0) !important;
    position: absolute;
}
.modal-validate img.show {
    position: relative;
    transform: scale(1) rotate(10deg);
}
@keyframes opacityModal {
    0% {
        opacity: 1;
    }
    25% {
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    75% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        pointer-events: none;
        z-index: -9999;
    }
}