/* --- ZÁKLADNÍ LAYOUT OD LEO (SpaceHey Style) --- */

body { 
    background: url(https://i.gifer.com/76YS.gif) !important; /* Ten fialový gif na pozadí */
    font-family: 'Josefin Sans', sans-serif;
    color: white;
}

/* Hlavní boxy pro články a menu */
main {
    background: rgba(189, 124, 207, 0.4) !important;
    border-radius: 15px !important;
    border: 2px dotted rgba(241, 190, 255, 1) !important;
    padding: 20px;
    margin: 20px auto;
    color: #ffedf9;
}

/* Nadpisy článků a Wiki nápisy */
h1 {
    font-size: 30px !important;
    font-family: 'Paytone One', sans-serif !important;
    text-transform: uppercase !important;
    /* Fialovo-růžový gradient z layoutu */
    background: -webkit-linear-gradient(#8870ff, #ff70de);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

h2, h3, h4 {
    font-family: 'Paytone One', sans-serif !important;
    text-transform: uppercase !important;
    background: -webkit-linear-gradient(#ff97c1, #fff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Odkazy v menu a v textu */
#odkaz, a {
    color: #ff9ce0 !important;
    font-family: 'Josefin Sans', sans-serif;
    text-decoration: none;
}

#odkaz:hover, a:hover {
    color: white !important;
    text-decoration: underline;
    cursor: url('https://cur.cursors-4u.net/games/images4/gam308.png'), auto !important;
}

/* Marquee (běžící text) */
marquee {
    border: 2px dotted rgba(241, 190, 255, 1) !important;
    background: rgba(171, 118, 207, 0.4);
    color: white;
    padding: 5px;
    border-radius: 10px;
}

/* Animace floating pro nadpisy a loga */
@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 5px); }
    100%   { transform: translate(0, -0px); }   
}

h1, img[alt="prdelka"], .menu { 
    animation: floating 3s infinite ease-in-out;
}

/* Kurzor pro celou stránku */
* {
    cursor: url('https://cur.cursors-4u.net/symbols/sym-2/sym189.png'), auto !important;
}

/* Sekce kontaktů/autorů (použití stylů z layoutu) */
.autor {
    display: inline-block;
    background-color: rgba(171, 118, 207, 0.4);
    border: 1px solid rgba(255, 161, 207, 0.5);
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 12px;
}

/* --- OPRAVA ROZVRŽENÍ --- */

/* Obal pro všechno pod nadpisem h2, aby menu a články byly vedle sebe */
.main-content-wrapper {
    display: flex; /* Toto dá prvky vedle sebe */
    align-items: flex-start; /* Zarovná je k hornímu okraji */
    gap: 20px; /* Mezera mezi menu a články */
    max-width: 1200px;
    margin: 0 auto;
}

/* Úprava MENU, aby bylo sticky */
.menu {
    width: 250px; /* Pevná šířka menu */
    position: -webkit-sticky; /* Pro Safari */
    position: sticky;
    top: 20px; /* Vzdálenost od horního okraje obrazovky při scrollování */
    flex-shrink: 0; /* Menu se nebude smršťovat */
    
    /* Tvůj původní styl z layoutu */
    background: rgba(189, 124, 207, 0.4) !important;
    border: 2px dotted rgba(241, 190, 255, 1) !important;
    padding: 15px;
    border-radius: 15px;
}

/* Úprava ČLÁNKŮ, aby vyplnily zbytek místa */
.clanek {
    flex-grow: 1; /* Článek zabere zbytek šířky */
    background: rgba(189, 124, 207, 0.4) !important;
    border: 2px dotted rgba(241, 190, 255, 1) !important;
    padding: 20px;
    border-radius: 15px;
}

/* Oprava ID odkazů - ID by mělo být unikátní, ale pro CSS to nevadí. 
   Lepší je však v CSS cílit na odkazy uvnitř menu takto: */
.menu a {
    display: block; /* Každý odkaz na nový řádek */
    margin-bottom: 5px;
    color: #ff9ce0 !important;
    text-decoration: none;
}

.menu a:hover {
    text-decoration: underline;
    color: white !important;
}

/* LEVÉ MENU */
.menu {
    float: left;           /* Toto prvek posune doleva a dovolí ostatním být vedle něj */
    width: 200px;          /* Musíme definovat šířku */
    position: sticky;      /* Toto ho udrží na místě při scrollování */
    top: 20px;
    z-index: 100;          /* Aby bylo menu vždy nahoře */
    
    /* Tvůj původní styl */
    background: rgba(189, 124, 207, 0.4) !important;
    border: 2px dotted rgba(241, 190, 255, 1) !important;
    padding: 15px;
    border-radius: 15px;
}

/* SEKCE S ČLÁNKY */
.clanek {
    margin-left: 250px;    /* Musí být větší než šířka menu + mezera */
    
    /* Tvůj původní styl */
    background: rgba(189, 124, 207, 0.4) !important;
    border: 2px dotted rgba(241, 190, 255, 1) !important;
    padding: 20px;
    border-radius: 15px;
}

/* ČISTIČ (Důležité!) */
/* Po použití floatu musíme "uklidit", aby zbytek stránky pod tím (třeba footer) neblbnul */
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}