@font-face {
    /*nahrani fontu*/
    font-family: Poppins;
    /*nazev fontu*/
    src: url(fonty/Poppins-Regular.ttf);
    /*cesta k fontu*/
    font-weight: normal;
    /*tloustka pisma*/
}

@font-face {
    /*nahrani fontu*/
    font-family: Poppins;
    /*nazev fontu*/
    src: url(fonty/Poppins-ExtraBold.ttf);
    /*cesta k fontu*/
    font-weight: bold;
    /*tloustka pisma*/
}

body {
    /*vlastnosti stranky*/
    font: 14px "Poppins";
    background: #616161;
    color: #ffffff;
    box-sizing: border-box;
    margin: 0;
    padding: 100px 0px 0px 0px;
    /*odsazeni od horniho okraje, aby nam hlavicka neprekryvala obsah*/
    min-width: 960px;
    /*minimalni sirka stranky, aby se nedeformovala pri prilisnem zmenseni*/

}

article {
    /*vlastnosti clanku*/
    margin: 0 auto;
    max-width: 960px;
    padding: 50px 50px 10px 50px;
    max-height: auto;
}

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

article h1 {
    /*nadpis clanku*/
    margin: 0;
    font-size: 2.3em;
    font-weight: bold;
    text-transform: uppercase;
    width: max-content;
    border-bottom: 4px solid #1E386B;
}

article h2 {
    /*nadpis kapitoly*/
    font-size: 2em;
}

article header {
    /*hlavicka clanku*/
    height: 80px;
}

article section p {
    /*odstavec*/
    margin-bottom: 1.5em;
    /*odsazeni odstavce od sebe*/
    line-height: 1.8em;
    /*vyska radku*/
}

article section a {
    /*odkaz*/
    color: #ffffff;
    text-decoration: none;
}

.centrovany {
    /*centrovani textu*/
    text-align: center;
    /*zarovnani textu na stred*/
}

.avatar {
    float: right;
    width: 300px;
    padding-left: 10px;
    border-radius: 30px;
}

.cistic {
    /*cistic textu*/
    clear: both;
    /*zruseni obtekani obrazkem*/
}

.reference-tlacitko {
    background: #1E386B;
    color: white;
    font-size: 0.9em;
    text-decoration: none;
    text-transform: uppercase;
    padding: 12px 25px;
    border-radius: 25px;
}

body>header {
    /*hlavicka stranky*/
    height: 100px;
    width: 100%;
    background: #022f53;
    color: white;
    display: flex;
    /*hlavicka bude flexibilni*/
    justify-content: space-evenly;
    /*zarovnani polozek*/
    position: fixed;
    /*nastaveni polohy, fixni, hlavicka stranky je vzdy dostupna nehlede na scrolovani*/
    z-index: 1000;
    /*vrstva nad ostatnimi elementy, bude ostatni  elementy prekryvat*/
    top: 0;
    /*umisteni od horniho okraje*/
}


/*stylovani loga*/
#logo {
    height: 40px;
    /*vyska loga*/
    margin: auto 0 auto 20px;
    /*odsazeni loga od okraje*/
    display: flex;
    /*logo bude flexibilni*/
    flex-direction: column;
    /*zarovnani polozek kolmo*/
    justify-content: center;
    /*zarovnani polozek*/
    background: url('obrazky/logo.png')no-repeat;
    /*poradi loga*/
    background-size: 40px 40px;
    /*velikost loga*/
}

#logo>* {
    margin: 0 0 0 50px;
    /*odsazeni textu od loga*/
}

#logo h1 {
    font-weight: normal;
    /*tloustka pisma*/
    font-size: 1.5em;
    /*velikost textu*/
    line-height: 1.2em;
    /*vyska radku*/
    color: #ffffff;
    /*barva textu*/
}

#logo h1 span {
    /*nadpis*/
    font-weight: bold;
    /*tloustka pisma*/
    text-transform: uppercase;
    /*velka pismena*/
}

#logo small {
    /*popisek pod nadpisem*/
    text-transform: uppercase;
    /*velka pismena*/
    font-size: 0.85em;
    /*velikost textu*/
    color: #aaaaaa;
}

/*stylovani navigacniho menu*/
nav ul {
    /*seznam v navigaci*/
    margin: 0;
    /*odsazeni seznamu od okraju*/
    list-style-type: none;
    /*odstraneni odradkovani*/
    display: flex;
    /*seznam bude flexibilni*/
    align-items: center;
    /*zarovnani polozek*/
    height: 100%;
    /*vyska navigace*/
}

nav ul li {
    padding: 0 25px;
    /*odsazeni polozek od okraju*/
    margin: 0 10px;
    /*odsazeni polozek od sebe*/
    font-size: 1em;
    /*velikost textu*/
    line-height: 3em;
    /*vyska radku*/
    background: #1E386B;
    border-radius: 15px;
}

nav ul a {
    /*odkazy v navigaci*/
    color: white;
    /*barva textu*/
    padding: 8px 0;
    /*odsazeni textu od okraju*/
    text-decoration: none;
    /*odstraneni podtrzeni*/
    text-transform: uppercase;
    /*velka pismena*/
}

nav ul a:hover,
.aktuvni a {
    /*hover - akce polozky po najeti mysi*/
    border-bottom: 2px solid #b97510;
    /*podtrzeni polozky*/

}



/*upravy tlacitek reference po najeti mysi tlacitka zesvetlaji*/
.reference-tlacitko:hover {
    filter: brightness(115%) contrast(85%);
    /*zesvetleni tlacitka*/
    border: 0;
    /*odstraneni ohraniceni*/
}

/*stylovani paticky*/

html {
    /*element html je vlastnosti stranky*/
    background: #414042;
    /*barva pozadi*/
}

footer {
    /*patka stranky*/
    box-sizing: border-box;
    /*velikost patky*/
    text-align: center;
    /*zarovnani textu na stred*/
    height: 100px;
    /*vyska patky*/
    color: rgb(167, 167, 167);
    /*barva textu*/
    background: #414042;
    /*barva pozadi*/
    padding: 50px 0 0 0;
    /*odsazeni textu od okraje, v romto pripade od horniho okraje*/
    clip-path: polygon(0 30%, 100% 0, 100% 105%, 0 105%);
    /*tvar patky, mnohouhelnik, orizne obsah elementu podle predaneho tvaru*/
}

/*stylovani tabulky v dovednostech*/
#dovednosti td {
    /*selektor pro praci s tabulkou v Dovednosti*/
    width: 33%;
    /*nastavime sirku na 33%*/
    padding: 10px;
    /*a odsazeni*/
    vertical-align: top;
    /*bunka se ve vychozim nastaveni  centruje svisle, pokud chceme nadpisy ve stejne vysce zarovname shora pomoci vlastnosti vertical.align s hodnotou top*/
    border: 1px solid #414042;
    /*pro zobrazeni rozlozeni*/
}

#dovednosti {
    border-collapse: collapse;
    /*spojeni/sliti ramecku dohromady, linky ramecku se spoji, hodnoru nastavujeme cele tabulce*/

}

/*stylovani galerie v referencich*/
#reference img {
    /*konkretni odkaz na reference*/
    border: 1px solid #414042;
    /*nastaveni okna*/
    padding: 6px;
    /*vlastnosti padding nastavujeme vzdálenost mezi rámečkem a obsahem elementu*/
    box-shadow: 3px 3px 6px #1E386B;
    /*nastaveni stinu*/
    margin-right: 6px;
    /*nastaveni vzajemneho odsazeni*/
}

#reference a {
    text-decoration: none;
    /*u odkazu jsme odebrali podtrzeni*/
}

#reference a:hover {
    /*hover - akce polozky po najeti mysi*/
    text-decoration: none;
    /*u odkazu jsme odebrali dekoraci*/
}

#mailicon {
    height: 150px;
}

#kontakt:hover {
    border-bottom: 2px solid #b97510;
}