body {
    text-align: center;
    /*background-image: linear-gradient(to right, #77a1d3, #79cbca, #e684ae);*/
    background-image: url("https://www.shortsattack.com/wp-content/uploads/2022/02/astoria.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    padding-inline: 15%;
}

#quiz-container .question {
    border: 0.2rem solid #fff;;
    box-shadow: 0 0 1px #981616, 0 0 2px #981616, 0 0 6px #981616, 0 0 12px #981616, inset 0 0 1px #981616, inset 0 0 2px #981616, inset 0 0 6px #981616, inset 0 0 12px #981616;
    border-radius: 25px;
    background-color: whitesmoke;
    border-color: rgb(191, 96, 191);
    margin: 30px;
    font-family: monospace;
    font-size: 10mm;
    
    
}
#options-container button {
    display: block;
    width: 50%;
    font-family: monospace;
    border: 0.2rem solid #fff;
    padding: 0.4em;
    font-size: 9mm;
    border-radius: 15px;
    box-shadow: 0 0 1px #981616, 0 0 2px #981616, 0 0 6px #981616, 0 0 12px #981616, inset 0 0 1px #981616, inset 0 0 2px #981616, inset 0 0 6px #981616, inset 0 0 12px #981616;
    background-color: whitesmoke;
    margin: auto;
    margin-bottom: 10px;
    border-color: rgb(191, 96, 191);
    
    &.right-answer { 
        border: solid;
        border-color: rgb(88, 230, 88);
        background-color: rgb(137, 198, 137);
    }
    &.wrong-answer {
        border: solid;
        border-color: rgb(246, 52, 52);
        background-color: rgb(226, 82, 82);
    }

}
#options-container button:hover {
    transform: scale(1.1);
}
#next-button, #replay-button {
    position: fixed;
    bottom: 200px;
    right: 160px;
    float: right;
    background-color: whitesmoke;
    border: 0.2rem solid #fff;
    font-size: 6mm;
    margin-top: 60px;
    font-family: monospace;
    border-radius: 15px;
    box-shadow: 0 0 1px #981616, 0 0 2px #981616, 0 0 6px #981616, 0 0 12px #981616, inset 0 0 1px #981616, inset 0 0 2px #981616, inset 0 0 6px #981616, inset 0 0 12px #981616;
    border-color: rgb(191, 96, 191);
    &.disabled {
        pointer-events: none;
        opacity: 0.5;
    }    
    
}
#next-button:hover {
    transform: scale(1.3);
}
#next-button:disabled {
    cursor: not-allowed;
}

#progressBar {
    margin: auto;
    position: fixed;
    bottom: 90px;
    left: 370px;
    width: 50%;
    height: 2rem;
    box-shadow: 0 0 1px #981616, 0 0 2px #981616, 0 0 6px #981616, 0 0 12px #981616, inset 0 0 1px #981616, inset 0 0 2px #981616, inset 0 0 6px #981616, inset 0 0 12px #981616;
    border-radius: 15px;
    border: 0.2rem solid rgb(191, 96, 191);
    margin-top:  150px;
    background-color: whitesmoke;
}

#progressBarFull {
    height: 2rem;
    background-color: rgb(191, 96, 191);
    width: 0%;
    box-shadow: 0 0 1px #981616, 0 0 2px #981616, 0 0 6px #981616, 0 0 12px #981616, inset 0 0 1px #981616, inset 0 0 2px #981616, inset 0 0 6px #981616, inset 0 0 12px #981616;
    border-radius: 15px;
    transition: all ease-in-out 0.5s;
}

#timer {
    position: fixed;
    top: 10px;
    right: 50px;
    font-family: monospace;
    font-size: 100px;
    border: dashed black 0.3rem;
    text-align: center;
    background-color: rgba(245, 245, 245, 0.548);
    box-shadow: 0 0 1px #981616, 0 0 2px #981616, 0 0 6px #981616, 0 0 12px #981616, inset 0 0 1px #981616, inset 0 0 2px #981616, inset 0 0 6px #981616, inset 0 0 12px #981616;
    margin-top: 10px;
    margin-right: 30px;
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 5s linear infinite;
    &.warning {
        color: rgba(209, 4, 4, 0.767);
        border: dashed rgba(209, 4, 4, 0.767) 0.3rem;
        transform:scale (1,3);
    }
}
@keyframes spin{
    from{
        transform: rotate(0deg) ;
    }
    to{
        transform: rotate(360deg);
    }
}
#afficherScore {
        position: fixed;
        top: 10px;
        left: 80px;
        font-family: monospace;
        font-size: 100px;
        text-align: center;
        background-color: rgba(245, 245, 245, 0.548);
        border: 0.2rem solid rgb(191, 96, 191);
        box-shadow: 0 0 1px #981616, 0 0 2px #981616, 0 0 6px #981616, 0 0 12px #981616, inset 0 0 1px #981616, inset 0 0 2px #981616, inset 0 0 6px #981616, inset 0 0 12px #981616;
        margin-top: 10px;
        margin-right: 30px;
        border-radius: 50%;
        width: 120px;
        height: 120px;
    }

.lien {
    position : fixed;
    bottom : 20px;
    right: 60px;
    color: white;
    &.lien ul {
        list-style-type: none;  
        display: flex;
        justify-content: center;
        padding: 0;
    }
}
a {
    color: black;
    margin-bottom: 20px;
    text-decoration: none;
    
}
.link {
    margin-right: 20px;
    background-color: rgba(245, 245, 245, 0.74);
    border: 0.2rem solid #fff;;
    box-shadow: 0 0 1px #981616, 0 0 2px #981616, 0 0 6px #981616, 0 0 12px #981616, inset 0 0 1px #981616, inset 0 0 2px #981616, inset 0 0 6px #981616, inset 0 0 12px #981616;
    border-radius: 10px;
    font-family: monospace;
    font-size: 4mm;
    padding-left: 4px;
    padding-right: 4px;
}
li:hover {
    transform: scale(1,1.5);
}