/*
 * Styles for response buttons in jsPsych mouse-tracking task.
 * 
 * - Ensures buttons are circular and centered.
 * - Provides hover and click feedback.
 * - Uses a transition for smoother color changes.
 *
 * Customization:
 * - Modify `background-color` for default/active states.
 * - Adjust `border-radius`, `width`, and `height` for different button shapes.
 * - Change `cursor` to indicate interactivity.
 */

/* Default button appearance */
.response-button {
    transition: background-color 0.1s ease;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    /* border-radius: 50%; */
    line-height: 1.1;
    color: #333;
    align-items: center;
    justify-content: center;
    /* background-color: #fff; */
    border-color: #000000;
}

/* Specific styles for the start button (using its unique ID) */
#trial_start_button {
    position: absolute; /* Enables absolute positioning */
    top: 50%; /* Positions top of button at 50% of the screen height */
    left: 50%; /* Positions left of button at 50% of the screen width */
    transform: translate(-50%, -50%); /* Offsets the button to be truly centered */
    width: 40px; /* Set width for the start button */
    height: 40px; /* Set height for the start button */
    font-size: 25px; /* Adjust text size */
    /* display: flex; */
    align-items: center;
    justify-content: center;
}

/* Button animation when pressed */
.response-button:active {
    /* background-color: rgb(245, 0, 0); */
    background-color: #ddd;
    border-color: #000000;
}