:root {
--primary-color: #0077B6;
--secondary-color: #008bbf;
--text-color: #333;
--light-gray: #f5f5f5;
--white: #fff;
--overlay-bg-color: #E0F2F7;
--shadow: 0 2px 4px rgba(0,0,0,0.1);
--border-color: #ddd;}
html {scroll-padding-top:80px;}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
margin: 0;
padding: 0;
color: var(--text-color);
background-color: var(--light-gray);
line-height: 1.6;}
a {text-decoration: none;
color: var(--secondary-color);}
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: var(--white);
box-shadow: var(--shadow);
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
box-sizing: border-box;}
.site-title {
font-size: 1.5em;
font-weight: 700;
color: var(--primary-color);}
.nav-elements {display: flex;align-items: center;gap: 20px;}
.nav-icons {display: flex;gap: 20px;}
aside[data-ad="true"] {height:300px;}
.icon-button {
background: none;
border: none;
font-size: 1.2em;
cursor: pointer;
color: var(--text-color);
padding: 5px;}
/*cookie-banner*/
#cookie-banner {position: fixed;bottom: 10px;left: 10px;right: 10px;background: #f2f2f2;padding: 15px;border: 1px solid #ccc;font-family: sans-serif;text-align: center;z-index: 9999;}
#cookie-banner p {margin-bottom: 10px;font-size: 12px;color: #333;}
#cookie-banner button {padding: 8px 16px;margin: 0 5px;border: none;border-radius: 4px;color: white;cursor: pointer;font-size: 14px;}
#cookie-banner .accept {background-color: #4CAF50;}
#cookie-banner .reject {background-color: #888;}
.overlay {
display: none;
position: fixed;
background-color: var(--overlay-bg-color);
box-shadow: var(--shadow);
z-index: 1001;
padding: 20px;
box-sizing: border-box;
border-radius: 8px;
transform: translateY(-100%);
transition: transform 0.3s ease-out;
max-height: 90vh;
overflow-y: auto;}
.overlay.active {
display: flex;
transform: translateY(0);}
.overlay-header {
display: flex;
justify-content: flex-end;
margin-bottom: 20px;}
.overlay-close {
background: none;
border: none;
font-size: 1.5em;
cursor: pointer;
color: var(--text-color);
padding: 0;}
.mobile-search-overlay {
top: 65px;
left: 50%;
transform: translateX(-50%) translateY(-150%);
width: calc(100% - 40px);
max-width: 400px;
flex-direction: column;
gap: 15px;}
.mobile-search-overlay.active {display: flex;
transform: translateX(-50%) translateY(0);}
.mobile-search-form-container {display: flex;width: 100%;gap: 10px;}
.mobile-search-input {
flex-grow: 1;
padding: 10px;
border: 1px solid var(--border-color);
border-radius: 5px;
font-size: 1em;
outline: none;
min-width: 0;}
.mobile-search-button {
background-color: var(--primary-color);
color: var(--white);
border: none;
padding: 10px 15px;
border-radius: 5px;
cursor: pointer;
font-size: 1em;
white-space: nowrap;}
.mobile-menu-overlay {
top: 65px;
right: 20px;
width: 250px;
transform: translateX(100%) translateY(0);
transition: transform 0.3s ease-out;
flex-direction: column;}
.mobile-menu-overlay.active {transform: translateX(0) translateY(0);}
.mobile-menu ul {list-style: none;padding: 0;margin: 0;}
.mobile-menu li {margin-bottom: 15px;}
.mobile-menu a {
font-size: 1.2em;
color: var(--text-color);
display: block;
padding: 10px 0;}
.desktop-search {
display: none;
align-items: center;}
.desktop-search-input {
padding: 8px 12px;
border: 1px solid var(--border-color);
border-radius: 5px 0 0 5px;
font-size: 1em;
outline: none;
width: 200px;}
.desktop-search-button {
background-color: var(--primary-color);
color: var(--white);
border: none;
padding: 8px 15px;
border-radius: 0 5px 5px 0;
cursor: pointer;
font-size: 1em;}
.container {
max-width: 1200px;
margin: 80px auto 20px auto;
padding: 0 10px;
display: flex;
gap: 30px;}
.main-content {flex: 1;min-width: 0;}
.article {
background-color: var(--white);
padding: 20px;
border-radius: 8px;
box-shadow: var(--shadow);}
.breadcrumbs {
font-size: 0.9em;
color: #777;
margin-bottom: 15px;}
.breadcrumbs a {color: #777;}
.breadcrumbs a:hover {text-decoration: underline;}
.article h1 {
font-size: 2.2em;
color: var(--primary-color);
margin-top: 0;
margin-bottom: 10px;}
.article-meta {
font-size: 0.9em;
color: #888;
margin-bottom: 20px;}
.article-content img {
max-width: 100%;
height: auto;
display: block;
margin: 20px 0;
border-radius: 5px;}
.article-content p {margin-bottom: 1em;}
.article-content a {text-decoration: underline;}
.table-of-contents {
background-color: var(--white);
padding: 20px;
border-radius: 8px;
box-shadow: var(--shadow);
margin-bottom: 30px;}
.table-of-contents h2 {
font-size: 1.3em;
color: var(--primary-color);
margin-top: 0;
margin-bottom: 15px;}
.table-of-contents ul {list-style: none;padding: 0;margin: 0;}
.table-of-contents li {margin-bottom: 8px;}
.table-of-contents ul ul {list-style: none;padding-left: 20px;margin-top: 5px;}
.table-of-contents a {
color: var(--text-color);
display: block;
padding: 5px 0;}
.table-of-contents a:hover {
color: var(--secondary-color);
text-decoration: underline;}
.toc-toggle-button {
display: none;
background: none;
border: 1px solid var(--border-color);
border-radius: 5px;
padding: 5px 10px;
margin-top: 10px;
cursor: pointer;
font-size: 1em;
color: var(--text-color);
width: 100%;
text-align: center;}
.floating-toc-button {
display: none;
position: fixed;
bottom: 20px;
right: 20px;
background-color: var(--primary-color);
color: var(--white);
border: none;
border-radius: 8px;
padding: 10px 15px;
min-width: 120px;
height: auto;
font-size: 0.9em;
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
box-shadow: var(--shadow);
cursor: pointer;
z-index: 999;}
.floating-toc-button .icon-burger {display: inline-block;font-size: 1.2em;line-height: 1;}
.floating-toc-overlay {top: 65px;
right: 20px;
width: 250px;
transform: translateX(100%) translateY(0);
transition: transform 0.3s ease-out;
flex-direction: column;}
.floating-toc-overlay.active {transform: translateX(0) translateY(0);}
.floating-toc-overlay .overlay-header {margin-bottom: 0;}
.floating-toc-overlay .table-of-contents {
background: none;
box-shadow: none;
padding: 0;
margin-bottom: 0;
flex-grow: 1;
overflow-y: auto;}
.footer {background-color: var(--text-color);
color: var(--white);
padding: 30px 20px;
text-align: center;
margin-top: 40px;}
@media (max-width: 768px) {
.nav-icons {display: flex;}
.desktop-search {display: none;}
.container {flex-direction: column;margin-top: 70px;}
.sidebar {display: none;}
.floating-toc-button {display: flex;}
.table-of-contents#main-toc {display: block;}
.table-of-contents .toc-toggle-button {display: block;}
.table-of-contents.collapsed ul li:nth-child(n+6) {display: none;}
}
@media (min-width: 769px) {
.nav-icons .icon-button:first-child {display: none;}
.desktop-search {display: flex;}
.sidebar {flex: 0 0 280px;
position: sticky;
top: 80px;
align-self: flex-start;
background-color: var(--white);
padding: 20px;
border-radius: 8px;
box-shadow: var(--shadow);
overflow-y: auto;
max-height: calc(100vh - 100px);
display: block;}
.floating-toc-button {display: none;}
.table-of-contents#main-toc {display: none;}
.toc-toggle-button {display: none !important;}}