:root { --theme-color: var(--theme-color); --text-color: #fff; --border-primary: #5353534c; --border-secondary: #535353; --bg-1: #00000080; --bg-2: #2424243d; --bg-3: #000000; } .hero-content h1 { font-family: Hind Siliguri, sans-serif !important; } .navbar { width: 60px; position: fixed; top: 50%; right: 20px; transform: translateY(-50%); display: flex; flex-direction: column; background-color: #24242400; padding: 10px; align-items: center; z-index: 996; } .navbar button { background: transparent; color: var(--text-color); border: none; padding: 10px; text-align: center; display: flex; flex-direction: column; align-items: center; cursor: pointer; } .nav-button-full:hover { color: var(--theme-color) !important; } .navbar i { font-size: 20px; margin-bottom: 5px; margin-top: -10px !important; padding-left: -50px; } .navbar span { font-family: Hind Siliguri, sans-serif; font-size: 12px; margin-top: -1px; } .modal-share { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #000000c3; border: 1px solid rgba(241, 6, 6, 0.81); color: #ff0303; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); width: 90%; max-width: 500px; padding: 20px; z-index: 1001; } .modal-share h2 { margin: 0 0 15px; font-size: 20px; color: var(--text-color); } .modal-share .share-buttons { display: flex; flex-wrap: wrap; gap: 10px; } .modal-share .share-buttons a { flex: 1; text-align: center; padding: 10px; border: 1px solid #555; border: 1px solid rgba(241, 6, 6, 0.81); background-color: rgba(220, 17, 1, 0.16); color: var(--theme-color); text-decoration: none; color: var(--text-color); font-size: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; } .modal-share .share-buttons a:hover { background-color: var(--theme-color); border: 1px solid var(--theme-color); color: var(--text-color); } .modal-share .copy-link { margin-top: 15px; display: flex; justify-content: space-between; align-items: center; border: 1px solid rgba(241, 6, 6, 0.81); background-color: rgba(220, 17, 1, 0.16); color: var(--theme-color); padding: 5px; } .modal-share .copy-link input { border: none; outline: none; flex: 1; background: transparent; color: var(--text-color); color: #ff0303; } .modal-share .copy-link button { background: var(--theme-color); color: var(--text-color); border: none; border-radius: 3px; padding: 10px 5px; cursor: pointer; } .modal-share .close { position: absolute; top: 22px; right: 10px; background: transparent; border: none; font-size: 25px; color: var(--text-color); cursor: pointer; } .overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); z-index: 1000; } .share-buttons i { padding: 0; } .index-modal table { width: 100%; border-collapse: collapse; font-family: Hind Siliguri, sans-serif !important; z-index: 1001; } .index-modal colgroup col:nth-child(1) { width: 8%; text-align: center; border-right: 1px solid var(--theme-color); } .index-modal th { text-align: center; background: var(--theme-color); color: var(--text-color); padding: 10px; font-size: 18px; position: sticky; top: 0; } .index-modal td { padding: 10px; } .index-modal tr:nth-child(odd) { background-color: #242424ae; } .index-modal tr:nth-child(even) { background-color: #333333ae; } .index-modal td a { text-decoration: none; color: var(--text-color); } .index-modal td a:hover { text-decoration: none; color: var(--theme-color); font-weight: bold; } @media (max-width: 768px) { body { padding-bottom: 60px !important; } .navbar { height: 60px; background-color: var(--bg-3); border-top: 1px dashed var(--border-secondary); position: fixed; bottom: 0; top: auto; right: 0; transform: none; width: 100%; flex-direction: row; justify-content: space-around; padding-top: 20px; } }