div#container
{
   width: 200px;
   position: relative;
   margin: 0 auto 0 auto;
   text-align: left;
}
body
{
   background-color: #FFFFFF;
   color: #000000;
   font-family: Arial;
   font-weight: normal;
   font-size: 13px;
   line-height: 1.1875;
   margin: 0;
   text-align: center;
}
#password
{
   width: 100%;
}
#lock-icon-password
{
   position: absolute;
   right: 10px;
   top: 50%;
   transform: translateY(-50%);
   cursor: pointer;
}
@media only screen and (min-width: 1920px)
{
div#container
{
   width: 200px;
}
body
{
   background-color: #FFFFFF;
}
}
@media only screen and (min-width: 1024px) and (max-width: 1919px)
{
div#container
{
   width: 200px;
}
body
{
   background-color: #FFFFFF;
}
}
@media only screen and (min-width: 800px) and (max-width: 1023px)
{
div#container
{
   width: 200px;
}
body
{
   background-color: #FFFFFF;
}
}
@media only screen and (min-width: 768px) and (max-width: 799px)
{
div#container
{
   width: 200px;
}
body
{
   background-color: #FFFFFF;
}
}
@media only screen and (min-width: 480px) and (max-width: 767px)
{
div#container
{
   width: 200px;
}
body
{
   background-color: #FFFFFF;
}
}
@media only screen and (max-width: 479px)
{
div#container
{
   width: 200px;
}
body
{
   background-color: #FFFFFF;
}
}
    /* Default state: show the emoji */
button.revalidate-button .emoji {
    display: inline-block;
    transition: opacity 2s ease; /* Smooth transition */
}

button.revalidate-button .revalidate-text {
    display: none; /* Hide "Re-Validate" text by default */
    transition: opacity 2s ease; /* Smooth transition */
}

/* Hover effect: Hide emoji and show "Re-Validate" text */
button.revalidate-button:hover .emoji {
    opacity: 0; /* Fade out the emoji */
}

button.revalidate-button:hover .revalidate-text {
    opacity: 1; /* Fade in the "Re-Validate" text */
    display: inline-block; /* Make sure the text is displayed */
}

/* Ensure that the transition occurs smoothly when returning to normal state */
button.revalidate-button .emoji,
button.revalidate-button .revalidate-text {
    transition: opacity 2s ease;
}

   
   
    
<!--------------------------------------Puzzle-------------------------------------------------------------->
/* General body styling */
body {
    font-family: 'Lucida Sans Unicode', sans-serif;
    font-size: 16px; /* Default font size */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    text-align: center;
    background-color: #f4f7fa; /* Light background color for better contrast */
    color: black; /* Default text color changed to black */
    width: 100%;
    padding: 14px 0px; /* Increased padding for better spacing */
}

.puzzle-body {
    max-width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.puzzle-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Ensures elements wrap instead of overflowing */
    max-width: 90%; /* Limits the row width */
}

/* General puzzle cell styling */
.puzzle-cell {
    width: 70px; /* Increased size of the cell itself */
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 5px;
    font-size: 2em; /* Increased font size for bigger shapes inside */
    position: relative; /* Required for inner border effect */
    border: none; /* Remove outer border */
    box-sizing: border-box; /* Ensures padding and border don't affect the cell size */
}

/* Inner rainbow border effect for selected cells */
.puzzle-cell.selected::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 4px solid; /* Thicker border for selected cells */
    border-image: linear-gradient(45deg, red, orange, yellow, green, cyan, blue, violet) 1;
    border-radius: 5px;
    pointer-events: none;
    box-sizing: border-box; /* Ensures border is inside the element, not affecting size */
}

/* Hover effect for all cells (bottom row or any other) */
.puzzle-cell:hover::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid; /* Thinner border for hover effect */
    border-image: linear-gradient(45deg, red, orange, yellow, green, cyan, blue, violet) 1;
    border-radius: 5px;
    pointer-events: none;
    box-sizing: border-box; /* Ensures border is inside the element */
}

/* Exclude hover effect from the top row (reference image) */
.top-row .puzzle-cell:hover::before {
    border: none; /* No hover effect on top row */
}

/* Hover effect for bottom row cells with same rainbow effect but thinner border */
.bottom-row .puzzle-cell:hover::before {
    border: 2px solid; /* Thinner border for hover */
}




#spotTheDifferenceText {
    font-family: 'Lucida Sans Unicode', sans-serif;  /* Same font as the Verified message */
    font-size: 1.1em;  /* Same font size */
    color: #808080; /* Same text color as verified message */
    text-align: center;
    margin-bottom: 10px;
    margin-top: 10px;
    background: none; /* Remove background */
    font-weight: bold;  /* Optional: Make the English version stand out a bit more */
    padding: 10px; /* Same padding as the verified message */
    
    margin-top: 15px;
}


#instructions {
    font-family: 'Lucida Sans Unicode', sans-serif;  /* Matching the font to the rest */
    color: #808080;  /* Grey text color */
    font-size: 1.1em;  /* Default font size for instructions */
    text-align: center;
}

#instructions-en {
    font-size: 0.9em;  /* Making the English version a little bigger */
}

#instructions-pt {
    font-size: 0.8em;  /* Keeping the Portuguese version slightly smaller */
}

#instructions p {
    margin: 5px 0;
    padding: 0;
}




#verifiedMessageDiv {
    display: none;  /* Initially hidden */
    color: #808080;  /* Grey color */
    text-align: center;
    font-family: 'Lucida Sans Unicode', sans-serif;  /* Font style for the verified message */
    font-size: 1.5em;  /* Default font size */
    padding: 10px;
}

#verifiedMessageDiv h2 {
    margin: 0;
}

/* Media Queries for font size changes */
@media (max-width: 319px) {
    #verifiedMessageDiv {
        font-size: 1.2em;  /* Font size below 320px */
    }
}

@media (min-width: 320px) and (max-width: 1023px) {
    #verifiedMessageDiv {
        font-size: 1.3em;  /* Font size between 320px and 1024px */
    }
}

@media (min-width: 1024px) and (max-width: 1919px) {
    #verifiedMessageDiv {
        font-size: 1.5em;  /* Font size between 1024px and 1920px */
    }
}


/* Selected state for puzzle cells */
.selected {
    border: 2px solid black;
}

/* Arrow styling */
.arrow {
    font-size: 20px;
    margin: 5px;
}

/* Button styling for the puzzle */
.button {
    padding: 12px;
    font-size: 18px;
    cursor: pointer;
}

/* Form styling */
form {
    border: 1px solid #ddd;
    border-radius: 12px;
    width: 90%;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center; /* This will center the form content horizontally */
    position: absolute; /* Allows for absolute positioning */
    left: 50%;
    transform: translateX(-50%); /* Move the form back to center */
    
    margin-bottom: 200px; /* Add space below the form (you can adjust the value as needed) */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); /* Adds a soft blur shadow around the form */
}






/* Captcha image styling */
#captchaImage {
    width: 300px; /* Larger width */
    height: 100px; /* Larger height */
    object-fit: contain; /* Prevents distortion of the image */
}

/* Label styling */
label {
    display: block;
    margin-bottom: 12px;
    font-weight: 450; /* Make labels bolder for clarity */
    color: #808080; /* Grey color for the label text */
    align-items: center;
}

/* Input and select field styling */
input, select {
    width: 100%;
    padding: 14px 0px; /* Increased padding for better spacing */
    margin-bottom: 15px; /* Increased margin for better spacing */
    border: 1px solid #B8860B; /* Gold contour for input fields */
    border-radius: 8px;
    font-size: 16px;
    text-align: center;
    background-color: #f9f9f9; /* Light background color for input fields */
    color: #333; /* Dark grey/silver text color inside input fields */
}

/* Input and select fields focus styling */
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, select:focus {
    width: 100%;
    padding: 14px 12px; /* Increased padding for better spacing */
    border-color: #B8860B; /* Same gold color on focus */
    outline: none;
    width: 100%;
    padding: 14px 0; /* Vertical padding of 14px, no horizontal padding */
    text-align: center; /* This ensures the text inside buttons is centered */
}

/* Button styling */
button {
    width: 100%;
    padding: 14px 0; /* Vertical padding of 14px, no horizontal padding */
    background-color: white;
    color: #B8860B;
    border: 2px solid #B8860B;
    border-radius: 8px;
    cursor: pointer;
    margin-top: 20px;
    margin-bottom: 30px;
    font-size: 18px;
    text-align: center; /* This ensures the text inside buttons is centered */
}

/* Button hover effect */
button:hover {
    background-color: #B8860B; /* Hover effect with background gold color */
    color: white; /* Change text color to white on hover */
    width: 100%;
    padding: 14px 12px; /* Increased padding for better spacing */
}

/* Error message styling */
.error {
    color: red;
    font-size: 14px;
    margin-top: 12px;
    padding: 5px;
}

/* Emoji styling */
.emoji {
    font-size: 20px;
    margin-left: 10px;
}

/* Response message styling */
#responseMessage {
    display: none;
    padding: 15px;
    margin-top: 20px;
    width: 100%;
    color: red;
    background-color: #f8d7da; /* Light red background for error messages */
    border: 1px solid #f5c6cb;
    border-radius: 5px;
}

/* Media Queries for font size changes */
@media (max-width: 319px) {
    body {
        font-size: 14px; /* Font size below 320px */
    }

    form {
        padding: 20px;
    }

    button {
        font-size: 16px;
        padding: 12px 0;
    }
}

@media (min-width: 320px) and (max-width: 1023px) {
    body {
        font-size: 15px; /* Font size between 320px and 1024px */
    }

    form {
        padding: 25px;
    }

    button {
        font-size: 17px;
    }
}

@media (min-width: 1024px) and (max-width: 1919px) {
    body {
        font-size: 16px; /* Font size between 1024px and 1920px */
    }

    form {
        padding: 30px;
    }

    button {
        font-size: 18px;
    }
}