@media (prefers-color-scheme: dark) {

@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,slnt,wdth,wght,GRAD,ROND@6..144,-10..0,25..151,1..1000,0..100,0..100&display=swap');

html, body {
    background-color: #0d0a1f;
    color: #fff;
}

.contentbox {
    background-color: #232132;
        border: 1px solid #100e22;

}

.card {
    border: 1px solid #100e22;
    background-color: #232132;
}

#image {
    border: 1px solid #413c76;
}

#buttons-container button {
    border: 1px solid #656172;
    background-color: #3f3d4b;
    color: #fff;
}

#next-btn, #restart-btn {
    border:2px solid #833AB4;
    border-bottom: 5px solid #833AB4;
    color: #fff;
    background-color: #9964bd;

}

#buttons-container button:hover {
    background-color: #444444;
}

.succesbar {
    background-color: #4a4a4a;
}

#successtatus {
    background: #833AB4;
    background: linear-gradient(90deg,rgba(131, 58, 180, 1) 0%, rgba(252, 69, 69, 1) 100%);
}

#score-display {
    background-image:linear-gradient(-90deg,#833ab4,#fb4545);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
   
}

small {
    color: #d6d6d6;
}

.union {
    background-color: #686868 !important;
    border-color: #3b3b3b !important;
}
.union:hover {
    background-color: #3b3b3b !important;
}



}