/*html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}*/

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 0;
    box-sizing: border-box;
}

#menu {
    background-color: blue; /* Blue menu */
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
}

    #menu button {
        background-color: white;
        color: blue;
        border: none;
        padding: 10px 15px;
        border-radius: 5px;
        cursor: pointer;
        font-size: 14px;
        font-weight: bold;
    }

        #menu button:hover {
            background-color: lightblue;
        }

/* Main Container */
.custom-container {
    background-color: black; /* Black background */
    background-image: url('../images/puzzle-bg/bg.jpg');
    background-size: cover; /* Make sure the image fits the container */
    background-position: center; /* Center the image in the container */
    background-repeat: no-repeat; /* Prevent repeating the image */

    color: white; /* Text color for better contrast */
    min-height: calc(100vh - 87px); /* Subtract menu and footer heights */
    max-height: calc(100vh - 87px); /* Subtract menu and footer heights */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
    min-width:100%;
    /*min-height:100%;*/
}


#puzzle-container {
    text-align: center;
    margin-top: 50px;
    margin-bottom: 50px;
}

#puzzle {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    height: 60vh; /* Set the height to 70% of the viewport height */
    width: auto; /* Adjust width automatically */
    /*background-size: contain;  Ensure the image is not stretched */
    background-size: cover; /* Make sure the image fits the container */
    background-position: center; /* Center the image in the container */
    background-repeat: no-repeat; /* Prevent repeating the image */
    margin: 0 auto;
    border: 2px solid #ddd;
}

.overlay-piece {
    width: 20%; /* 1/5th of the puzzle container width */
    height: 20%; /* 1/5th of the puzzle container height */
    background-color: white; /* White overlay */
    border: 1px solid #ccc;
    box-sizing: border-box;
    transition: background-color 0.3s ease; /* Smooth transition for disappearing */
}

#revealPieceBtn, #resolvedBtn {
    padding: 5px 10px;
    font-size: 16px;
    margin-top: 10px;
    cursor: pointer;
}

#message {
    margin-top: 20px;
    font-size: 18px;
    color: green;
}

/* Info Container */
.info-container {
    visibility: hidden; /* Make it invisible */
    opacity: 0; /* Fully transparent */
    transition: opacity 0.6s ease-in-out; /* Smooth fade-in when shown */

    background-color: #f9f9f9; /* Light gray background */
    border: 1px solid #ddd; /* Subtle border */
    border-radius: 8px; /* Rounded corners */
    padding: 10px;
    margin: -10px auto 5px auto;
    max-width: 100%; /* Restrict max width */
    color: #333; /* Darker text for readability */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    min-height: 13vh;
    max-height: 13vh;
}

    .info-container.visible {
        visibility: visible; /* Make it visible */
        opacity: 1; /* Fully opaque */
        transition: opacity 0.6s ease-in-out;
    }

/* Info Content Styling */
.info-content {
    margin-top: 10px;
}

    .info-content h2 {
        
    }

.info-item {
    margin-bottom: 10px;
    font-size: 16px;
    line-height: 1.5;
}

    .info-item span.label {
        font-weight: bold;
        color: #555;
    }

    .info-item span.value {
        color: #000;
    }


img {
    max-width: 100%; /* Image takes up 50% of the page width */
    height: auto; /* Maintain aspect ratio */
    border: 2px solid #ddd; /* Optional border */
    border-radius: 8px; /* Rounded corners */
    margin-bottom: 20px; /* Space between image and caption */
}

.caption {
    font-size: 1.5rem; /* Larger font size */
    text-align: center; /* Center-align text */
}

.custom-footer {
    padding: 0 0; /* Add some padding */
}