h1, h2, h3, p {

    text-align: center;

}





.avatar {

    width: 400px;

}



html {

    background:  #5b5644d0;

}



body {

   

    color:  #f8f4f4;



}



#dovednosti td {

    width: 33%;

    padding: 10px;

    vertical-align: top;

    border: 1px solid gray;

}



#dovednosti {

    border-collapse: collapse;

}



body > header {

    height: 100px;

    width: 100%;

    background: #5b5644d0;

    color: white;

}



body {

    font: 22px "Poppins";

    background: #5b5644d0;

    color: #faf9fb;

    box-sizing: border-box;

    margin: 0;

}



nav ul a {

    color: white;

    padding: 8px 0;

    text-decoration: none;

    text-transform: uppercase;

}



nav ul {

    margin: 0;

    list-style-type: none;

    display: flex;

    align-items: center;

    height: 100%;

}

nav ul li {

    padding: 0 25px;

    margin: 0 5px;

    font-size: 1em;

    line-height: 4.3em;

}



nav ul a:hover, .aktivni a {

    border-bottom: 2px solid #EF6534;

}



table {

    width: 100%;

    table-layout: fixed;

  }



  a { color: #f8f4f4;

    text-decoration: none;

    text-transform: uppercase; }



/* Styl pro obrázek, který bude kliknutelný */

.img-thumbnail {

    width: 300px;

    cursor: pointer;

    transition: transform 0.3s ease-in-out; /* Efekt pro zvětšení obrázku při najetí myší */

}



/* Efekt pro obrázek při najetí myší (pro zvětšení obrázku při hoveru) */

.img-thumbnail:hover {

    transform: scale(1.1); /* Zvýšení velikosti obrázku na 110% při najetí */

}



/* Modal pro zobrazení zvětšeného obrázku */

.modal {

    display: none; /* Skrytý modal */

    position: fixed;

    z-index: 1;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, 0.7);

    justify-content: center;

    align-items: center;

}



/* Zvýšení velikosti obrázku ve modalu */

.modal-content {

    max-width: 100%; /* Obrázek zabere 100% šířky */

    max-height: 100%; /* Obrázek zabere 100% výšky */

    object-fit: contain; /* Zachová poměr stran obrázku při zvětšení */

    display: block;

}



/* Skrytý checkbox pro ovládání modalu */

.imageModal1-checkbox,.imageModal2-checkbox {

    display: none; /* Skrytý checkbox */

}



/* Modal se zobrazí, když je checkbox zaškrtnutý */

.imageModal1-checkbox:checked ~ .modal, .imageModal2-checkbox:checked ~ .modal  {

    display: flex;

}



/* Zavírací tlačítko pro modal */

.modal-close {

    position: absolute;

    top: 15px;

    right: 35px;

    font-size: 36px;

    color: white;

    cursor: pointer;

    background: transparent;

    border: none;

}