/* General Styles */
body, html {
    overflow-x: hidden;
}

/* Base styles (mobile first) */
#textAndOptions {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    height: auto;
}

.scoresAndMore, .question, #proressBars {
    background: linear-gradient(90deg, rgb(200, 255, 222), #D9F2FD) padding-box,
                linear-gradient(to bottom, #36e7c4, rgb(124, 219, 193)) border-box;     
}

/* Tasks Container with Grid Layout */
.tasks-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 2em;
    width: 100%;
    padding: 1em;
    overflow: auto;
    scrollbar-width: thin;
    height: 90vh;
}

/* Individual Task Styles */
.task {
    display: flex;
    flex-direction: column;
    align-items: center;
    border: solid;
    border-color: lightgray;
    padding: 1em;
    border-radius: 1em;
}

/* Options Container Using Flexbox */
.options-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5em;
    width: 100%;
    overflow: auto;
    scrollbar-width: thin;
}

/* Style for Option Items */
.option {
    flex: 1 1 100%;
}

.option p {
    font-size: 0.9em;
}

/* Tablet and up (600px and up) */
@media (min-width: 600px) {
    .option {
        flex: 1 1 calc(50% - 1em);
    }
    
    .option p {
        font-size: 1em;
    }
}

/* Desktop and up (1200px and up) */
@media (min-width: 1200px) {
    .tasks-container {
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 4em;
        max-width: 1200px;
    }
    
    .option {
        margin: 0.5em;
    }
}

.question-container{
    background: linear-gradient(white, whitesmoke) padding-box,
    linear-gradient(to right, #36e7c4, rgb(73, 156, 134)) border-box;
    border: 3px solid transparent; 
    margin: 0.5em;
    border-radius: 15px;
}
.question-container p{
    padding: 0;
    margin: 0.4em;
}
#textTask1, #textTask2 {
    
    max-height: 50vh;
    overflow: auto;
}

/* Option Text Styles */
.option p {
    word-wrap: break-word;
    hyphens: auto;
    text-align: center;
    margin: 0;
}
.option:hover {
    background: linear-gradient(white, white) padding-box,
                 linear-gradient(to bottom, #36e7c4, rgb(124, 219, 193)) border-box;
    box-shadow: 0 0 15px #B0C2FF;
    animation: changeColorLST 0.35s forwards;
    cursor: grab;
}
.option:active {
    cursor: none;
}
.option.dragging {
    opacity: 0.7;
    transform: scale(1.05);
    transition: opacity 0.2s, transform 0.2s;
    cursor: none;
}
/* Optional: Add drag handle if desired */
.drag-handle {
    cursor: grab;
    margin-right: 0.5em;
}


.dropzone[data-dropped-id]{
    border: transparent;
    padding-left: 0em;
    padding-right: 0em;
}
.dropzone[data-dropped-id]:hover {
    cursor: pointer;
    border: 2px dashed #888;
}
/* Headings and Paragraphs Centered */
.task h3, .task p {
    text-align: center;
}

/* Center the Score Element at the Bottom */
.optBtnScrWrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: auto;
}

#score {
    margin-top: 1em;
    text-align: center;
}

/* Visual Feedback and Interaction Styles */
/* Include your existing styles for dragging, dropzones, etc. */

#textAndOptions, #score{
    background: linear-gradient(white, whitesmoke) padding-box,
    linear-gradient(to right, #36e7c4, rgb(73, 156, 134)) border-box;
    border: 4px solid transparent;
    border-radius: 20px;
    

}
span[id^="ex"] {
    border: 2px solid rgb(73, 156, 134);
    width: 15em;
    margin: 0.5em;
    padding: 0em 2em;
    border-radius: 1em;
}
/* Highlight active dropzone */
span.active-dropzone, .options-container.active-dropzone {
    border: 2px dashed rgb(73, 156, 134);
    background-color: rgba(81, 168, 144, 0.2);
    cursor: none;
    transition: background-color 0.2s, border-color 0.2s;
}



.topTitle {
    color: white;
    margin-right: auto;
    text-align: left;

    /*font-size: 3.5rem;
    /* text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); */  
}