header, section.text-white { position: relative; z-index: 1030; } main.container { max-width: 100% !important; width: 100% !important; } #treemap, #stackedBar { display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: #fff; min-height: 500px; width: 100%; max-width: 1000px; margin: 0 auto; } #treemap svg, #stackedBar svg { width: 100%; height: auto; } .logo img { max-height: 250px; height: auto; width: auto; } .nav-link:hover { color: #58a6ff !important; } .hero h2 { font-size: clamp(1.8rem, 5vw, 2.5rem); } .download-buttons { margin-top: 10px; text-align: center; } .download-buttons button { background-color: #ffffff; border: 0.5px solid #888888; color: #555555; padding: 6px 12px; font-size: 0.7rem; border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease, color 0.3s ease; } .download-buttons button:hover { background-color: #f5f5f5; color: #333333; border-color: #666666; } @media (max-width: 1024px) { #treemap, #stackedBar { width: 90%; } } @media (max-width: 768px) { .logo img { max-height: 100px; } #treemap, #stackedBar { width: 100%; } select { width: 100%; margin-bottom: 10px; } header .container { flex-direction: column; text-align: center; } header nav { margin-top: 15px; } .download-buttons button { width: 100%; margin-top: 10px; } } .switch { display: inline-flex; align-items: center; cursor: pointer; user-select: none; } .switch input { opacity: 0; width: 0; height: 0; position: absolute; } .slider { position: relative; width: 40px; height: 20px; background: #ccc; border-radius: 20px; transition: background 0.2s; margin-right: 8px; } .slider::before { content: ""; position: absolute; width: 16px; height: 16px; left: 2px; top: 2px; background: white; border-radius: 50%; transition: transform 0.2s; } .switch input:checked + .slider { background: #4caf50; } .switch input:checked + .slider::before { transform: translateX(20px); } .label-text { font-size: 0.9em; color: #333; } .chart-source-label { position: absolute; bottom: 5px; right: 10px; font-size: 12px; color: #666; pointer-events: none; } #endingStocksControls { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; } #endingStocksLegend { display: flex; flex-wrap: wrap; gap: 0.75rem; } #endingStocksLegend .legend-item { display: flex; align-items: center; font-size: 0.9rem; } #endingStocksLegend .legend-color-box { width: 12px; height: 12px; margin-right: 4px; flex-shrink: 0; } #endingStocksControls .switch { display: flex; align-items: center; } #endingStocksControls .label-text { margin-left: 0.5rem; user-select: none; font-size: 0.9rem; }