styling.css

body {
    background-color: rgb(25, 23, 25);
    font-family: "Roboto", Calibri, "Trebuchet MS", sans-serif;
    font-size: 21px;
    color: rgb(249, 240, 255);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
h3 {
    min-width: 28px;
    font-size: 28px;
}
h2 {
    min-width: 35px;
}
h1 {
    min-width: 48px;
}
span {
    font-size: 21px;
    margin-top: 10px;
}
button {
    font-size: 21px;
}
.big-box {
    width: 60%;
    margin: 0px auto;
}
.fixed-box {
    margin: 0;
    position: absolute; /* Position the container element absolutely */
    top: 50%; /* Move the container element down by 50% of its height */
    left: 50%; /* Move the container element right by 50% of its width */
    transform: translate(
        -50%,
        -50%
    ); /* Translate the container element up by 50% of its height and left by 50% of its width */
}
#full-screen-img {
    display: none;
    position: relative;
    margin: 0 auto;
    width: 30%;
}
#display-img {
    display: none;
    position: relative;
    margin: 0 auto;
}

#instr-text {
    position: relative;
    width: 100%;
    margin: 25px auto;
    text-align: center;
}

#mock-rating {
    position: relative;
    display: none;
    justify-content: center;
    align-items: center;
    /*border: 2px dashed #000;*/
    width: 100%;
    margin: 60px auto;
}

#mock-rating .rating-button {
    cursor: default;
}
.my-buttons {
    display: block;
    position: relative;
    margin: 25px auto;
    width: 200px;
    height: 50px;
    line-height: 35px;
    text-align: center;
    border-radius: 10px;
    background: #5d5663;
    color: rgb(249, 240, 255);
    cursor: pointer;
    border-width: 0;
}

.my-buttons:hover {
    background-color: #988f9c;
}

.choices {
    display: block;
    position: relative;
    margin: 10px auto;
    padding: 7px;
    width: 80%;
    border-radius: 8px;
    background: rgb(134, 107, 145);
    cursor: pointer;
}

#consent-box {
    display: none;
    background-color: rgba(143, 134, 160, 0.618);
    width: 100%;
    height: 300px;
    overflow: auto;
    border: 2px dashed black;
    margin: 25px auto;
}

#testing-area {
    /*thanks ChatGPT*/
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 300px;
    margin: 10px auto;
    margin-bottom: 30px;
}

#trial-prompt {
    color: rgb(183, 183, 183);
    margin-top: 10px;
}

#prompt-adj {
    color: white;
    font-size: larger;
}
.rating-button {
    display: inline-block;
    position: relative;
    margin: 10px 5px auto;
    width: 70px;
    height: 70px;
    line-height: 35px;
    text-align: center;
    border-radius: 10px;
    background: #775388;
    color: rgb(249, 240, 255);
    cursor: pointer;
    border-width: 0;
}

.rating-button[value="1"] {
    background: #7c7b7c;
    margin-left: 30px;
}
.rating-button[value="2"] {
    background: #727173;
}
.rating-button[value="3"] {
    background: #6b6a6b;
}
.rating-button[value="4"] {
    background: #5f5e5f;
}
.rating-button[value="5"] {
    background: #494848;
}
.rating-button[value="6"] {
    background: #424141;
}
.rating-button[value="7"] {
    background: #343333;
    margin-right: 30px;
}

#rating-area .rating-button:hover {
    border-color: white;
    border-width: 3px;
    border-style: solid;
}

#task-img {
    /* how to make all images the same dimension?*/
    display: inline-block;
    max-width: 100%;
    max-height: 300px;
}
#buffer-img {
    display: none;
}

#task-box {
    display: none;
    text-align: center;
    height: 70%;
}

#rating-area {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 20px auto;
}

#progress {
    text-align: center;
    font-size: 25px;
    color: rgb(183, 183, 183);
}

#progress span {
    font-size: 25px;
}

#progress-text {
    margin-bottom: 10px;
}

#question-box {
    position: relative;
    text-align: left;
    display: none;
    height: 100%;
    margin-top: 75px;
}

#question-box label {
    font-size: 24px;
}
.option {
    display: block;
    background-color: #343236;
    padding: 8px;
    border-radius: 5px;
    margin: 10px 0px;
}

.option:hover {
    background-color: rgb(98, 92, 104);
    cursor: pointer;
}

#question-box input[name="age"] {
    margin: 0px 0px 0px 5px;
}

.question h3 {
    margin-bottom: 10px;
}
#problems {
    width: 100%;
    height: 100px;
    font-size: 21px;
}
.small-dim {
    font-size: 21px;
    color: rgb(158, 158, 158);
    margin-top: 0px;
    margin-bottom: 20px;
}

.small-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 100%;
}
label[for="age"] {
    position: relative;
    margin: auto 10px auto 0px;
}
input[name="age"] {
    height: 35px;
    width: 10%;
    font-size: 21px;
}
.warning {
    color: rgb(246, 80, 80);
    display: none;
    margin: 15px 0px 0px auto;
}

#congrats-mess {
    width: 1000px;
    margin: auto;
    text-align: center;
}

#debrief-box {
    position: relative;
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    width: 100%;
    margin-top: 100px;
}

.divider {
    height: 1px;
    margin: 0 auto;
    width: 70%;
    background-color: rgb(77, 76, 76);
}
#exp-box {
    width: 70%;
    margin: 0 auto;
    text-align: left;
}

#exp-box p {
    margin: 5px auto;
    font-size: 28px;
}

#ending-shortcut {
    position: relative;
}