/* Basic styling for the page layout and components */
body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 20px;
            background-color: #111827; /* Dark blue-gray background */
            color: #D1D5DB; /* Light gray text */
            margin: 0;
        }

        /* Container for the main application */
        #container {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            gap: 40px;
            align-items: center;
            justify-content: center;
            flex-grow: 1;
        }
        
        /* Container for the puzzle board */
        #solution-container {
            background-color: #F9FAFB;
            padding: 20px;
            border-radius: 12px;
        }

        /* Styling for the canvas where the puzzle is drawn */
        #solution-board {
            border-radius: 8px;
        }
        
        /* Container for the title and GUI controls */
        #controls-container {
            display: flex;
            flex-direction: column;
            width: 300px;
        }

        /* Styling for the puzzle title */
        #puzzle-title {
            text-align: left;
            font-size: 1.75rem;
            font-weight: 700;
            margin: 0;
            color: #60A5FA; /* Light Blue */
        }

        /* Styling for the subtitle */
        #controls-container p {
            font-size: 1rem;
            color: #9CA3AF;
            margin-top: 4px;
            margin-bottom: 24px;
        }

        /* Styling for the GUI controls section */
        #gui {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        /* Wrapper for label and select */
        #gui > div:not(#status) {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        label {
            font-weight: 500;
            font-size: 1rem;
        }

        select, button {
            transition: all 0.2s ease-in-out;
            cursor: pointer;
        }

        select {
            width: 65%;
            padding: 10px;
            border-radius: 6px;
            border: 1px solid #4B5563;
            background-color: #1F2937;
            color: #D1D5DB;
            font-size: 1rem;
        }

        select:focus, button:focus {
            outline: none;
            border-color: #60A5FA;
            box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.3);
        }

        /* Specific styling for buttons */
        button {
            width: 100%;
            padding: 12px;
            border-radius: 6px;
            border: none;
            color: #ffffff;
            font-weight: 600;
            font-size: 1.1rem;
        }

        #hint-button {
            background-color: #0EA5E9; /* Sky Blue */
        }

        #hint-button:hover {
            background-color: #0284C7;
        }

        #reset-button {
            background-color: #EF4444; /* Red */
        }

        #reset-button:hover {
            background-color: #DC2626;
        }

        /* Styling for the status message area */
        #status {
            margin-top: 10px;
            font-style: normal;
            font-weight: 500;
            color: #FBBF24; /* Amber/Gold */
            height: 20px;
        }
        a:link {
            color: rgb(215, 228, 215);
            background-color: transparent;
            text-decoration: none;
        }


        a:visited {
            color: rgb(20, 68, 241);
            background-color: transparent;
            text-decoration: none;
        }


        a:hover {
            color: rgb(30, 255, 0);
            background-color: transparent;
            text-decoration: underline;
        }


        a:active {
            color: yellow;
            background-color: transparent;
            text-decoration: underline;
        }