body, html {
    max-width: 100%;
    overflow-x: hidden; /* Prevents horizontal scrolling */
}
h1{
    color: rgb(21, 92, 125);
    text-align: center;
}
h2{
    color: rgb(21, 92, 125);
}
h3{
    color: rgb(21, 92, 125);
    text-align: left;
}
.jspsych-btn:hover {
    background-color: rgb(127, 191, 221); /* Light background on hover */
    color: #2a2a2b; /* Change text color on hover */
    border-color: #66696d; /* Change border color on hover */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional: adds a shadow effect */
}
.jspsych-content {
    padding: 10px;
}

p{
    text-align: left;
}
.jspsych-btn.jspsych-btn{
    display: block;
    text-align: center;
    margin: 0 auto;
}
.jspsych-btn#jspsych-instructions-back{
    margin: auto;
    display: inline-block;
}
.jspsych-btn#jspsych-instructions-next{
    margin: auto;
    display: inline-block;
}
form{
    padding: 20px;
}
img.emoji{
    display: block;
    text-align: center;
    margin: 0 auto;
}
p.jspsych-survey-multi-choice-text{
    color: rgb(21, 92, 125);
}
#start-recording .fa-play {
    color: green;  /* Green color for the Start Recording icon */
}
#stop-recording .fa-stop {
    color: red;  /* Red color for the Stop Recording icon */
}
#rerecord-button .fa-redo {
    color: green;
}

p#thanks{
    text-align: center;
}

p#note{
    text-align: center;
    color:rgb(21, 92, 125);
    font-weight: bold;
}
div#demog_q{
    text-align: left;
}   
video{
    text-align: center;
}