* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

.iframe-container {
 max-width: 800px; /* Adjust as needed */
 margin: 0 auto;
 padding: 20px;
 background: #f9f9f9; /* Add a background color */
 border-radius: 8px; /* Rounded corners */
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
}

body {
 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
 line-height: 1.6;
 color: #333;
}
section[id] {
 scroll-margin-top: 80px;
}
.katex {
 font-size: 16px;
}
.katex-display > .katex {
 max-width: 100%;
}
.katex-display > .katex > .katex-html {
 max-width: 100%;
 overflow-x: auto;
 overflow-y: hidden;
 padding-left: 2px;
 padding-right: 2px;
 text-align: left;
}
.toc-toggle-btn {
 display: flex;
 color: #1e40af;
 border: none;
 padding: 0.5rem 1rem;
 font-size: 1rem;
 font-weight: bold;
 cursor: pointer;
 border-radius: 4px;
 margin: 1rem 0;
 transition: background-color 0.3s ease;
}
.toc-toggle-btn:hover {
 background-color: #2980b9;
}
.toc-toggle-btn:focus {
 outline: none;
}
.hidden {
 display: none;
}
.h3-margin-top h3 {
 margin-top: 1.5rem;
}
.h3-margin-bottom h3 {
 margin-bottom: -1rem;
}
.margin-bottom-minus-1rem {
 margin-bottom: -1rem;
}
.toc {
 border: 1px solid #ddd;
 padding: 1rem;
 margin: 1rem 0;
 background-color: #f9f9f9;
 border-radius: 6px;
 box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}
.toc h2 {
 font-size: 1.2rem;
 font-weight: bold;
 margin-bottom: 0.5rem;
 color: #333;
 text-align: center;
 text-transform: uppercase;
 letter-spacing: 0.5px;
 position: relative;
}
.toc h2::after {
 content: "";
 display: block;
 width: 40px;
 height: 2px;
 background: linear-gradient(90deg, #3498db, #2ecc71);
 margin: 0.3rem auto 0;
 border-radius: 1px;
}
.toc ul {
 list-style: none;
 padding: 0;
 margin: 0;
 transition: height 0.5s ease, opacity 0.5s ease;
 overflow: hidden;
 height: auto;
 opacity: 1;
}
.toc ul li {
 margin: 0.4rem 0;
 padding: 0.2rem 0;
 border-bottom: 1px solid #ececec;
 transition: background-color 0.3s ease;
}
.toc ul li:last-child {
 border-bottom: none;
}
.toc ul li a {
 text-decoration: none;
 color: #007bff;
 font-size: 0.9rem;
 padding: 0.3rem 0.4rem;
 display: inline-block;
 border-radius: 4px;
 transition: color 0.2s ease, background-color 0.2s ease;
}
.toc ul li a:hover {
 color: white;
 background-color: #007bff;
 text-decoration: none;
}
.toc ul.hidden {
 height: 0;
 opacity: 0;
 padding: 0;
}
.toc-toggle-btn svg {
 width: 24px;
 height: 24px;
}
@media (max-width: 768px) {
 .toc {
 padding: 0.8rem;
 }
 .toc h2 {
 font-size: 1rem;
 }
 .toc ul li a {
 font-size: 0.85rem;
 }
}
.toc1 {
 font-size: larger;
 font-weight: bold;
}
table {
 font-size: 95%;
 border-collapse: collapse;
 max-width: 700px;
}
th,
td {
 border: 1px solid black;
 padding: 8px;
 text-align: center;
}
th {
 background-color: #f2f2f2;
}
.imgcenter {
 max-width: 90%;
 height: auto;
 display: block;
 margin-left: auto;
 margin-right: auto;
}
figure {
 font-size: 24px;
 display: flex;
 flex-direction: column;
 align-items: center;
}
.textcenter {
 text-align: center;
}
article p {
 margin: 1.5rem 0;
 color: #1a1a1a;
}
article h2 {
 font-size: 1.5rem;
 font-weight: 700;
 color: #1a1a1a;
 text-align: center;
 margin: 3rem 0 2rem;
 padding-bottom: 1rem;
 position: relative;
 line-height: 1.2;
}
article li {
 margin: 15px;
}
li p {
 margin: 0.5rem 0 1.5rem 0;
}
article h2::after {
 content: "";
 position: absolute;
 bottom: 0;
 left: 50%;
 transform: translateX(-50%);
 width: 80px;
 height: 4px;
 background: linear-gradient(90deg, #ff8c00, #ff4500);
 border-radius: 2px;
}
.navbar {
 background-color: #0f0f0f;
 color: white;
 padding: 1rem 0;
 position: sticky;
 top: 0;
 z-index: 1000;
}
.nav-container {
 max-width: 1200px;
 margin: 0 auto;
 padding: 0 1rem;
 display: flex;
 justify-content: space-between;
 align-items: center;
}
.logo {
 font-size: 1.5rem;
 font-weight: bold;
 color: white;
 text-decoration: none;
}
.logo .nirvana {
 display: inline-block;
 padding: 1px 3px;
 background-color: #ff9000;
 color: #0f0f0f;
 border: 1px solid #ff9900;
 border-radius: 4px;
}
.nav-right {
 display: flex;
 align-items: center;
 gap: 1rem;
}
.nav-links {
 display: flex;
 gap: 1.5rem;
}
.nav-item {
 position: relative;
}
.dropdown-btn {
 background: none;
 border: none;
 color: white;
 cursor: pointer;
 font-size: 1rem;
 padding: 0.5rem 1rem;
 display: flex;
 align-items: center;
 gap: 0.5rem;
}
.dropdown-btn:hover {
 background-color: #1e1e1e;
 border-radius: 0.375rem;
}
.dropdown-content {
 display: none;
 position: absolute;
 top: 100%;
 left: 0;
 background-color: #1e1e1e;
 min-width: 200px;
 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
 border-radius: 0.375rem;
 z-index: 1000;
 max-height: 80vh;
 overflow-y: auto;
 padding: 8px 0;
}
.dropdown-content::-webkit-scrollbar {
 width: 8px;
}
.dropdown-content::-webkit-scrollbar-track {
 background: #2e2e2e;
}
.dropdown-content::-webkit-scrollbar-thumb {
 background: #484848;
 border-radius: 4px;
}
.dropdown-content a {
 color: white;
 padding: 0.75rem 1rem;
 text-decoration: none;
 display: block;
}
.dropdown-content a:hover {
 background-color: #2f2f2f;
}
.nav-item:hover .dropdown-content {
 margin-top: 1px;
 display: block;
}
.language-selector {
 position: relative;
}
.language-btn {
 background: none;
 border: 1px solid rgba(255, 255, 255, 0.2);
 border-radius: 0.375rem;
 color: white;
 cursor: pointer;
 display: flex;
 align-items: center;
 gap: 0.5rem;
 padding: 0.5rem;
 font-size: 0.9rem;
}
.language-btn:hover {
 background-color: rgba(255, 255, 255, 0.1);
}
.flag-icon {
 width: 22px;
 height: 16px;
 object-fit: cover;
 border-radius: 3px;
 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.language-dropdown {
 display: none;
 position: absolute;
 top: calc(100% + 8px);
 right: 0;
 background-color: #1e1e1e;
 min-width: 160px;
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
 border-radius: 8px;
 z-index: 1000;
 border: 1px solid rgba(255, 255, 255, 0.1);
 padding: 6px;
}
.language-dropdown.active {
 display: block;
}
.lang-option {
 display: flex;
 align-items: center;
 gap: 0.5rem;
 padding: 0.75rem 1rem;
 color: white;
 text-decoration: none;
 border-radius: 6px;
 transition: background-color 0.2s;
}
.lang-option:hover {
 background-color: rgba(255, 255, 255, 0.1);
}
.lang-option.active {
 background-color: rgba(255, 140, 0, 0.2);
}
.language-selector.active .language-dropdown {
 display: block;
 animation: dropdownFade 0.2s ease;
}
@keyframes dropdownFade {
 from {
 opacity: 0;
 transform: translateY(-8px);
 }
 to {
 opacity: 1;
 transform: translateY(0);
 }
}
.main-content {
 max-width: 1200px;
 margin: 0 auto;
 padding: 2rem 1rem;
}
.welcome-banner {
 background-color: #eff6ff;
 padding: 2rem;
 border-radius: 0.5rem;
 margin-bottom: 2rem;
}
.welcome-banner h1 {
 text-align: center;
 color: #1e40af;
 margin-bottom: 1rem;
 font-size: 2rem;
}
.welcome-banner p {
 color: #3b82f6;
}
.menu-icon {
 display: block;
 width: 24px;
 height: 2px;
 background-color: white;
 position: relative;
 transition: all 0.3s ease;
}
.menu-icon::before,
.menu-icon::after {
 content: "";
 position: absolute;
 width: 24px;
 height: 2px;
 background-color: white;
 transition: all 0.3s ease;
}
.menu-icon::before {
 top: -6px;
}
.menu-icon::after {
 bottom: -6px;
}
.close-icon {
 background: transparent;
}
.close-icon::before {
 transform: rotate(45deg);
 top: 0;
}
.close-icon::after {
 transform: rotate(-45deg);
 top: 0;
}
.mobile-menu-btn {
 display: none;
 background: none;
 border: none;
 color: white;
 cursor: pointer;
 padding: 0.5rem;
}
@media screen and (max-width: 500px) {
 .symboltable {
 font-size: xx-small;
 }
}
@media screen and (max-width: 600px) {
 .fstable {
 font-size: 60%;
 }
}
@media (max-width: 768px) {
 .mobile-menu-btn {
 display: block;
 }
 .nav-right {
 gap: 0.5rem;
 }
 .nav-links {
 display: none;
 position: absolute;
 top: 100%;
 left: 0;
 right: 0;
 background-color: #0f0f0f;
 padding: 1rem;
 flex-direction: column;
 }
 .nav-links.active {
 display: flex;
 }
 .nav-item {
 width: 100%;
 }
 .dropdown-content {
 position: static;
 box-shadow: none;
 background-color: #1e1e1e;
 }
 .dropdown-content a {
 color: white;
 }
 .dropdown-content a:hover {
 background-color: #2f2f2f;
 }
}
@media (max-width: 480px) {
 .welcome-banner {
 padding: 1.5rem;
 }
 .welcome-banner h1 {
 font-size: 1.5rem;
 }
}
.search-bar {
 position: relative;
 max-width: 600px;
 margin: 20px auto 0 auto;
}
.search-input {
 width: 100%;
 padding: 16px 16px 16px 20px;
 font-size: 16px;
 border: 2px solid #e0e0e0;
 border-radius: 12px;
 background-color: #fff;
 background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><circle cx="11" cy="11" r="8" stroke="gray" stroke-width="2" fill="none"/><line x1="17" y1="17" x2="22" y2="22" stroke="gray" stroke-width="2"/></svg>');
 background-repeat: no-repeat;
 background-position: right 10px center;
 background-size: 20px 20px;
 box-sizing: border-box;
 transition: all 0.3s ease;
 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.search-input::placeholder {
 color: #888;
 font-size: 16px;
 text-align: left;
}
.search-input:focus {
 outline: none;
 border-color: #ff8c00;
 box-shadow: 0 0 0 4px rgba(255, 140, 0, 0.1);
}
.suggestions-list {
 list-style-type: none;
 margin: 5px 0 0;
 padding: 0;
 background: white;
 border-radius: 12px;
 max-height: 300px;
 overflow-y: auto;
 position: absolute;
 width: 100%;
 z-index: 10;
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.suggestions-list li {
 padding: 12px 20px;
 cursor: pointer;
 transition: background-color 0.2s ease;
}
.suggestions-list li:hover {
 background-color: #f8f8f8;
}
.suggestions-list::-webkit-scrollbar {
 width: 8px;
}
.suggestions-list::-webkit-scrollbar-track {
 background: #f1f1f1;
 border-radius: 4px;
}
.suggestions-list::-webkit-scrollbar-thumb {
 background: #ddd;
 border-radius: 4px;
}
.suggestions-list::-webkit-scrollbar-thumb:hover {
 background: #ccc;
}
.footer-section {
 background-color: #f8f9fa;
 padding: 20px;
 text-align: center;
 font-size: 14px;
 border-top: 1px solid #e0e0e0;
}
.footer-content {
 max-width: 800px;
 margin: 0 auto;
}
.footer-info p {
 margin: 5px 0;
 color: #6c757d;
}
.footer-link {
 text-decoration: none;
 color: #007bff;
}
.footer-link:hover {
 text-decoration: underline;
}
.share-button {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 margin-top: 10px;
 padding: 10px 20px;
 font-size: 14px;
 background-color: #007bff;
 color: white;
 border: none;
 border-radius: 8px;
 cursor: pointer;
 transition: all 0.2s ease;
}
.share-button svg {
 width: 20px;
 height: 20px;
}
.share-button:hover {
 background-color: #0056b3;
 transform: translateY(-1px);
}
.share-button:active {
 transform: translateY(0);
}
.fact {
 background: #f8f9fa;
 padding: 20px;
 margin: 15px 0;
 border-left: 4px solid #3498db;
 border-radius: 4px;
}
.fact:hover {
 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.scroll-to-top {
 position: fixed;
 bottom: 20px;
 right: 10px;
 background-color: #0f0f0f;
 color: lightcyan;
 border: none;
 border-radius: 50%;
 padding: 10px;
 font-size: 20px;
 z-index: 100;
 cursor: pointer;
 transition: background-color 0.3s ease;
 display: none;
}
.sr-only {
 position: absolute;
 width: 1px;
 height: 1px;
 margin: -1px;
 padding: 0;
 border: 0;
 clip: rect(0, 0, 0, 0);
 overflow: hidden;
}