.titlesection {font-size: 25px;}
.score {font-size: 20px; color: #000000; text-align: center; font-weight: bold;}
.questionblock {font-size: 26px; color: #FF9900; font-weight: bold; margin-left: 100px;}
.instructions {font-size: 20px; color: #FF9900; font-weight: bold; margin-left: 50px;}
.spantrans {font-size: 13px; color: #000000; font-weight: bold;}
.textblock {width: 900px; margin: 0 auto; border-style: solid; border-width: 2px; text-align: left; padding-left: 15px; padding-right: 10px; border-radius: 10px;}

.functionButton {
    background: #ffffff;
    color: #000000; 
    vertical-align: super;
    font-size: 12px;
    font-weight: bold;
    padding: 10px 18px;
    margin: 5px;
    border: none;
    border-radius: 8px;
    cursor: pointer;

    /* Shadow */
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);

    /* Smooth animation */
    transition: all 0.15s ease;
}

.checkAnswerButton {
    background: #ffa64d;
    color: #000000; 
    vertical-align: super;
    font-size: 18px;
    font-weight: bold;
    padding: 10px 18px;
    margin: 5px;
    border: none;
    border-radius: 8px;
    cursor: pointer;

    /* Shadow */
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);

    /* Smooth animation */
    transition: all 0.15s ease;
}

.checkAnswerButton:hover {
    background: #ff9900;
    box-shadow: 0 6px 12px rgba(0,0,0,0.4);
}

.checkAnswerButton:active {
    transform: translateY(2px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.optionButton {
    background: #cccccc;
    color: #000000; 
    vertical-align: super;
    font-size: 16px;
    font-weight: bold;
    padding: 6px 12px;
    margin: 5px;
    border: none;
    border-radius: 8px;
    cursor: pointer;

    /* Shadow */
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);

    /* Smooth animation */
    transition: all 0.15s ease;
}

.optionButton:hover {
    background: #999999;
    box-shadow: 0 6px 12px rgba(0,0,0,0.4);
}

.optionButton:active {
    transform: translateY(2px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}


.startAgain {
    background: #66ff66;
    color: #000000; 
    vertical-align: super;
    font-size: 18px;
    font-weight: bold;
    padding: 10px 18px;
    margin: 5px;
    border: none;
    border-radius: 8px;
    cursor: pointer;

    /* Shadow */
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);

    /* Smooth animation */
    transition: all 0.15s ease;
}

.startAgain:hover {
    background: #00cc00;
    box-shadow: 0 6px 12px rgba(0,0,0,0.4);
}

.startAgain:active {
    transform: translateY(2px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}