body {
  font-family: "Inter", sans-serif;
  background-color: #000000;
  background-image: url("https://4kwallpapers.com/images/walls/thumbs_3t/11027.jpg");
  background-repeat: no-repeat;       /* Don't tile the image */
  background-size: cover;             /* Scale to fill the screen */
  background-position: center center; /* Center the image */
  color: #e0e0e0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  padding: 20px;
  box-sizing: border-box;
}


        .fun-fact-box {
        background-color: #f0f9ff; /* very light blue */
        color: #0369a1; /* nice blue */
        padding: 1rem;
        border-radius: 0.75rem;
        font-size: 1rem;
        font-weight: 500;
        margin-top: 1rem;
        text-align: center;
        box-shadow: 0 4px 8px rgba(3, 105, 161, 0.2);
        }
        .hidden {
        display: none;
        }
        

        .game-container {
            background-color: #ffffff; /* White background for the game card */
            border-radius: 1.5rem; /* More rounded corners */
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); /* Soft shadow */
            padding: 2.5rem; /* Increased padding */
            width: 100%;
            max-width: 500px; /* Max width for desktop */
            text-align: center;
            display: flex;
            flex-direction: column;
            gap: 1.5rem; /* Space between elements */
        }
        .flag-display {
            width: 100%;
            height: auto;
            max-height: 250px; /* Max height for the flag image */
            border: 2px solid #e2e8f0; /* Light border around flag */
            border-radius: 0.75rem; /* Rounded corners for flag */
            object-fit: contain; /* Ensure flag fits without distortion */
            background-color: #cbd5e1; /* Placeholder background */
        }
        .input-field {
            padding: 0.75rem 1rem;
            border: 2px solid #cbd5e1; /* Light gray border */
            border-radius: 0.75rem;
            width: 100%;
            font-size: 1.125rem; /* Larger font size */
            text-align: center;
            transition: border-color 0.2s ease-in-out;
        }
        .input-field:focus {
            outline: none;
            border-color: #3b82f6; /* Blue focus border */
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25); /* Focus ring */
        }
        .game-button {
            background-color: #3b82f6; /* Blue button */
            color: white;
            padding: 0.75rem 1.5rem;
            border-radius: 0.75rem;
            font-size: 1.125rem;
            font-weight: 600;
            cursor: pointer;
            transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out;
            box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3); /* Button shadow */
        }
        .game-button:hover {
            background-color: #2563eb; /* Darker blue on hover */
            transform: translateY(-2px); /* Slight lift on hover */
        }
        .game-button:active {
            transform: translateY(0); /* Press effect */
        }
        .message-box {
            background-color: #e0f2fe; /* Light blue background */
            color: #2196f3; /* Darker blue text */
            padding: 1rem;
            border-radius: 0.75rem;
            font-size: 1rem;
            font-weight: 500;
            text-align: center;
            min-height: 40px; /* Ensure it has some height even when empty */
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0; /* Hidden by default */
            transition: opacity 0.3s ease-in-out;
        }
        .message-box.show {
            opacity: 1; /* Show when active */
        }
        .score-display {
            font-size: 1.25rem;
            font-weight: 700;
            color: #4a5568; /* Dark gray text */
        }

        /* Responsive adjustments */
        @media (max-width: 640px) {
            .game-container {
                padding: 1.5rem;
                border-radius: 1rem;
                gap: 1rem;
            }
            .flag-display {
                max-height: 180px;
            }
            .input-field, .game-button {
                font-size: 1rem;
                padding: 0.6rem 1.2rem;
            }
            .score-display {
                font-size: 1rem;
            }
        }
    .btn-easy {
  background-color: rgba(255, 255, 255, 0.15); /* semi-transparent white */
  color: #ffffff;
  padding: 0.75rem 1.5rem;
  border: 2px solid black;
  border-radius: 0.75rem;
  font-size: 1.125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(8px); /* blurred background behind button */
  -webkit-backdrop-filter: blur(8px); /* Safari support */

}

.btn-easy:hover {
  background-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
}
.btn-intermediate{
    background-color: rgba(255, 255, 255, 0.15); /* semi-transparent white */
  color: #ffffff;
  padding: 0.75rem 1.5rem;
  border: 2px solid black;
  border-radius: 0.75rem;
  font-size: 1.125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(8px); /* blurred background behind button */
  -webkit-backdrop-filter: blur(8px); /* Safari support */
}
.btn-intermediate:hover{
    background-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);

}
.btn-hard{
    background-color: rgba(255, 255, 255, 0.15); /* semi-transparent white */
  color: #ffffff;
  padding: 0.75rem 1.5rem;
  border: 2px solid black;
  border-radius: 0.75rem;
  font-size: 1.125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(8px); /* blurred background behind button */
  -webkit-backdrop-filter: blur(8px); /* Safari support */
}
.btn-hard:hover{
    background-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);

}
.btn-expert{
    background-color: rgba(255, 255, 255, 0.15); /* semi-transparent white */
  color: #ffffff;
  padding: 0.75rem 1.5rem;
  border: 2px solid black;
  border-radius: 0.75rem;
  font-size: 1.125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(8px); /* blurred background behind button */
  -webkit-backdrop-filter: blur(8px); /* Safari support */
}
.btn-expert:hover{
    background-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);

}
button.selected {
  background-color: #000;
  color: #fff;
  border: 2px solid #fff;
}