body {
    background-color: #ffffff;
    font-family: 'Comic Sans MS', sans-serif; /* Fun font for kids */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.logo-img {
    max-height: 80px; /* Adjust height as needed */
    width: auto;      /* Maintain aspect ratio */
    margin-right: 10px; /* Space between the logo and text */
    vertical-align: middle; /* Aligns the logo with the text */
}

.img-fluid {
    border-radius: 5px; /* Rounded corners for images */
    margin-bottom: 15px; /* Space between images and text */
}

.card {
    transition: transform 0.2s; /* Animation for card hover effect */
    width: 100%; /* Ensure cards take full width of their container */
}

.card:hover {
    transform: scale(1.05); /* Slightly enlarge on hover */
}


.fixed-bottom {
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    background: white; /* Optional: add background for visibility */
    padding: 10px; /* Optional: add padding */
}

.welcome-text {
    color: #ffffff; /* Bright, welcoming color */
    font-size: 3em; /* Larger font size */
    text-align: center; /* Center the text */
    margin: 20px 0; /* Space around the text */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* Subtle shadow for depth */
    animation: fadeIn 1s ease-in-out; /* Fade-in effect */
    font-family: 'Comic Sans MS', sans-serif; /* Fun font for kids */
}

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}


h4 {
    color: #ffffff; /* Bright orange for fun */
    font-size: 2.5em;
    text-align: center;
    margin-top: 20px;
    animation: bounceIn 1s; /* Bounce animation */
}

h1 {
    color: #ffffff; /* Bright orange for fun */
    font-size: 2.5em;
    text-align: center;
    margin-top: 20px;
    animation: bounceIn 1s; /* Bounce animation */
}

.button-spacing {
    margin-top: 30px; /* Space between buttons */
}

.container {
    flex: 1;
   
}

.colorful-text {
    font-weight: bold;
    font-size: 2.5rem;
    display: inline-block;
    animation: colorChange 100s infinite;
}

@keyframes colorChange {
    0% { color: #FF5733; }
    16% { color: #33FF57; }
    32% { color: #3357FF; }
    48% { color: #FF33A6; }
    64% { color: #FFD700; }
    80% { color: #8A2BE2; }
    100% { color: #FF5733; }
}


.container_1 {
    margin-top: 60px;
    flex: 1;
    margin-bottom: 20px;
    background-color: #ffffff; /* Light background for content */
    padding: 20px;
    text-align: center;
}
.card-img-top {
    height: 150px; /* Set your desired height */
    object-fit: cover; /* Ensures the image covers the area */
}



.content-container {
    margin-top: 250px; /* Customize this value to increase/decrease space */
    background-color: #ffffff;
    margin-bottom: 250px; /* Customize this value to increase/decrease space */
    border-radius: 15px;
    text-align: center;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    padding: 50px;

}




.answer-input {
    border-radius: 0.25rem;
    padding: 10px;
    font-size: 1.2em; /* Larger font for kids */
    border: 2px solid #ff4500;
    text-align: center;
    transition: border-color 0.3s;
}

.answer-input:focus {
    border-color: #ff6347; /* Highlight on focus */
}

button {
    background-color: #ff4500; /* Fun orange-red button */
    border: none;
    padding: 10px 20px; /* Increased padding for larger buttons */
    color: #fff;
    border-radius: 0.5rem; /* Rounded corners */
    font-size: 1.2em; /* Larger font for readability */
    transition: background-color 0.3s, transform 0.3s;
}

button:hover {
    background-color: #ff6347; /* Lighter orange-red on hover */
    transform: scale(1.1); /* Slight zoom effect on hover */
}

/* Animations */
@keyframes bounceIn {
    0% { transform: scale(0); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}


.fruit-image {
    width: 20px; /* Adjusted size */
    margin: 5px;
    opacity: 1; /* Set to 1 initially */
    transform: translateY(-20px);
    animation: appear 1.3s forwards;
}

@keyframes appear {
    0% {
        transform: translateY(-20px); /* Start position off-screen */
        opacity: 0; /* Start with opacity 0 */
    }
    100% {
        transform: translateY(0); /* Final position (normal) */
        opacity: 1; /* End with full opacity */
    }
}




.flash-message {
    padding: 10px;
    margin: 10px 0;
    border-radius: 5px;
}

.flash-message.success {
    background-color: #d4edda; 
    color: #155724; 
    border: 1px solid #c3e6cb; 
}

.flash-message.danger {
    background-color: #f8d7da; 
    color: #721c24; 
    border: 1px solid #f5c6cb; 
}

.custom-navbar {
    background-color: #007bff;
    color: white;
}

.custom-navbar .nav-link {
    color: white;
}

.custom-navbar .nav-link:hover {
    color: #d1e7fd;
}

.custom-navbar .navbar-brand {
    color: white;
}

.custom-navbar .navbar-brand:hover {
    color: #d1e7fd;
}

footer {
    background-color: #007bff; 
    padding: 10px;
    color: #fff;
    text-align: center;
    margin-top: auto; /* Pushes the footer to the bottom */


}

.row {
    flex: 1; /* Allow the row to take available space */
}

.body_1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 20px;

}

footer {
    margin-top: 10px;
    padding: 10px;
    margin-top: auto; /* Pushes the footer to the bottom */

}

/* Adding playful hover effects for song links */
a {
    color: #4682b4; /* Steel blue */
    font-weight: bold;
    text-decoration: none;
    transition: color 0.3s ease, transform 0.3s;
}

a:hover {
    color: #ff4500; /* Fun orange-red */
    transform: scale(1.1); /* Slight zoom effect */
}

.custom-input {
    width: 50%; /* Make it responsive */
    padding: 12px 12px; /* Add padding for the input field */
    margin: 10px 0; /* Space between elements */
    margin-top: 50px;
    box-sizing: border-box; /* Ensure padding doesn't affect width */
    border: 2px solid #ccc; /* Light gray border */
    border-radius: 5px; /* Rounded corners */
    font-size: 16px; /* Modern font size */
    transition: border-color 0.3s ease; /* Smooth border transition */
}

.custom-input:focus {
    border-color: #007bff; /* Change border color when focused */
    outline: none; /* Remove default outline */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Add glow effect */
}

#grid {
    display: inline-block;
    margin: 20px;
}


.cell {
    width: 50px;
    height: 50px;
    border: 1px solid #000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.container_2 {
    margin-top: 20px;
    flex: 1;
    margin-bottom: 20px;
    background-color: #007bff; /* Light background for content */
    padding: 20px;
    text-align: center;
}

.footer-link {
    color: rgb(255, 255, 255); /* Change this to your desired blue shade */
    text-decoration: none; /* Remove underline if you prefer */
}

.footer-link:hover {
    text-decoration: underline; /* Add underline on hover */
}

.puzzle-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 20px auto;
    max-width: 600px;
}

.letter-box {
    background-color: #4caf50;
    color: white;
    font-size: 30px;
    margin: 10px;
    padding: 15px;
    border-radius: 10px;
    cursor: pointer;
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
}

.drop-zone {
    width: 60px;
    height: 60px;
    margin: 10px;
    border: 2px dashed #ccc;
    border-radius: 10px;
    display: inline-block;
}

.navbar-toggler {
    border: none; /* Removes border */
    background-color: transparent; /* Makes background transparent */
    padding: 0; /* Removes padding */
    outline: none; /* Removes focus outline */
    box-shadow: none; /* Ensures no shadow on focus or click */
}

.navbar-toggler:focus,
.navbar-toggler:active {
    outline: none; /* Prevents focus outline */
    border: none; /* Ensures no border on active state */
    background-color: transparent; /* Ensures background remains transparent */
    box-shadow: none; /* Removes any shadow on active state */
}

.navbar-toggler-icon {
    width: 30px; /* Width of the lines */
    height: 3px; /* Height of each line */
    background-color: #ffffff; /* Color of the lines */
    border-radius: 2px; /* Rounded edges for the lines */
    display: inline-block;
    position:relative;
}


.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
    content: ''; /* Pseudo-elements to create top and bottom lines */
    background-color: #ffffff; /* Same color as the main line */
    display: block;
    width: 30px;
    height: 3px;
    position: absolute;
    left: 0;
    border-radius: 2px; /* Rounded edges for pseudo-lines */
}

.navbar-toggler-icon::before {
    top: -4px; /* Position the top line */
}

.navbar-toggler-icon::after {
    top: 4px; /* Position the bottom line */
}

/* Remove hover/focus background */
.navbar-toggler:hover,
.navbar-toggler:focus {
    background-color: transparent; /* No visible background on hover */
    box-shadow: none; /* No shadow on focus */
}


/* Container to centralize and adjust the welcome text */
.welcome-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100vh; /* Ensures the content is vertically centered */
    text-align: center; /* Centers the text horizontally */
}

.welcome-text {
    font-size: 2.5rem; /* Adjust font size */
    font-weight: bold;
    color: #007bff; /* Change text color to match the theme */
    margin: 0;
}

@media (max-width: 768px) {
    .welcome-text {
        font-size: 2rem; /* Smaller font size for mobile devices */
    }
}

@media (max-width: 480px) {
    .welcome-text {
        font-size: 1.5rem; /* Even smaller font size for very small screens */
    }
}

.celebration-container {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    margin-top: 1px; /* Adjust margin as needed */
}

#celebration-gif {
    display: none; /* Initially hide the GIF */
    max-width: 100%; /* Ensure it doesn't overflow */
    max-height: 400px; /* Adjust the size as necessary */
}



/* Centering the entire game */
.game-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    flex-direction: column;
}

#choices-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    border-radius: 10px;
    margin: 20px 0;
    padding: 10px;
    width: 100%;
    flex-wrap: wrap; /* Wrap shapes if the screen size is smaller */
    max-width: 800px; /* Limiting the max width of the choices container */
    margin-left: auto;  /* Center horizontally */
    margin-right: auto; /* Center horizontally */
}




/* Keeping the existing container styles and adding a separate rule for the choices */
.game-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin: 20px 0;
    width: 100%;
    flex-wrap: wrap; /* Ensures that the shapes are wrapped into multiple lines if needed */
    max-width: 800px; /* Limiting the max width of the container */
}

.shape {
    width: 100px;  /* Adjusted size */
    height: 100px; /* Adjusted size */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: grab;
    transition: transform 0.2s;
}

.shape:active {
    transform: scale(1.1);
}

.shape img {
    width: 100%;
    height: 100%;
    object-fit: contain;  /* Keep the aspect ratio intact */
}

#final-score {
    color: #007bff;
    font-weight: bold;
}

#shape-outline {
    width: 100px;  /* Set the width to a smaller value */
    height: 100px;  /* Set the height to a smaller value */
    object-fit: contain;  /* Maintain the aspect ratio of the image */
}

.waveform-container {
    width: 100%;
    height: 100px; /* Adjust the height as needed */
    margin-top: 10px;
    background-color: #ff0000;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

#audio-visualizer-{{ loop.index }} {
    border: 3px solid #FFD700; /* Gold border */
    border-radius: 10px; /* Rounded edges */
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2); /* Soft shadow */
}

/* Style for the next button container */
#next-btn-container {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center;    /* Center vertically */
    height: 100px;          /* Adjust height if needed */
}

/* Style for the button itself */
#next-btn {
    padding: 10px 20px;
    font-size: 1.2rem;
    border-radius: 12px; /* Friendly rounded edges for kids */
    background-color: #4CAF50; /* Fun, bright green */
    color: white;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Slight shadow for depth */
    transition: transform 0.2s ease, background-color 0.2s ease;
}

#next-btn:hover {
    background-color: #45a049; /* Slightly darker green on hover */
    transform: scale(1.1); /* Slight grow effect on hover */
}

.letter-option {
    background-color: limegreen   !important;;  /* Lime green background */
    color: white  !important; /* White text */
    font-weight: bold !important; /* Bold text */
    border: none !important; /* Remove default border */
    padding: 10px 20px; /* Add padding for better spacing */
    margin: 1px; /* Add margin between buttons */
    border-radius: 5px !important; /* Rounded corners */
    cursor: pointer; /* Pointer cursor on hover */
}

.letter-option:hover {
    background-color: #007bff !important; /* Slightly darker green on hover */
}

.letter-option:disabled {
    background-color: #cccccc !important; /* Gray background when disabled */
    cursor: not-allowed !important; /* Disabled cursor */
}

.btn-success {
    background-color: #28a745 !important; /* Green for correct answer */
}

.btn-danger {
    background-color: #dc3545 !important; /* Red for incorrect answer */
}

.shape-options {
    display: flex;
    justify-content: center;
    gap: 5px;
    flex-wrap: wrap;
}

.shape-option-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.shape-option {
    border: 2px solid ;
    border-radius: 10px;
    background-color: #000;
    transition: transform 0.2s, border-color 0.2s;
}

.shape-option:hover {
    transform: scale(1.1); /* Slightly enlarge on hover */
    border-color: #007bff; /* Add a border on hover */
}

.shape-option.correct {
    border-color: green; /* Green border for correct answers */
}

.shape-option.incorrect {
    border-color: red; /* Red border for incorrect answers */
}

.shape-label {
    margin-top: 5px;
    font-size: 16px;
    font-weight: bold;
    color: #000;
}

.color-options {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.color-option-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.color-option {
    border: 2px solid transparent;
    border-radius: 10px;
    transition: transform 0.2s, border-color 0.2s;
}

.color-option:hover {
    transform: scale(1.1); /* Slightly enlarge on hover */
    border-color: #000; /* Add a border on hover */
}

.color-option.correct {
    border-color: green; /* Green border for correct answers */
}

.color-option.incorrect {
    border-color: red; /* Red border for incorrect answers */
}

.color-label {
    margin-top: 5px;
    font-size: 16px;
    font-weight: bold;
    color: #333;
}