@font-face {
    font-family: Poppins;
    src: url(fonty/Poppins-Regular.ttf);
    font-weight: normal;
}
@font-face {
    font-family: Poppins;
    src: url(fonty/Poppins-ExtraBold.ttf);
    font-weight: bold;
}
html { /* Typový selektor */
    background: #414042;
}
body {
    font-family: "Poppins";
    font-size: 14px;
    color: #414042; /* Barva textu */
    background-color: #F9F9F9;
    /* background: url(obrazky/avatar.jpg); */
    box-sizing: border-box; /*určuje, zda se bude k šířce elementu počítat i šířka padding nebo rámečku. pokud ano, nastavíme na content-box, pokud ne, tak nastavíme border-box*/
    margin: 0;
    padding: 100px 0 0 0; /* Vnitřní odsazení textu od ráměčku. První hodnota je odsazení shora, pak zprava, zdola a zleva. */
}
body > header { /* Vybere jen přímo vnořený element header (child of body) */
    height: 100px; /*Výška elementu*/
    width: 100%; /*Šířka elementu vyjádřená v procentech, kolik může zabírat v elementu, ve kterém se vyskytuje*/
    background: #00386B;
    color:white; /*Barva textu*/
    display: flex; /*uspořádání elementu do flexboxu - umožňuje skládat položky za sebe. Směr skládánání flexpoxu je by default na řádky*/
    justify-content: space-evenly; /*Tato vlastnost definuje, kolik prostoru bude mezi a kolem jednotlivých položek.  Space-evently zajistá, že každá položka bude mít kolem sebe stejně prostoru.*/
    position: fixed; /*Další pozice jsou static, relative, absolute a fixed.
    Statická pozice je výchozí. Elementy jsou zobrazeny tam, kde jsou definovány s ohledem na ostatní elementy
    Pomocí relative můžeme prvky posouvat. Ty pak mohou překrýt jiné prvky. Jinak můžeme ovlivnit překrývání pomocí vlastnosti z-index.
    Absoulute zobrazý element na dyných souřadnicích bez ohledu na jeho originální polohu.
    Fixnní pozice zobrazí element na daných souřadnicích v oblasti, která je právávě vidět (element nelze odscrolovat)*/
    z-index: 1; /*překrývání elementů - vyšší číslo znamená, že prvek překryje jiný prvek*/
    top: 0; /*umístění od horního okraje. Funguje, pokud je position nastavená jinak než static*/
}

#logo{
    height: 40px;
    margin: auto 0 auto 20px;
    display: flex;
    flex-direction: column; /*Skládá elementy do sloupce v rámci flexboxu.*/
    justify-content: center;/*Vycentruje obsah flexboxu. V tomto případě vertikální centrování*/
    background: url(obrazky/logo.png) no-repeat;
    background-size: 40px 40px;
}
#logo > * {
    margin: 0 0 0 50px;
}
#logo h1{
    font-weight: normal;
    font-size: 2.3em;
    line-height: 1.2em;
    color: white;
}
#logo h1 span {
    font-weight: bold;
    text-transform: uppercase;
}
#logo small {
    text-transform: uppercase;
    font-size: 0.85em;
}
nav ul {
    margin: 0;
    list-style-type: none; /*Mění odrážky. */
    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 {
    color: white;
    padding: 8px 0;
    text-decoration: none;
    text-transform: uppercase;
}
nav ul a:hover, .aktivni a {
    border-bottom: solid 2px #EF6534;
}
.brand-subtitle { font-size: 0.6rem; letter-spacing: 2px; }
article{
    margin:0 auto; /*Odszaení horního/dolni a levého/pravého vnějšího okraje. Hodnota auto znamená, že se nastaví stjené okraje v tomto přípaDĚ zleva/zprava. Všechny 4 hodnoty jsou pak HORNÍ-PRAVÝ-DOLNÍ-LEVÝ okraj*/ 
    padding: 50px 50px 10px 5px
}
article header{
    height: 80px;
    max-width: 960px;
    margin: 0 auto;
}

article h1, article h2, article h3, article h4, article h5, article h6{
    color: #00386B;
    padding: 10px 0;
}

article h1 {
    margin: 0;
    font-size: 2.3em;
    font-weight: bold;
    text-transform: uppercase;
    width: max-content;
    border-bottom: 4px solid #EF6534;
}

article h2 {
    font-size: 2em;
    font-weight: bold;
    text-transform: uppercase;
    width: max-content;
    border-bottom: 4px solid #EF6534;
}
article section p {
    line-height: 1.8em;
    margin-bottom: 1em;
}

article section a {
    color: #EF6534;
}
/* Nebo mohu napsat jen font 14px "Poppins"; */

h1{
    font-size: 1.7em;
    /* text-shadow: 3px 3px 7px #666666; */
}
.centrovany{
    text-align: center; /* Zarovnání textu nebo obrázku */
}
.vlevo {
    float: left;
}
.avatar{
    /*float: right; /* NAstaví obrázek vpravo od textu a nechá text obtékat kolem obrázku */
    padding-left: 10px;
    width: 300px;
    filter: grayscale(1); /*Udělá element šedým*/
}
.avatar-img {width: 100%; max-width: 220px; border: 4px solid var(--bs-primary); }
@media (max-width: 575px) { .avatar-img { max-width: 140px; } }
.cistic{
    clear: both; /* Zastaví obtékání textu z obou stran. */
}
.reference-tlacitko{
    background: #70b73a;
    color: white;
    font-size: 0.9em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 12px 25px;
    border-radius: 25px 25px 25px 25px; /* Zakulacení rohů elementu */
}
.kontakt-tlacitko {
    background: #EF6534;
    padding: 10px 20px;
    border-radius: 20px;
}
.kontakt-tlacitko:hover,
.reference-tlacitko:hover {
    filter: brightness(115%) contrast(85); /*Změní kontrast a světlost elementu*/ 
    border: 0; /*Zabranuje se tím podtrhávání textu*/
}
#dovednosti {
    border-collapse: collapse; /* slije rámečky tabulky*/
}
#dovednosti td {
    width: 33%;
    padding: 10px;
    vertical-align: top; /*Tato vlastnost funguje pouze u tabulek*/
    border: solid 1px gray; /* Nastavení rámečku - typ rámečku, šířka a barva. Taktéž můžu nastavovat jednotlivé strany rámečku pomocí border-top/botom/left/right */
}
#reference img {
    border: 1px solid gray;
    padding: 6px;
    box-shadow: 3px 3px 6px #999999;
    margin-right: 6px;
}
#reference a {
    text-decoration: none; /* Zruší podtržení odkazu.*/
}

#reference a:hover {
    text-decoration: none;
}
footer {
    box-sizing: border-box;
    text-align: center;
    height: 100px;
    color: white;
    background: #414042;
    padding: 50px 0 0 0;
    clip-path: polygon (0 30px, 100% 0, 100% 105%, 0 105%); /*ořízne obsah elementu podle předaného tvaru.*/
}
footer a {
    color: white;
    text-decoration: none;

}

/* platí, že pozdější selektor přepisuje ten, který byl v souboru dříve. */
/*Obrázek můžeme vložit pomocí tagu <img> nebo v CSS pomocí vlastnosti background: url(CESTA-K-OBRAZKU)*/