/*--------------- import czcionki --------------*/

@import url('https://fonts.googleapis.com/css2?family=Pirata+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Alike+Angular&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Tagesschrift&display=swap');


/*------------------- zmienne --------------*/
:root {
    /* oryginały */
    --bezowy:  #FFE4B8;
    --bezowa-tinta: #FEF3E2;
    --rozwodniona-tinta: #FEF8ED;
    --ceglasty:  #D47358;
    --main_text: black;
    --nabialym: black;

    /* 75% opacity */
    --bezowy-75: rgba(255, 228, 184, 0.50);
    --bezowa-tinta-75: rgba(254, 243, 226, 0.50);
    --rozwodniona-tinta-75: rgba(254, 248, 237, 0.50);
    --ceglasty-75: rgba(212, 115, 88, 0.75);
    --main_text-75: rgba(0, 0, 0, 0.75);
    --nabialym-75: rgba(0, 0, 0, 0.75);
    --bialy-75: rgba(255, 255, 255, 0.50);
}



:root {
    --heading-font-size: 3em;
}


/*------------------- mały reset css --------------*/
html {
    font-size: 20px;

}

body {
    background-color: var(--bezowa-tinta) !important;
    background: url("papier_tlo.jpg") repeat;
    color: var(--main_text);
    font-family: Calibri, Arial, sans-serif;
    font-size: 1rem; /* tyle wynosi 1rem dla strony */
    margin: 0;
    padding: 0;
    height: 100vh;
    box-sizing: border-box;
    line-height: 1.5;
    text-wrap: pretty;

}
a {
  text-decoration: none;
  color: black;
}

/*------------------- główny kontener --------------*/
#mainDiv {
    display: block;
    padding: 0;
    width: 80%;
    margin: 0 auto;
    max-width: 900px; /* zamiast min-width */
    
}

/*------------------- naglowek i stopka--------------*/


header {
  display: block;
/*  width: 80%;                */
   padding: 0;
  margin: 0 auto;
  background: url("tlo_czolo.jpg") right center/cover no-repeat;
    
/*     border-bottom: 4px solid var(--ceglasty);  linia na całą szerokość */


}

header div#flexcontainer {
    min-height: 50vh;
    display: flex; justify-content: flex-start; align-items: center;
    margin: 0 auto;
    max-width: 900px; /* zamiast min-width */
    padding: 0;
    /*background: blue;*/
}

div#miniflex {
    display: flex; flex-direction: column;
}

header .header-content {
  display: block;
  padding: 0;
  width: 100%;                  
  margin: 0 auto;              
  max-width: 900px;
    
  
}

header div img {
  height: auto;
  max-width: 20%;             /* dopasowanie do kontenera */
  margin: 0; padding: 0;
}

header p {
  font-size: clamp(1rem, 4vw, 2rem);
  margin: 0 10px;
    padding: 0;
  text-align: left;
  color: var(--bezowa-tinta);
    line-height: 1;
    

}

header p:first-of-type {
    font-size: clamp(2rem, 6vw, 4rem);
    font-weight:bold;
}


/* --- stopka --- */
footer {
    background-color: var(--bezowy-75);
    text-align: center;
}

footer p {
    display: inline;
    padding: 0.5em;
}

.karta{
    
}

footer p a {
    background: white;
    padding: 0.1em;
    padding-left: 1em;
    padding-right: 1em;
    border-radius: 50px;
}

footer p a:hover {
    background: var(--ceglasty);
    color: white;
}

footer p#podpis {
    float: right;
    font-size: 0.5em;
    vertical-align: middle;
    padding: 0.5em;
    
}

/*------------------- zawartosc strony ------------------*/

div#mainDiv p:first-of-type{
    margin-top: 2em;
}    

div#mainDiv section {
    padding-bottom: 1em;
}

div#mainDiv section:nth-of-type(odd) {
/*    background: var(--rozwodniona-tinta-75);*/    
    background: none;
    } 

div#mainDiv section:nth-of-type(even) { 
    background: var(--bezowa-tinta-75);
    }

h1 {
    background-color: var(--bezowy-75);
/*    line-height: 0.5;*/
    padding: 0.2em;
    padding-top: 0.1em;
    padding-bottom: 0;
    font-family: "Pirata One", system-ui;
    font-size: clamp(3rem, 6vw, 4rem);
    line-height: 0.9;
    font-weight: normal;
    border-bottom: 6px solid var(--ceglasty-75);
    border-left: 18px solid var(--ceglasty-75);
    border-top-left-radius: 30px;
    border-bottom-right-radius: 30px;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    clear: left;
    }

h2 {
    display: block;
/*    background-color: var(--bezowy);*/
    line-height: 1.5;
    padding: 0.25em;
    padding-right: 0.5em;
    /*padding-left: 0.5em;*/
    font-size: clamp(1.2rem, 3vw, 1.8rem);
    font-style: normal;
    font-family: "Tagesschrift", sans-serif;
/*
    border-bottom: 2px solid var(--ceglasty);
    border-left: 18px solid var(--ceglasty);
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
*/
    border-bottom: 2px solid var(--ceglasty-75);
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    clear: left;
    }

h3 {/*background-color: var(--bezowy);*/
    display: inline-block;
    line-height: 1.5;
    padding: 0.25em;
    padding-right: 0.5em;
    padding-left: 0.5em;
    font-style: normal;
    font-family: "Tagesschrift", sans-serif;
    /*border-left: 12px solid var(--ceglasty);
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;*/
    margin-top: 0.5em;
    margin-bottom: 0.1em;
    /*margin-left: 6px;*/
    clear: left;
    }

p  {
    display: block;
    padding: 0px;
    padding-left: 0.5em;
    margin-top: 0px;
    margin-bottom: 0.5em;
    hyphens: auto;
    color: var (--main_text);
    orphans: 2; widows: 2;

    }

p#kosteczki span {
    font-weight:600;
    font-size:0.7em;
    background: var(--bialy-75);
    padding: 5px;
    border-radius: 50px;
    line-height:2.5;
}

p.cytat {
    font-style: italic;
    padding-left: 30%;
    font-family: Georgia, Times, serif;
    margin-bottom: 0px;
    hyphens: none;
    }

p#podpis {
    margin-top: 0px;
    padding-top: 0px;
    text-align: right;
    margin-bottom: 0.5em;
}

ul {
    margin-bottom: 0px;
    margin-top: 0px;
    line-height: 1,5;
}
ul li {
    margin-top: 0.5em;
    margin-bottom: 0.2em;
}
ul li:first-child {
    margin-top: 0;
    margin-bottom: 0.2em;
}

li::marker {
  color: var(--ceglasty-75);
}

img {
/*    background: red;*/
    display: inline;
    float: right;
    margin: 0px;
    margin-left: 2em;
    max-width: 100%; 
/*    width: auto;*/
    height: auto;    
/*    margin-right: -50px;*/
}

div.obejma {
    display: flex;
    flex-direction: row;           /* elementy w pionie */
    justify-content: flex-start;   /* zawartość przy lewej krawędzi */
    align-items: flex-start;
     flex-wrap: wrap;
    clear: both;
    width: 100%;
    height: auto;
}


div.monsterek p, div.npc p{
    margin-top: 0.5em !important;
    margin-left: 10px;
    border-bottom: 2px dotted var(--ceglasty-75);
}



div.npc, div.monsterek {
    display: inline-flex;          /* inline-flex zamiast flex → szerokość tylko tyle, ile potrzeba */
    flex-direction: row;           /* elementy obok siebie w poziomie */
    justify-content: flex-start;   /* zawartość przy lewej krawędzi */
    align-items: flex-start;
    background-color: var(--bialy-75);
    margin: 10px 0 20px 0; 
    padding: 10px;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
    color: var(--nabialym);
}

div.monsterek {
    flex-direction: column-reverse;
    margin: 10px;
}

/* Lista cech NPC po lewej */
div.npc ul {
    margin: 10px;
    padding: 0;
    list-style-position: inside;
}

/* Obrazek NPC po prawej */
div.npc img, div.monsterek img {
    margin: 10px;
    height: auto;
    min-height: 170px;
    max-width: 150px;              /* ograniczenie, żeby nie rozciągał się ponad swoją rozdzielczość */
    object-fit: contain;
    order: 2;                      /* wymusza pozycję po prawej */
}

/* Lista zawsze po lewej */
div.npc ul {
    order: 1;
    list-style-position: outside; /* marker na zewnątrz */
    margin: 0;
    padding-left: 2em;            /* miejsce na marker */
}

div.npc li {
    text-indent: -1em;            /* ujemny indent dla zawijanych linii */
    padding-left: 1em;            /* wyrównanie pierwszej linii */
}


#last {
    clear: right;
}

/*------------układanie tabelek-------------*/
table {
    margin-left: 20px;
}


table tr td:first-child {
/*    background: var(--ceglasty);*/
    padding-left: 10px;
    padding-right: 10px;
}

table {
    border-collapse: collapse;
    border-style: hidden;
}

table td, table th {
    border: 2px dotted var(--ceglasty-75);
}
/*------------koniec o tabelkach-------------*/
.clearleft{
    clear: left;
}
/*------------powrot do szczytu strony-------------*/
#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 40px;
  border: none;
  outline: none;
  background-color: white;
  color: gray;
  cursor: pointer;
  padding-top: 16px;
padding-bottom: 16px;
    padding-left: 24px;
    padding-right: 24px;
  border-radius: 100px;
    font-style: bold;
}

#myBtn:hover {
  background-color: darkred;
}

/*------------zmiany szerokosci strony-------------*/
@media (max-width: 1000px) {
    #mainDiv, div#flexcontainer {
    margin-left: 5%;
    margin-right: 5%;
    width: 90%;
/*    min-width: 700px;*/
    }
    div.monsterek {
        flex-direction: row;
    }
    
    
}

@media (max-width: 800px) {
    #mainDiv, div#flexcontainer {
        margin-left: 2.5%;
        margin-right: 2.5%;
        width: 95%;
    /*    min-width: 450px;*/
    }
}

@media (max-width: 420px) {
    div.monsterek, div.npc {
        flex-direction: column-reverse;
    }
    header div#flexcontainer {
    min-height: 33vh;
}

}