:root { --theme-color: #f37021; --text-color: #fff; --border-primary: #5353534c; --border-secondary: #333; --bg-1: #00000080; --bg-2: #2424243d; --bg-3: #000000; } .hero-content h1 { font-family: "Quicksand", sans-serif; } .navbar { font-family: "Quicksand", sans-serif; font-size: 13px; width: 2%; position: fixed; top: 50%; right: 20px; transform: translateY(-50%); display: flex; flex-direction: column; padding: 10px; align-items: center; z-index: 1002; user-select: none; } .navbar button { font-size: 13px; background: transparent; color: var(--text-color); border: none; padding: 13px; text-align: center; display: flex; flex-direction: column; align-items: center; cursor: pointer; } .navbar button:hover { color: var(--theme-color) !important; } .navbar i { font-size: 13px; margin-bottom: 5px; margin-top: -10px !important; padding-left: -50px; } .navbar span { font-family: "Quicksand", 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 #f37021; color: #f37021; 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 !important; } .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 #f37021; background-color: #f3722111; 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 #f37021; background-color: #f3722111; color: var(--theme-color); padding: 5px; } .modal-share .copy-link input { border: none; outline: none; margin: 0; flex: 1; background: transparent; color: var(--text-color); color: #f37021; } .modal-share .copy-link button { background: var(--theme-color); color: var(--text-color); border: none; padding: 10px; border-radius: 2px; cursor: pointer; } .modal-share .close { position: absolute; top: 15px; right: 18px; background: transparent; border: none; font-size: 25px !important; 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.8); 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: 1200px) { body { padding-bottom: 60px !important; } .navbar { width: 95%; border-radius: 30px; height: 50px; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border: 1px solid var(--border-secondary); position: fixed; bottom: 10px !important; left: 50%; top: auto; transform: translateX(-50%); flex-direction: row; justify-content: space-around; padding-top: 20px; } } @media (max-width: 768px) { .navbar button:hover { background-color: transparent !important; border: none !important; color: inherit !important; } }