.altSelect, .ssdd {
    color: black;
    font-family: Arial, Verdana, sans-serif;
}

input {
    padding: 4px;
    font-size: 16px;
    font-weight: 400;
    font-style: normal;
    /*background-color: white;*/
}

input[readonly] {
    background-color: #bbb; /* Light gray background */
}

.dnone {
    display: none !important;
}

.iblock {
    display: inline-block !important;
}

.fleft {
    float: left;
}
.fright {
    float: right;
}

.taright {
    text-align: right;
}

.monofont {
    font-family: monospace;
}

.br {
    border: 1px solid red
}

.mv20 {
    margin-top: 20px;
    margin-bottom: 20px;
}

.mv50 {
    margin-top: 50px;
    margin-bottom: 50px;
}

.mr20 {
    margin-right: 20px;
}
.ml20 {
    margin-left: 20px;
}
.mb20 {
    margin-bottom: 20px;
}

.taleft {
    text-align: left;
}

ul.unbullet {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
ul.unbullet li {
    padding: 0;
    margin: 0;
}

.vtable th {
    text-align: left;
}
.vatop {
    vertical-align: top;
}

input.ff400, textarea.ff400 {
    width: 400px;
}

input.ff600, textarea.ff600 {
    width: 600px;
    /*max-width: 90%;*/
}

label.ff {
    display: block;
    text-align: left;
    margin-bottom: 10px;
}

div.ff {
    text-align: left;
    margin-bottom: 10px;
}

label.flabel {
    display: block;
    margin-bottom: 15px;
}
label.flabel input {
    margin-top: 2px;
}

/*@keyframes subtleGradientShift {*/
/*    0% {*/
/*        background-position: 50% 100%;*/
/*    }*/
/*    100% {*/
/*        background-position: 50% 0%;*/
/*    }*/
/*}*/
/*h1 {*/
/*    font-size: 48px;*/
/*    font-weight: bold;*/
/*    background: linear-gradient(to bottom, #FFFACD, #FFD700); !* Slightly different brighter gradient *!*/
/*    -webkit-background-clip: text;*/
/*    -webkit-text-fill-color: transparent;*/
/*    background-clip: text;*/
/*    text-fill-color: transparent;*/
/*    text-shadow:*/
/*            1px 1px 2px rgba(0, 0, 0, 0.15), !* Very soft shadow *!*/
/*            0 0 4px #FFE0B2, !* Subtle inner glow *!*/
/*            0 0 8px #FFD700; !* Outer glow *!*/
/*    animation: subtleGradientShift 15s infinite alternate linear;*/
/*    background-size: 110% 110%; !* Very small background size increase *!*/
/*}*/


/*h1 {*/
/*    font-size: 48px;*/
/*    font-weight: bold;*/
/*    color: #FFD700; !* Use a flat gold color as the base *!*/
/*    text-shadow:*/
/*            1px 1px 2px rgba(0, 0, 0, 0.3), !* Subtle shadow for depth *!*/
/*            0 0 5px #FFECB3; !* Soft highlight for shine *!*/
/*}*/


.dataTable {
    border-collapse: collapse;
    border-spacing: 0;
    border: 1px solid #e7c100;
    margin: 20px 0;
}

.dataTable td, .dataTable th{
    border: 1px solid #e7c100;
    padding: 8px;
}

.button.ask {
    padding: 10px;
    font-size: 18px;
}

.button.ask {
    user-drag: none;
    user-select: none;
    -webkit-user-drag: none;
    -moz-user-select: none;
    -moz-user-drag: none;
}
.button.ask img {
    user-drag: none;
    user-select: none;
    -webkit-user-drag: none;
    -moz-user-select: none;
    -moz-user-drag: none;
}

.button.ask:active {
    transform: scale(0.98); /* Adds a subtle press effect */
}
.button.ask.disabled:active {
    transform: none !important; /* Adds a subtle press effect */
}


button.ask {
    font-size: 18px;
    padding:0;
    background: none;
    border: none
}
button.ask {
    user-drag: none; /* Prevents image dragging */
    -webkit-user-drag: none;
}

button.ask:active {
    transform: scale(0.98); /* Adds a subtle press effect */
}

button.ask.disabled {
    filter: grayscale(1);
}

button.ask.disabled:active {
    transform: none !important;
}


input.button.ask {
    padding: 0;
}
input.button.ask {
    user-select: none;
    -webkit-user-drag: none;
    -moz-user-select: none;
}

input.button.ask:active {
    transform: scale(0.98); /* Adds a subtle press effect */
}

input.button.ask.disabled {
    filter: grayscale(1);
}

input.button.ask.disabled:active {
    transform: none !important;
}


.questionPrompt {
    width: 90%;
    max-width: 500px;
    height: 80px;
    margin: 20px;
}

.button {
    display: inline-block;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    font-family: sans-serif; /* Or your preferred font */
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease; /* Smooth transition */
}
.button.def {
    background-color: #007bff; /* Example blue color */
    color: white;
    border: 1px solid #004181;
}

.button.def:hover {
    background-color: #0056b3; /* Darker blue on hover */
}


.button.def:active {
    background-color: #004085; /* Even darker on click */
    transform: translateY(2px); /* Slight downward movement on click */
}

/**  in the animation screen while waiting for answer  **/
.questionPrompt {
    font-family: "EB Garamond", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-size: 20px;

    background: #ffe890;
    background: url("/img/paper1a.jpg");
    background-size: cover; /* Cover the entire box while maintaining aspect ratio */
    background-position: center; /* Center the image */
    filter: brightness(150%) blur(0.4px);
    padding:8px;
}
.questionPrompt::placeholder {
    color: #0a0a0a; /* Replace with your desired color */
    opacity: 0.5; /* Optional: some browsers might have a default opacity */
}

/* Question List */
.questionList {
    width: 90%;
    max-width: 800px;
    margin: 20px auto;
    border-collapse: collapse;
}
.questionList td, .questionList th {
    border: 1px solid #ddd;
    padding: 8px;
}

/*----------- asking page animation -----------*/

.asking-container {
    text-align: center;
    width: 450px;
    margin: 0 auto;
}

/*----------- answer page -----------*/

.questionPrompt {
    width: 90%;max-width: 400px; height: 100px;
    margin: 20px;
}
.button.ask {
    padding: 10px;
    font-size: 18px;
}
.question {
    font-family: "EB Garamond", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;

    padding: 0 10px;
    border: 1px solid gold;
    background: #ccab00;
    background: url("/img/paper1a.jpg");
    background-size: cover; /* Cover the entire box while maintaining aspect ratio */
    background-position: center; /* Center the image */
    filter: brightness(150%) blur(0.4px);
    color: black;
    border-radius: 3px;
    max-width: 600px;
    margin: 10px auto;
    font-size: 22px;
    text-align: left;
}
.question p {
    text-indent: 20px;
    margin: 10px 0;
}
.answer {
    font-family: "EB Garamond", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;

    position: relative;
    border: 2px solid #c2a400;
    border-top-color: #ffd700;
    border-left-color: #ffd700;
    max-width: 600px;
    margin: 0 auto;
    color: black;
    font-size: 24px;
    background: #ffedaa;
    filter: blur(0.4px);
    border-radius: 6px;
}
/*.answer div {*/
/*    opacity: 0.5;*/
/*    background: url("/img/parchment.jpg");*/
/*    padding: 10px;*/
/*}*/
.answer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("/img/paper1.jpg") no-repeat;
    background-size: cover; /* Cover the entire box while maintaining aspect ratio */
    background-position: center; /* Center the image */
    opacity: 0.9; /* Change only background opacity */
    pointer-events: none; /* Avoid interfering with clicks */
    filter: brightness(130%);
    z-index: 10;
}
.answer div {
    position: relative;
    z-index: 20;
    padding: 10px;
    text-align: left;
    text-indent: 30px;
}
.buttons {
    margin: 20px 0;
}

.ask-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff; /* Example blue color */
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-family: sans-serif; /* Or your preferred font */
    font-size: 16px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease; /* Smooth transition */
}

.ask-button:hover {
    background-color: #0056b3; /* Darker blue on hover */
}

.ask-button:active {
    background-color: #004085; /* Even darker on click */
    transform: translateY(2px); /* Slight downward movement on click */
}

.infobox {
    background: #28282a;
    border-radius: 8px;
    border: 1px solid #3f4249;
    box-sizing: border-box;
    padding: 12px;
    display: inline-block;
}
.infobox .item {
    margin: 5px;
    padding: 10px;
    border-bottom: 1px solid #3f4249;

    display: flex;
    justify-content: space-between;
}
.infobox .item:hover {
    background: #303033;
    transition: background 0.2s ease; /* Add a smooth transition for the effect */
}
.infobox .key, .infobox .value {
    display: inline-block;
}
.infobox .key {
    margin-right: 20px;
}