@charset "UTF-8";
/* CSS Document */

.hasContainer {
    display: flex;
    justify-content: center;
    /* Center cells within the row */
    align-items: center;
    
    margin-left: auto;
    margin-right: auto;
    
    margin-bottom: 1vw;;
    
    padding-left: 1vw;
    padding-right: 1vw;
    
    padding-top: 1vw;
    padding-bottom: 1vw;
    
    gap: 4.5vw;
    
    border: 0.25vw solid black;
    background-color: aqua;
}

.HASButton {
    width: 11vw;
  
    padding-left: 1vw;
    padding-right: 1vw;
    
    padding-top: 1vw;
    padding-bottom: 1vw;
    
    cursor: pointer;
    
    font-size: 2.4vw;
    
    border: 0.25vw solid black;
    background-color: aqua;
}

/* Darker background color when clicked, but not when disabled */
.HASButton:active:not(.disabled) {
    background-color: #45a049;
}

/* Gray background for disabled state */
.HASButton.disabled {
    background-color: rgb(0, 202, 255);
    pointer-events: none; /* Prevents any mouse events on this element */
}

/*
.HASButton:active {
    background-color: #45a049;

}

.HASButton.disabled {
    background-color: gray;
    pointer-events: none; 
}
*/
.rowQ {
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;

    display: flex;
    justify-content: center;
    /* Center cells within the row */
    align-items: center;
  
    /*padding: 0.5vw;*/
    
    padding-top: 0.5vw;
    padding-bottom: 0.5vw;
    
    padding-right: 0.5vw;
    padding-left: 0.5vw;
    
    margin-left: auto;
    margin-right: auto;
    
    margin-bottom: 1vw;
    
    /* distance all around the row and its cells */
    gap: 0.5vw;
    /* Space between cells */
    border: 0.25vw solid black;

    background-color: red;
}

.rowQ:first-child {
    /*margin-top: 1vw;*/
}

.rowQ:last-child {
}

.rowQ.selected {
    border: 1vw solid blue;
}

.cellQ {
    display: flex;
    flex-direction: column;

    width: 14vw;
    aspect-ratio: 1 / 1;
    position: relative;
    
    min-width: 3vw; /* Example minimum size */
    min-height: 3vw;

    align-items: center;
    justify-content: center;
    
    cursor: pointer;

    border: 0.25vw solid black;
    background-color: lightgoldenrodyellow;
}

.cellQ:first-child {
    margin-left: 0;
}

.cellQ:last-child {
    margin-right: 0;
}

.characterSpan {
    min-width: 13vw; /* Example minimum size */
    min-height: 13vw;
    aspect-ratio: 1 / 1;

    align-self: center;
    position: absolute;

    text-align: center;
    font-size: 9vw;
    /*border: 0.25vw solid black;*/
    /*background-color:greenyellow;*/
    
    z-index: 8;
}

/* Keyframe animation for scaling */
@keyframes scale {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Apply animation on hover */
.cellQ:hover {
    animation-name: scale;
    animation-duration: 0.8s;
    animation-iteration-count: 1;
}

.checkGreen::after {
    content: '\2714';
    color: green; /* Set the color of the checkmark */
    font-size: 96px; /* Adjust the size as needed */
    
    position: absolute;
    top: 0;
    right: 0;
}

.checkRed::after {
    content: '\2718';
    color: red; /* Set the color of the checkmark */
    font-size: 96px; /* Adjust the size as needed */
    
    position: absolute;
    top: 0;
    right: 0;
}

.oneCharCell {
    display: flex;
    
    margin-left: auto;
    margin-right: auto;

    width: 14vw;
    aspect-ratio: 1 / 1;
    position: relative;
    
    min-width: 3vw; /* Example minimum size */
    min-height: 3vw;
    
    justify-content: center;
    
    margin-bottom: 1vw;

    border: 0.25vw solid black;
    background-color: lightgoldenrodyellow;
}

.oneCharSpan {
    min-width: 13vw; /* Example minimum size */
    min-height: 13vw;
    aspect-ratio: 1 / 1;

    align-self: center;
    position: absolute;

    text-align: center;
    font-size: 9vw;
    /*border: 0.25vw solid black;*/
    /*background-color:greenyellow;*/
    
    z-index: 8;
}

.quizDiv {
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
    
    margin-bottom: 1vw;
    margin-top: 1vw;
    
    margin-left: auto;
    margin-right: auto;
    
    border: 0.25vw solid black;
    
    padding-left: 1vw;
    padding-right: 1vw;
    
    padding-top: 1vw;
    
     
    
    background-color: papayawhip;
}