html {
  box-sizing: border-box;
}

*, ::before, ::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

body {
    font-family: 'Georgia', serif; /* Klasické písmo pro knihy */
    line-height: 1.6;
    color: #333; /* Tmavě šedá pro lepší čitelnost než čistě černá */
    background-color: #fff; /* Světle šedé pozadí */
}

/* --- Kontejner pro centrování obsahu --- */
.container {
    max-width: 800px; /* Maximální šířka obsahu, aby text nebyl moc dlouhý */
    min-height: 100vh;
    margin: 0 auto; /* Centrování obsahu a mezera nahoře/dole */
    padding: 20px;
    background-color: #fff; /* Bílé pozadí pro obsah */
}

/* --- Styly pro hlavičku a navigaci (pokud ji máš) --- */
.header {
    text-align: center;
    padding: 20px 0;
    background-color: #222; /* Tmavá hlavička */
    color: #eee;
}

.menu__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; /* Pro horizontální menu */
    justify-content: center;
}

.menu__item {
    margin: 0 15px;
}

.menu__link {
    color: #eee;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease; /* Plynulý přechod barvy */
}

.menu__link:hover {
    color: #c92d09; /* Barva při najetí myší (např. červená pro "tragédii") */
}

.menu__link--active {
    color: #c92d09;
}

/* --- Styly pro Hero sekci (kde bude cover) --- */
.hero {
    text-align: center; /* Centrování obrázku a textu */
    padding: 40px 0;
    color: #eee;
}

.hero__image {
    max-width: 100%; /* Maximální šířka coveru, aby nebyl moc velký */
    height: auto; /* Zachová poměr stran */
    display: block;
    margin-bottom: 30px; /* Mezera pod obrázkem */
    border-radius: 5px; /* Lehké zaoblení rohů coveru */
}

.hero__title {
    font-size: 3.2em; /* Větší nadpis pro název knihy */
    margin-bottom: 50px;
    color: #192a34;
    
}

@media (max-width: 600px) {
  .hero__title {
    font-size: 2.2rem; /* nebo třeba 20px */
  }
}

.hero__subtitle {
    font-size: 1.2em; /* Menší nadpis pro autora */
    margin-top: 0;
    margin-bottom: 30px;
    font-style: italic;
    color: #192a34;
}


.welcome__description {
    max-width: 1200px; /* Šířka popisu, aby nebyl moc široký */
    margin: 0 auto 30px auto; /* Centrování a mezera */
    font-size: 1.1em;
    color:#192a34;
}

/* --- Styly pro sekce --- */
.section__title {
    font-size: 1.8em;
    margin: 50px 0;
    text-align: center;
}


/* --- Styly pro tlačítka (CTA) --- */
.btn {
    display: block;
    width: 100px;
    text-align: center;
    background-color: #192a34;
    color: #fff;
    padding: 10px 30px;
    margin: 30px auto;
    text-decoration: none;
    border-radius: 4px;
    font-size: 1em;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn:hover {
    background-color: #c92d09; /* Tmavší červená při najetí */
    transform: translateY(-2px); /* Lehký posun pro interaktivitu */
}

/* --- Styly pro sekci s obsahem / seznamem povídek --- */
.content {
    padding: 40px 0;
    text-align: center;
}

.content__list {
    list-style: none;
    padding: 0;
    max-width: 700px;
    margin: 0 auto;
}

.content__list li {
    background-color: #fff;
    margin-bottom: 15px;
    text-align: left; /* Text uvnitř položky doleva */
}

.content__list li a {
    font-size: 1.2em;
    color: #333;
    text-decoration: none;
    font-weight: bold;
}

.content__list li a:hover {
    color: #c92d09;
}

/* --- Styly pro patičku --- */
.footer {
    text-align: center;
    padding: 20px;
    margin-top: 50px;
    background-color: #222;
    color: #888;
    font-size: 0.9em;
}


/* --- Styly pro markdown--- */

p {
    margin-bottom: 1em; /* Nebo jiná hodnota */
}

ul {
    margin-left: 30px;
    margin-bottom: 1em;
    margin-top: 1em;
    padding-left: 0;
}

li {
    margin-bottom: 1em;
}

ol {
    margin-left: 30px;   /* Odsadí celý seznam od levého okraje */
    padding-left: 0;     /* Zajistí, že odrážky nebudou mít další zbytečné odsazení */
    margin-bottom: 1em;  /* Mezera pod celým seznamem */
    margin-top: 1em;
}

ol li {
    margin-bottom: 1em; /* Mezera mezi jednotlivými položkami seznamu */
    font-weight: 700;
}

.poem { /* třída pro obalení ódy */
    text-align: center; /* Centruje veškerý textový obsah horizontálně */
    margin-top: 50px;   /* Mezera nad básní (volitelné) */
    margin-bottom: 50px; /* Mezera pod básní (volitelné) */
    max-width: 600px;  /* Omezí šířku bloku, aby text nebyl moc široký */
    margin-left: auto; /* Centruje samotný blok horizontálně, pokud má max-width */
    margin-right: auto;/* Centruje samotný blok horizontálně, pokud má max-width */
}

.poem__description {
    margin-bottom: 50px;
    font-weight: 700;
}

.center {
    text-align: center;
}

.mar-top {
    margin-top: 5%;
}

.bold {
    font-weight: 700;
}