:root { --dark: #191820; --darker: #121117; --white: #ffffff; --primary: #2b10ed; --secondary: #ffbe63; --ternary: #c0b7fa; --ternary-darker: #726d92; --error: #ef4444; --br-1: 4px; --br-2: 8px; --br-3: 12px; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: "Roboto", sans-serif; font-size: 14px; background: var(--dark); color: var(--white); height: 100dvh; display: grid; grid-auto-columns: 300px 1fr; grid-template-rows: 60px 1fr; } img { width: 100%; } a { color: var(--ternary); } ::-webkit-scrollbar-track { background: var(--ternary-darker); padding: 2px; } ::-webkit-scrollbar-thumb { background: var(--ternary); border-radius: var(--br-1); } ::-webkit-scrollbar-thumb:hover { background: var(--white); } .container { margin: 0 auto; padding: 0 1rem; margin-top: 1rem; width: 100%; } @media (max-width: 599px) { .container { max-width: 100%; } } @media (min-width: 600px) and (max-width: 1023px) { .container { max-width: 540px; } } @media (min-width: 1024px) and (max-width: 1299px) { .container { max-width: 850px; } } @media (min-width: 1300px) { .container { max-width: 1024px; } } .text-center { text-align: center; }.button { font-family: "Roboto", sans-serif; background: var(--primary); color: var(--white); border: none; padding: 1rem 1.8rem; cursor: pointer; border-radius: var(--br-2); font-weight: bold; } .small-button { padding: 0.5rem 1rem; white-space: nowrap; } .button:disabled { opacity: 30%; cursor: default; }.header { z-index: 9999; display: block; background: var(--dark); grid-column: 1 / 3; grid-row: 1 / 2; } .header-container { display: flex; justify-content: space-between; align-items: center; padding: 1rem 4rem; height: 100%; border-bottom: 1px solid var(--ternary); } .header-container .toggle-sidebar { width: 1rem; display: none; cursor: pointer; } .header-container .logo { width: 128px; }.sidebar { z-index: 9999; grid-column: 1 / 2; grid-row: 2 / 3; padding: 2rem 1rem; border-right: 1px solid var(--ternary); background: var(--dark); padding-bottom: 4rem; overflow-y: scroll; transition: transform 0.3s ease; } .sidebar .button { display: none; } .sidebar .search-bar { display: flex; align-items: center; background: var(--dark); border: 2px solid var(--ternary-darker); padding: 0.25rem 0.5rem; border-radius: var(--br-2); } .sidebar .search-bar .search-input { background: var(--dark); border: none; padding: 0.25rem 0.5rem; border-radius: var(--br-1); width: 100%; color: var(--white); } .sidebar .search-bar .search-icon { display: block; width: 14px; margin-right: 0.5rem; } .sidebar .search-bar .search-input:focus { outline: none; } /* Sub Content */ .sidebar .sub-content { margin-top: 1.25rem; } .sidebar .sub-content .content-title, .sidebar .sub-content .content-list li { padding-left: 0.5rem; } .sidebar .sub-content .content-title { padding-block: 0.5rem; text-transform: uppercase; font-weight: bold; } .sidebar .sub-content .content-list { list-style: none; padding-left: 0; display: flex; flex-direction: column; color: rgba(255, 255, 255, 0.6); } .sidebar .sub-content .content-list li { padding-block: 0.5rem; border-radius: var(--br-2); } .sidebar .sub-content .content-list li.active { background-color: var(--primary); } .sidebar .sub-content .content-list li a { color: var(--ternary-darker); text-decoration: none; transition: all 250ms ease-out; } .sidebar .sub-content .content-list li a:hover { color: var(--white); text-decoration: underline; } .sidebar .sub-content .content-list li.active a { color: var(--white); font-weight: bold; }.footer { display: flex; justify-content: center; align-items: center; padding-block: 1rem; margin-top: 2rem; }.error { color: var(--error); } .auth { grid-column: 1 / 3; grid-row: 2 / 3; min-height: calc(100vh-70px); } .login { height: 100%; display: flex; justify-content: center; align-items: center; } .login form { max-width: 500px; border: 1px solid var(--ternary-darker); border-radius: 1rem; padding: 2.5rem; display: flex; flex-direction: column; gap: 1.25rem; margin: 0 auto; } .login form h1 { font-size: 1.5rem; line-height: auto; } .login form button { width: fit-content; } .login form .form-input { display: flex; flex-direction: column; gap: .5rem; } .login form .form-input input { display: block; width: 100%; border-radius: .5rem; border: 2px solid var(--ternary-darker); padding: .5rem 1.25rem; background: var(--dark); color: var(--white); } .login form .form-input input:placeholder { font-size: 12px; }.table-container { max-height: 50vh; overflow-x: auto; overflow-y: auto; } .table { border-collapse: collapse; width: 100%; } .table thead { position: sticky; top: 0; z-index: 10; background: var(--dark); } th, td { border-bottom: 1px solid var(--ternary-darker); padding: 0.5rem 1rem; text-align: left; }.chart-container { position: sticky; top: 0; z-index: 20; margin-top: 1rem; background: var(--dark); padding-block: 1rem; } .tooltip { padding: .5rem; } .search-input { display: block; width: 250px; border-radius: .5rem; border: 2px solid var(--ternary-darker); padding: .5rem 1.25rem; background: var(--dark); color: var(--white); }.markdown-content { line-height: 1.5rem; margin-bottom: 2rem; } .markdown-content h1 { margin-block: 2rem; line-height: 2.25rem; font-size: 36px; } .markdown-content h3 { margin-block: 1rem; font-size: 18px; color: var(--secondary); } .markdown-content p { margin-block: 1.25rem; } .markdown-content img { display: block; margin-block: 1rem; border-radius: var(--br-2); width: 60%; margin: 1rem auto; } .markdown-content blockquote { border-left: 2px solid var(--ternary); padding-left: 1rem; font-style: italic; } .markdown-content ol, .markdown-content ul { padding-left: 2rem; }.content { grid-column: 2 / 3; grid-row: 2 / 3; overflow-y: scroll; display: flex; flex-direction: column; }@media (max-width: 768px) { .header-container { padding: 1rem; } .header-container .toggle-sidebar { display: block; } .header-container .button { display: none; } .sidebar { transform: translateX(-100%); } .sidebar.active { display: block; grid-column: 1 / 3; grid-row: 2 / 3; transform: translateX(0); z-index: 99; } .sidebar .button { display: block; } .content { grid-column: 1 / 3; grid-row: 2 / 3; } .markdown-content img { display: block; margin-block: 1rem; border-radius: var(--br-2); width: 90%; margin: 1rem auto; } .login form { max-width: 350px; } }