@import "tailwindcss";

@layer components {
    html {
        background-color: rgb(230, 230, 230);
    }

    .btn {
        border: 1px solid black;
        border-radius: 5px;
        padding: 4px;
        cursor: pointer;
        height: fit-content;
    }

    .btn:hover {
        background-color: rgba(0, 0, 0, 0.1);
    }

    .btn:disabled {
        color: grey !important;
        border-color: gray !important;
        cursor: unset !important;
    }

    .btn:disabled:hover {
        background-color: unset !important;
        cursor: unset !important;
    }

    .inputField {
        padding: 8px;
    }

    .card {
        border: 1px solid black;
        border-radius: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: larger;
        font-weight: bold;
        cursor: pointer;
    }

    .card:hover {
        background-color: rgba(0, 0, 0, 0.1);
    }

    .choiceCard {
        border: 1px solid black;
        border-radius: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        height: fit-content;
        padding: 32px;
        /* font-size: larger;
        font-weight: bold;
        cursor: pointer; */
    }

    .choice-answer {
        background-color: rgb(87, 255, 87);
        box-shadow: 0 0 20px 5px rgb(87, 255, 87);
        border: 1px solid rgb(50, 141, 50);
    }
}
