body {
    font-family: Arial, sans-serif;
    text-align: center; /* Zarovná text veškerého obsahu na střed */
}

header h1 {
    margin-top: 20px;
}

section {
    width: 80%;
    margin: auto;
    padding: 20px;
    text-align: center; /* Zarovná text uvnitř sekce na střed */
}

form {
    margin-bottom: 20px;
}

.ingredients {
    font-size: 1.5em;
    background-color: #f9f9f9;
    padding: 15px; /* Ponechá stávající padding */
    padding-left: 40px; /* Přidá větší padding na levé straně */
    border: 1px solid #ddd;
    border-radius: 5px;
    margin: 20px;
    display: inline-block;
    text-align: left; /* Zarovná text vlevo */
    width: 30%; 
}

/* Základní styl pro všechna tlačítka */
.tlacitko {
    font-size: 0.9em;
    text-decoration: none;
    text-transform: uppercase;
    padding: 12px 25px;
    border-radius: 25px; /* Zakulatí rohy tlačítka */
    display: inline-block;
}

/* Specifické styly pro různá tlačítka */
.panna_cotta_tlacitko {
    color: rgb(36, 0, 53);
    background: rgb(255, 247, 236);
}

.brownies_tlacitko {
    color: antiquewhite;
    background: #533d29;
}

.granola_tlacitko {
    color: rgb(66, 45, 40);
    background: rgb(231, 153, 134);
}

.macandcheese_tlacitko {
    color: rgb(66, 45, 40);
    background: rgb(245, 235, 178);
}


section ul {
    list-style-type: none; /* Odstraní odrážky */
    text-align: left; /* Zarovná text uvnitř seznamu vlevo */
    padding-left: 0; /* Odstraní implicitní padding seznamu */
    margin: 0 auto; /* Centruje celý blok seznamu */
    width: 80%; /* Nastaví šířku seznamu na 80% stránky */
    max-width: 700px; /* Nastaví maximální šířku, aby seznam nebyl příliš široký */
    line-height: 2; 
}

.home-link {
    position: absolute; /* Umístí ikonu mimo normální tok stránky */
    top: 10px; /* Umístí ikonu 10px od horního okraje stránky */
    left: 10px; /* Umístí ikonu 10px od levého okraje stránky */
    text-decoration: none; /* Odstraní podtržení textu odkazu */
}

.home-icon {
    width: 30px; /* Nastaví šířku ikony */
    height: auto; /* Zachová poměr stran ikony */
    position: fixed; /* Umožňuje pevné umístění ikony vůči oknu prohlížeče */
}

@media only screen and (max-width: 600px) {
    section ul {
        padding-left: 0;
        margin: 0 auto;
        width: 90%;
        max-width: 600px;
        list-style-type: none; /* Odstraní odrážky */
        text-align: left; /* Zarovná text uvnitř seznamu vlevo */
    }

    section ul li {
        line-height: 1.4; /* Nastaví menší mezery mezi řádky uvnitř jednoho bodu */
        margin-bottom: 15px; /* Nastaví větší mezeru mezi jednotlivými body seznamu */
    }

    .ingredients {
        width: 100%; /* Nastaví šířku na 95% šířky obrazovky */
        margin: 0 auto; /* Centruje rámeček na obrazovce */
        padding: 10px; /* Zmenší padding uvnitř rámečku */
        text-align: left; /* Zarovná text uvnitř vlevo */
    }

    .ingredients p {
        line-height: 1.1; /* Nastaví menší mezery mezi řádky uvnitř každé položky */
        margin-bottom: 5px; /* Nastaví větší mezery mezi jednotlivými položkami */
    }
}