:root {
/* Barvy - nedefinované weby = ještě musíme poladit */
    --background-color: #111; /*222222*/
    --background-gradient-color: #111; /*300800*/
    --background-color-header: #111; /*181818*/
    --background-color-footer: #111; /*040404*/
    --background-color-sidebar: #111; /*222222*/
	--background-color-plugins: #111; /*181818*/
    --alternate-background-color: #111; /*2a2a2a*/
	--button-top-color: #111;
	--button-top-color-hover: #111;
    --error-text-color: #f22; /*e03e2d*/
    --text-color: #eee; /*fafafa*/
    --form-color: #111; /*fafafa*/
    --metadata-color: #111; /*fa3333*/
    --link-color: #111; /*fa6a0a*/
    --link-hover-color: #111; /*faaa0a*/
    --link-active-color: #111; /*fa6a0a*/
	--pagination-background-active: #111;
	--neon-color: #111;
	--black: #111;
	--spam: #111;
/* Průhlednost */
	--opacity-25: 0.25;
	--opacity-50: 0.50;
	--opacity-75: 0.75;
	--background-opacity: 0.25; /*0.25*/
	--background-opacity-header: 1.0; /*1.0*/
	--background-opacity-footer: 0.9; /*0.9*/
	--background-opacity-sidebar: 1.0; /*1.0*/
/* Rozložení */
	--margin: 10px;
	--padding: 5px;
	--radius: 15px;
	--menuitem-border-color: #111;
	--menuitem-background-color: var(--link-hover-color);
	--menuitem-color: var(--link-color);
}

/* Světlé téma */
.svetle-tema {
    --background-color: #dadada; /* Světle šedá pro jemné pozadí */
    --background-gradient-color: #444444; /* Neutrální béžová */
    --background-color-header: #d8c3a5; /* Tlumená béžová */
    --background-color-footer: #111111; /* Středně šedá, dodá vážnost */
    --color-footer: #fafafa; /* Středně šedá, dodá vážnost */
    --background-color-sidebar: #ececec; /* Velmi světle šedá */
    --background-color-plugins: #e8e8e8; /* Jemná šedá pro pluginy */
    --alternate-background-color: #ffffff; /* Čistě bílá pro kontrastní pozadí */
	--button-top-color: #880000;
	--button-top-color-hover: #eeeeee;
    --error-text-color: #d9534f; /* Červená, zůstává pro chyby */
    --text-color: #111111; /* Tmavě šedý text pro čitelnost */
    --form-color: #111111; /*fafafa*/
    --metadata-color: #555555; /* O něco světlejší šedá pro metadata */
    --link-color: #cc0000; /*fa6a0a*/
    --link-hover-color: #111111; /*faaa0a*/
    --link-active-color: #fafa6a; /*fa6a0a*/
    --pagination-background-active: #0077cc; /* Středně modrá pro aktivní stránkování */
    --neon-color: #ffa500; /* Oranžová pro neonový efekt, dodává energii */
    --black: #eeeeee; /* Černá zůstává černá */
    --spam: #ff3333; /* Červená pro spam */
    --tooltip: #fafafa; /* Bílá pro tooltip */
    --opacity-25: 0.1;
    --opacity-50: 0.25;
    --opacity-75: 0.5;
    --background-opacity: 0.1;
    --background-opacity-header: 0.95;
    --background-opacity-footer: 0.95;
    --background-opacity-sidebar: 0.95;
    --margin: 10px;
    --padding: 5px;
    --radius: 15px;
	--menuitem-border-color: #ff8800;
	--menuitem-background-color: var(--link-hover-color);
	--menuitem-color: var(--link-color);
}

.tmave-tema {
/* Barvy */
    --background-color: #222222; /*222222*/
    --background-gradient-color: #040404; /*300800*/
    --background-color-header: #181818; /*181818*/
    --background-color-footer: #111111; /*040404*/
    --color-footer: #fafafa; /* Středně šedá, dodá vážnost */
    --background-color-sidebar: #222222; /*222222*/
	--background-color-plugins: #181818; /*181818*/
    --alternate-background-color: #2a2a2a; /*2a2a2a*/
	--button-top-color: #fa4a2a;
	--button-top-color-hover: #eeeeee;
    --error-text-color: #fa6a2a; /*e03e2d*/
    --text-color: #fafafa; /*fafafa*/
    --form-color: #fafafa; /*fafafa*/
    --metadata-color: #fa3333; /*fa3333*/
    --link-color: #fa4a2a; /*fa6a0a*/
    --link-hover-color: #fdda66; /*faaa0a*/
    --link-active-color: #fafa6a; /*fa6a0a*/
	--pagination-background-active: #faaa0a;
	--neon-color: #dd8833;
	--black: #111111;
	--spam: #ff6666;
    --tooltip: #fafafa; /* Bílá pro tooltip */
/* Průhlednost */
	--opacity-25: 0.25;
	--opacity-50: 0.50;
	--opacity-75: 0.75;
	--background-opacity: 0.25; /*0.25*/
	--background-opacity-header: 1.0; /*1.0*/
	--background-opacity-footer: 0.9; /*0.9*/
	--background-opacity-sidebar: 1.0; /*1.0*/
/* Rozložení */
	--margin: 10px;
	--padding: 5px;
	--radius: 15px;
	--menuitem-border-color: #ff8800;
	--menuitem-background-color: var(--link-hover-color);
	--menuitem-color: var(--link-color);
}

*, *::before, *::after {transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, fill 0.15s ease;}

/* TĚLO - NA TO POZADÍ JSEM HRDEJ :-P */
body {margin: 0; color: var(--text-color); display: flex; flex-direction: column; min-height: 100vh; font-size: clamp(18px, 1.5vw, 24px); background: var(--background-gradient-color); background-position: center; background-repeat: no-repeat; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; background-attachment: fixed;}


/* NASTAVENÍ STYLU SCROLLBARU NA ZÁKLADĚ BAREVNÉHO SCHÉMATU*/
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--background-color); border-radius: 10px; }
::-webkit-scrollbar-thumb { background: var(--neon-color); border-radius: 10px; border: 2px solid var(--black); box-shadow: 0 0 5px var(--neon-color), 0 0 10px var(--neon-color); }
::-webkit-scrollbar-thumb:hover { background: lighten(var(--neon-color), 10%); }
::-moz-scrollbar { width: 12px; }
::-moz-scrollbar-track { background: var(--background-color); }
::-moz-scrollbar-thumb { background: var(--neon-color); border-radius: 10px; }



/* OBARVENÍ A NASTYLOVÁNÍ ODKAZŮ */
a {color: var(--link-color); text-decoration: none; font-weight: 500;}
a:hover {color: var(--link-hover-color); text-decoration: none;}
.menuitem:hover{text-decoration: none; border: none; border-color: var(--menuitem-border-color); border-radius: var(--radius); background-color: var(--menuitem-background-color); color: var(--menuitem-color); transition: 0.66s;}

/* HR TAG*/
hr {border: 0; border-top: 1px solid var(--metadata-color); opacity: var(--opacity-75); border-bottom: 1px solid var(--metadata-color); opacity: var(--opacity-75); background-color: var(--link-color); height: 2px;}

/*KONTEJNER = CELÝ WEB */
.container {max-width: 1800px; margin: 0 auto; padding: var(--padding) var(--padding) var(--padding); flex: 1;}

/* HLAVIČKA */
header {display: flex; justify-content: space-between; align-items: center; width: 100%; background-color: var(--background-color-header); opacity: var(--background-opacity-header); margin-bottom: var(--margin); padding: var(--padding) 0; z-index: 1000; flex-wrap: wrap; font-size: clamp(16px, 1.5vw, 22px); border-radius: var(--radius);}

/* LOGA - JSOU DVĚ */
.logo-container {display: flex; justify-content: left; align-items: center; flex: 1;}
.logo {height: 80px; margin-left: var(--margin);}

/* HORNÍ MENU */
.menu {display: flex; justify-content: flex-end; flex: 1;}
nav {margin: var(--margin);}
nav a {color: var(--link-color); padding: var(--padding); text-decoration: none; text-transform: uppercase;}

.content {display: flex; flex-wrap: wrap; flex: 1;}

.box{margin-left: auto; margin-right: auto; display: block; position: relative; align-items:center; justify-content: center; border: 3px solid; border-radius: var(--radius); box-shadow: -2px -2px 6px 6px #002244;}

.main {flex: 1; margin-right: var(--margin); min-width: 300px; background-color: none;  border-radius: var(--radius);}

/* SIDEBAR */
.sidebar {width: 280px; min-width: 280px; background-color: none; opacity: var(--background-opacity-sidebar); border-radius: var(--radius);}

/* PLUGINY V SIDEBARU */
.plugins { margin: var(--margin) var(--margin) var(--margin) var(--margin); background-color: var(--background-color-plugins); border-radius: var(--radius);}

/* PATIČKA */
footer {width: 100%; color: var(--color-footer); background-color: var(--background-color-footer); opacity: var(--background-opacity-footer); padding: var(--padding) 0; text-align: center; position: fixed; bottom: 0; left: 0; right: 0; font-size: clamp(12px, 1.5vw, 16px);}

/* STRÁNKOVÁNÍ */
.pagination {margin-top: var(--margin); text-align: center;}
.pagination a {color: var(--link-color); padding: var(--padding) var(--padding); text-decoration: none;}
.pagination a:hover {background-color: var(--link-color); color: var(--pagination-background-active); padding: var(--padding) var(--padding); text-decoration: none;}
.current-page-no {background-color: var(--pagination-background-active); color: var(--link-color);}

/* ZOBRAZENÍ ČLÁNKŮ */
.article-preview {align-tiems: center; justify-content: center; }
.article-content {padding: var(--padding); color: var(--text-color); background-color: var(--alternate-background-color); justify-content: center;  border-radius: var(--radius);}
.article-preview-image{float: left;	max-height: 150px; margin-right: var(--margin);}
.article-content img {display: block; margin: 0 auto; max-width: 99%;}
.category-list {margin-top: var(--margin); margin-left: var(--margin);}
.metadata {color: var(--metadata-color); font-weight:500;}

/* ODKAZY ČLÁNKŮ */
.article-link {text-decoration: none; color: var(--link-color);}
.article-link:hover {color: var(--link-hover-color);}

/* ODKAZY KATEGORIÍ */
.category {text-align: center;}
.category-link{color: var(--link-color);}
.category-link:hover{color: var(--link-hover-color);}

.smile {display: inline !important; margin: 0 !important; vertical-align: middle !important; width: clamp(18px, 1.5vw, 24px); height: clamp(18px, 1.5vw, 24px);}

/* SKRYTÝ OBSAH */
.hid, .hidden{display: none !important;}

/* STYL VŠECH TABULEK NA WEBU */
table {background-color: #111111; font-weight: 600; empty-cells: show; border: 1px solid #fafafa; width: 100%; font-size: 0.9em;}
thead {color: #aaaaaa; text-align: center; vertical-align: bottom;}
tr {display: table-row; vertical-align: inherit; border-color: inherit;}
th, td {color: #111111; padding: 0.5em 1em;}
table {border: 2px solid; border-spacing: 0px; border-collapse: separate; border-color: #888888; color: #dddddd;}
th{border: 2px solid; text-align: center; background-color: #555555; border-color: #888888}
td{border: 1px solid; background: none; text-align: center; vertical-align: middle; border-spacing: 5px; border-color: #888888; transition: 0.5s; padding: 8px;}
tr:hover td{ color: #dddddd; background-color: #333333;}
caption{display: table-caption; text-align: center; font-size: 24px; font-weight: 600; caption-side: top; color: #cccccc;}

button{text-transform: uppercase;}

/* CHYBOVÉ HLÁŠKY */
.error-text{color: var(--error-text-color);}

/* VYCENTROVÁNÍ TEXTŮ */
.center{justify-content: center; text-align: center;}

/* UPPERCASE A CAPITALIZE*/
.ucs{text-transform: uppercase;}
.cpt{text-transform: capitalize;}

/* TLAČÍTKO PRO ODROLOVÁNÍ ZPĚT NAHORU */
.nahoru {position: fixed; bottom: 0px; right: 10px; padding: var(--padding); font-size: 32px; background-color: var(--button-top-color); color: var(--button-top-color-hover); border: none; border-radius: var(--radius); cursor: pointer; display: none; z-index: 1000; width: 48px; heighr: 48px;}
.nahoru:hover {color: var(--button-top-color); background-color: var(--button-top-color-hover);}


/* TLAČÍTKO PRO ZMĚNU TÉMATU */
.zmena-tema {position: fixed; bottom: 0px; left: 10px; padding: var(--padding); font-size: 24px; background-color: var(--button-top-color); color: var(--button-top-color-hover); border: none; border-radius: var(--radius); cursor: pointer; z-index: 1000; width: 48px; height: 48px;}
.zmena-tema:hover {color: var(--button-top-color); background-color: var(--button-top-color-hover);}


/* TAG DIV LOGIN*/
.login {color: var(--text-color); background-color: var(background-color); padding: var(--padding); border-radius: var(--radius); box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); width: calc(100% - 10px);}


/* NEON */
.neon {padding: var(--padding); border: 2px solid var(--neon-color); box-shadow: 0 0 5px var(--neon-color), 0 0 15px var(--neon-color); border-radius: var(--radius);}/* NEON */
.noneon {padding: var(--padding); border: 2px solid var(--neon-color); border-radius: var(--radius); background-color: var(--black);}


/* PŘIHLAŠOVACÍ FORMULÁŘ */
input[type="url"], input[type="email"], input[type="text"], input[type="password"], button {width: 100%; padding: var(--padding); margin: var(--margin) 0; border: 1px solid var(--color-text); border-radius: 4px; box-sizing: border-box; font-size: 14px; background-color: var(--black); color:var(--neon-color);}
input[type="url"]:focus, input[type="email"]:focus, input[type="text"]:focus, input[type="password"]:focus {border-color: var(--color-link); outline: none;}
button {background-color: var(--link-color); color: var(--link-hover-color); border: none; cursor: pointer; transition: background-color 0.3s;}
button:hover {color: var(--link-color); background-color: var(--link-hover-color);}
#filename{width: 100%; background-color:  #444444; color: var(--text-color); text-align: center;}

#jmeno, #email, #web, #vzkaz{color: var(--form-color); background-color: var(--black); font-weight: 600;}

/*EDITOR OVERRIDE!!!*/
editor{width: 100% !important;}
.jodit__preview-box, .jodit-wysiwyg, .jodit-container{background-color: var(--background-color) !important;}
.ace_content{font-size: 18px !important;}



.tooltip {border: none; cursor: pointer; background-color: var(--background-color-footer); color: var(--link-color);}
.tooltip:hover {background-color: var(--background-color-footer); color: var(--tooltip);}
.tooltip:after {content: attr(data-tooltip); position: absolute; bottom: 125%; left: 50%; transform: translateX(-50%); text-align: center; visibility: hidden; opacity: 0; transition: opacity 0.2s; background-color: var(--background-color-footer); font-size: 20px; color: var(--tooltip);}
.tooltip:hover:after {visibility: visible; opacity: 1;}


/* SHOUTBOX */ 
.shoutbox {width: 100%; align-items: center; justify-content: left;}
.shoutbox-form {max-width: 100%; margin: 0 auto; padding: var(--padding); border: 2px solid var(--neon-color); border-radius: 5px;}
.shoutbox-form form {display: flex; flex-wrap: wrap;}
.shoutbox-form input[type="text"], .shoutbox-form input[type="email"], .shoutbox-form input[type="url"] {flex: 1; margin: var(--margin); min-width: 200px; text-align: center; border-radius: 4px; box-sizing: border-box; color: white; background-color: var(--black);}
.shoutbox-form textarea {width: 100%; height: 100px; margin-top: 10px; color: white; background-color: var(--black);}
.shoutbox-form label {display: block; margin-top: 10px;}
.shoutbox-messages {border: 2px solid var(--neon-color); padding: var(--padding); max-height: 800px; overflow-y: scroll; }
.message {width: 100%; border-bottom: 2px solid var(--neon-color); padding: 5px 0; }
.message:last-child {border-bottom: none;}
.avatar {float: left; margin-left: var(--margin); margin-right:  var(--margin);}
small{font-size: 14px;}
.spam{color: var(--spam); font-size: 14px; margin-left: var(--margin); margin-right: var(--margin);}
.spam-title{font-size: 18px;}
.ipua{margin: var(--margin); padding: var(--padding);}
#shoutbtn{width: 45px;}



/* PŘIZPŮSOBENÍ ZOBRAZENÍ */	
@media (max-width: 768px) {
.content {flex-direction: column;}
.main {margin-right: 0; margin-bottom: var(--margin);}
.sidebar {width: 100%; min-width: auto; order: +1; margin-bottom: var(--margin);}
header {flex-direction: column; align-items: center;}
.menu {justify-content: center; width: 100%;}
.shoutbox-form input[type="text"], .shoutbox-form input[type="email"], .shoutbox-form input[type="url"] {flex-basis: 100%; margin: 5px 0;}


}