/* Start node: blue */ .start-node { background-color: #3b82f6 !important; } /* End node: red */ .end-node { background-color: #ef4444 !important; } /* Wall node: white */ .wall-node { background-color: #b1a2a2c7 !important; } /* The :root selector targets the highest-level element in your document (the tag), making these variables available globally throughout your entire stylesheet. */ :root { --bg-color: #121212; --window-bg: #1a1a1a; --grid-line: #3b3328; /* Subtle amber/brown for the grid lines */ --node-bg: #1e1e1e; --label-color: #555; } body { background-color: var(--bg-color); } main { background-color: var(--bg-color); color: white; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; display: flex; flex-direction: column; align-items: center; padding-top: 50px 0; margin: 0; } /* visualizer btn */ #visualize-btn { background: #3b82f6; color: white; border: none; padding: 10px 25px; border-radius: 8px; font-weight: bold; transition: transform 0.2s ease; } #visualize-btn:active { transform: scale(0.95); } #visualize-btn:hover { background-color: #2563eb; } #visualize-btn i { font-size: 15.5px; } /* Reset btn */ #reset-btn { background: #2a2a2a9a; color: white; border: 1px solid #444; padding: 10px 20px; border-radius: 8px; transition: transform 0.2s ease; } #reset-btn:active { transform: scale(0.95); } #reset-btn i { font-size: 15.5px; } /* random Maze Btn */ #random-maze-btn { background: #2a2a2a9a; color: white; border: 1px solid #444; padding: 10px 20px; border-radius: 8px; font-size: 0.9rem; transition: transform 0.2s ease; } #random-maze-btn:active { transform: scale(0.95); } #random-maze-btn i { font-size: 15px; } /* BFS box styling */ #algorithm-select { background: #2a2a2a9a; /* #333 */ color: white; border: 1px solid #444; padding: 10px 15px ; border-radius: 8px; outline: none; cursor: pointer; /* border: 1px solid red; */ } /* The outer container seen in your photo */ .grid-window { position: relative; background-color: var(--window-bg); border: 1px solid #2c2c2c; border-radius: 4px; padding: 22px; box-shadow: 0 20px 50px rgba(0,0,0,0.6); display: flex; justify-content: center; align-items: center; margin-top: 20px; } /* THE GRID: The gap creates the "lines" */ #grid-container { display: grid; grid-template-columns: repeat(40, 25px); grid-template-rows: repeat(20, 25px); gap: 1px; background-color: var(--grid-line); /* This color flows through the gaps */ border: 1px solid var(--grid-line); width: fit-content; margin: 0 auto; } /* Node inside grid */ .node { width: 100%; height: 100%; background-color: var(--node-bg); transition: background-color 0.2s; box-sizing: border-box; } /* Highlight "small box" on hover */ .node:hover { background-color: #393737; /* 2a2a2a*/ cursor: crosshair; } /* Container for all control btns */ .main-control-panel { background: rgba(40, 40, 40, 0.6); padding: 13px 180px; border-radius: 13px; border: 1px solid #2c2c2c; /* margin-top: -25px; */ display: flex; align-items: center; gap: 15px; backdrop-filter: blur(5px); } h1 { font-size: 40px; text-align: center; color: #6098f3; margin: 10px 0 0; } .start-node i { font-size: 16px; padding-left: 4px; } .end-node i { font-size: 13px; padding-left: 5px; } /* Text colors */ .origin-text { color: #3b82f6; font-weight: 700;} .target-text {color: #ef4444; font-weight: 700;} .obstacle-text {color: #b1a2a2c7; font-weight: 700;} .header-section { text-align: center; margin-bottom: 20px; } .instruction-text { color: #888; font-size: 0.9rem; } p {color: #888; font-size: 1rem; margin: 0px; } /* For AlgoFlow Logo */ .logo { display: flex; align-items: center; gap: 12px; cursor: pointer; /* Moves logo to the left side while nav-links stay right */ margin-right: auto; transition: transform 0.2s ease; } .logo:active { transform: scale(0.95); } .logo i { font-size: 1.8rem; color: #3498db; /* Match your bar color */ text-shadow: 0 0 10px rgba(52, 152, 219, 0.5); /* Subtle glow */ } .logo-name { font-size: 1.4rem; font-weight: 700; color: #fff; letter-spacing: 1px; font-family: 'Poppins', sans-serif; /* Or your preferred font */ } .logo-link { text-decoration: none; /* Removes the underline */ color: inherit; /* Keeps your white and blue colors */ display: flex; /* Ensures the clickable area fits the logo */ } .logo:hover { opacity: 0.8; /* Adds a subtle feedback when you hover */ transition: 0.3s; }