body {
    font-family: 'Segoe UI', sans-serif;
    background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('images/fstudent1.jpg');
    background-color: #f8f9fa;
    background-repeat: none;
    padding: 30px;
    text-align: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.question{
     font-size: clamp(1.5rem, 2vw, 2rem); 
     width: 700px; 
     max-width: 95%; 
     margin: 2px auto 1rem auto; 
     margin-top: 1rem;
     text-align: center; 
     min-height: 3rem; 
     line-height: 1.2; 
     word-break: keep-all;
     white-space: normal;  
}

.options button {
    height: clamp(3rem, 2vh, 2rem);
    display: block;
    margin: 0.5rem auto;
    padding: 0.6rem 0.8rem;  /*t/b */
    font-size: clamp(0.2rem, 2vw, 1.7rem);
    width: clamp(20rem, 40vw, 20rem);
    border-radius: 6px;

}

.button-bar button {
    margin-top: 1.5rem; 
    padding: 0.6rem 1.2rem;   
    font-size: clamp(1.2rem, 4vw, 2rem);
    width: 500rem; 
    border-radius: 8px; 
    border: 4px solid #999;
    color: black; 
    background-color: #c1c1c1;
}

.small_button{
    margin-top: 6rem; 
    padding: 0.6rem 1rem;   
    font-size: clamp(1rem, 4vw, 1rem);
    width: 10rem; 
    border-radius: 8px; 
    border: 4px solid #999;
    border-color: dark grey;
    color: black; 
    background-color: #c1c1c1;
}

.header1{
    font-size: clamp(2rem, 2vw, 3rem); 
    font-weight: bold; 
    margin-top: clamp(.8rem, 4vh, 1rem);}
    
.header2{
    font-size: clamp(1rem, 2vw, 2rem);  
    font-weight: bold; margin-top: 0.6rem;}


#feedback { font-weight: bold; margin-top: 1rem; font-size: clamp(1rem, 2vw, 2rem);}