html {
    box-sizing: border-box;
}

body {
    margin: 0;
    height: 100vh;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #f4f4f9;
    color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #efedf1;
    
    /* hero background */
    background-color: #DFDBE5;
background-image: url("data:image/svg+xml,%3Csvg width='84' height='48' viewBox='0 0 84 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h12v6H0V0zm28 8h12v6H28V8zm14-8h12v6H42V0zm14 0h12v6H56V0zm0 8h12v6H56V8zM42 8h12v6H42V8zm0 16h12v6H42v-6zm14-8h12v6H56v-6zm14 0h12v6H70v-6zm0-16h12v6H70V0zM28 32h12v6H28v-6zM14 16h12v6H14v-6zM0 24h12v6H0v-6zm0 8h12v6H0v-6zm14 0h12v6H14v-6zm14 8h12v6H28v-6zm-14 0h12v6H14v-6zm28 0h12v6H42v-6zm14-8h12v6H56v-6zm0-8h12v6H56v-6zm14 8h12v6H70v-6zm0 8h12v6H70v-6zM14 24h12v6H14v-6zm14-8h12v6H28v-6zM14 8h12v6H14V8zM0 8h12v6H0V8z' fill='%239C92AC' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
    /* background-image: url(""); */
   background-color: #fbfbfb;
background-image: url("data:image/svg+xml,%3Csvg width='42' height='44' viewBox='0 0 42 44' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Page-1' fill='none' fill-rule='evenodd'%3E%3Cg id='brick-wall' fill='%238d8c8e' fill-opacity='0.4'%3E%3Cpath d='M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}


/* old */
/* .quiz-container {
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    width: 100%;
    max-width: 600px;
    padding: 20px;
    margin: 10px;
    text-align: center;
} */

.quiz-container {
    background-color: rgba(255, 255, 255, 0.45) !important; /* very transparent */
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(18px);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 30px rgba(0,0,0,0.25);
    width: 100%;
    max-width: 600px;
    padding: 20px;
    margin: 10px;
    text-align: center;
}




h2 {
    font-size: 1.2 rem;     
}

/* Timer */
#timer {
    font-size: 1.1rem;
    margin: 10px 0;
}

#time-left {
    font-weight: bold;
    color: #dc3545;
}

/* Quiz Box */
#choices-container {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
}

.choice {
    background-color: #eee;
    border: none;
    padding: 10px 20px;
    margin: 10px;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s;



    border: 2px solid rgb(126, 126, 126);
}

.choice:hover {
    background-color: #ddd; 
}

.choice:disabled {
    cursor: default;
}

.choice.correct {
    background-color: #28a745;
    color: white;
    background-color: #60ab72;
    
    background-color: #106e26;
    border: 2px solid rgb(0, 65, 25);
    opacity: .8;
}

.choice.wrong {
    background-color: #dc3545;
    color: white;
    background-color: #5c0b11;
    background-color: #984d52;

    border: 2px solid rgb(161, 2, 2);
    border: 2px solid #46090d;
}

.btn {
    background-color: #007bf0;
    background-color: #32618d;
    border: 2px solid rgb(39, 47, 76);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 1rem;
    cursor: pointer;
    margin-top: 20px;
    transition: background-color 0.3s;
}

.btn:hover {
    background-color: #0056b3;
}

.btn:disabled {
    background-color: #ccc;
    color: #333;
    cursor: not-allowed;
}


/* HIGH SCORES */
#high-score-container {
    display: flex;
    flex-direction: column;
}

table {
    width: 100%;
    border-collapse: 0;
    border-spacing: 0;  
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-radius: 8px;
    overflow: hidden;
}

td, th {
    padding: 12px;
    border-bottom: 1px solid #e0e0e0;
    text-align: center;
}

th {
    background-color: #007bff;
    background-color: #32618d;
    color: white;
    font-weight: bold;
    text-transform: uppercase;
    border-bottom: 2px solid #0056b3;
    
    border-bottom: 2px solid #013872;
}

td {
    font-size: 0.9rem;
}

.highlight {
    background-color: #80e280;
    background-color: #90cd90;
}