/* premenne pre farby pouzite na viacerych miestach */
:root {
    --farba-link: #3657c4;
    --farba-link-hover: #2d9aee;
    --farba-link-visited: #74a2c6;
    --farba-menu: #d3d3d3;
    --farba-pozadie: #f3f3f3;
    --farba-text: rgb(61, 61, 61);
    --farba-svetly-text: grey;
    --farba-mark: #feffcf;
    --farba-osoba: black;
}

/* globalny font a farba pozadia, margin 0 je kvoli tomu aby header a footer
boli na celu sirku */
body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--farba-text);
    background-color: var(--farba-pozadie);

    /* potrebne na potlacenie paty spodok stranky */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* nepodciarkovat linky + nastavenie farby textu linku */
a {
    text-decoration: none;
    color: var(--farba-link);
}

/* farba textu nenavstiveneho linku, nad ktorym je kurzor */
a:hover {
    color: var(--farba-link-hover);
}

/* farba textu navstiveneho linku */
a:visited {
    color: var(--farba-link-visited);
}

/* zvacsenie riadkovania v zoznamoch */
li,
dd {
    line-height: 150%;
}

/* zvacsenie vertikalknych medzier medzi jednotlivymi polozkami zoznamu */
li {
    margin: 10px 0;
}

/* zvacsenie vertikalknych medzier medzi popisom a nasledujucim textom
v definicnom zozname */
dd {
    margin-bottom: 10px;
}

/* nastavenie textu (pojmu) definicneho zoznamu na bold */
dt {
    font-weight: bold;
}

/* vacsi hlavny nadpis */
h1 {
    font-size: 3em;
}

/* maximalna sirka textu v main, zarovnanie main horizontalne na stred */
main {
    max-width: 900px;
    margin: 0 auto;
}

/* vertikalne odsadenie medzi odsekmi, test v odsekoch zarovnany do bloku
delenie slov zapnute, vacsie riadkovanie */
p {
    padding: 5px 0;
    text-align: justify;
    hyphens: auto;
    line-height: 180%;
}

/* navbar na celu sirku stranky */
nav {
    width: 100%;
}

/* styl zobrazenia "paty" na flex - elementy v nom budu v riadku;
nastavenie farby */
footer {
    width: 100%;
    display: flex;
    background-color: var(--farba-menu);
    /* posun patu na spodok */
    margin-top: auto;
}

/* linky v "pate" budu vedla seba, vertikalne zarovnane na stred, kedze su
robene ako li, nezobrazujeme "gulicky" */
footer ul {
    display: flex;
    align-items: center;
    list-style: none;
}

/* zaokruhlene rohy obrazkov */
img {
    border-radius: 10px;
}

/* farba vyznacenia pri pouziti <mark>, padding urobi zvyraznenie sirsie 
ako text*/
mark {
    background-color: var(--farba-mark);
    padding: 4px;
}

/* zarovnanie elemenov vo <figure> (obrazky, popisky) na stred; pouzi mensi
font, kurzivu */
figure {
    font-style: italic;
    font-size: small;
    text-align: center;
}

/* menu je ul s linkami; umiestni co najblizsie k lavemu hornemu rohu;
jednotlive polozky sa zobrazia vedla seba (flex), budu vertikalkne zarovnane
na stred, bez guliciek */
.menu {
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    background-color: var(--farba-menu);
}

/* urobi menu kompaktnejsim */
.menu li {
    margin: 0;
}

/* link na domovsku stranku, zarovnanie loga v nom na stred */
.menu .domov {
    display: flex;
    align-items: center;
}

/* velkost loga v menu */
.menu .logo {
    height: 72px;
}

/* linky v menu tucnym pismom, zobrazene do bloku, aby sa dalo pouzit
transform: scale() */
.nav-link {
    font-weight: bold;
    font-size: large;
    display: inline-block;
    color: var(--farba-link);
    padding: 10px;
}

/* pri kurzore nad linkom v menu sa text mierne zvacsi a zmeni farbu */
.nav-link:hover,
.nav-link:visited:hover {
    color: var(--farba-link-hover);
    transform: scale(1.05);
}

/* pri stlaceni linku sa text zmensi naspat */
.nav-link:active {
    transform: scale(1);
}

/* nastavenie farby navstiveneho linku v menu */
.nav-link:visited {
    color: var(--farba-link);
}

/* <main> na domovskej stranke je flex, aby sa hlavny text a "bocny panel"
zobrazili vedla seba */
.main-domov {
    display: flex;
}

/* urob medzeru napravo od hlavneho textu na domovskej stranke */
.main-domov #intro {
    margin: 0 10px 0 0;
}

/* nastavenie bocneho panelu: vertikalna ciara, minimalna sirka,
mensi font... */
.main-domov aside {
    border-left: 1px solid;
    min-width: 15%;
    margin: 0 10px;
    padding: 0 10px;
    font-size: small;
}

/* mensia medzera medzi nadpisom a telom "novinky" v bocnom paneli */
.novinka h3 {
    margin-bottom: 5px;
}

/* text novinky kurzivou, zarovnany nalavo */
.novinka p {
    font-style: italic;
    text-align: left;
    margin: 0;
}

/* cas novinky sivy, "tensim" pismom */
.novinka .cas {
    padding-top: 0;
    font-weight: lighter;
    color: var(--farba-svetly-text);
}

/* nastavenie sirky obrazkovej mapy */
img.mapa {
    width: 800px;
}

/* sipky na navigovanie navrch a naspodok stranky; pozicia je fixna, linky
nie su podciarknute */
.posun-hore-dole {
    position: fixed;
    bottom: 100px;
    right: 40px;
    text-decoration: none;
    font-weight: bold;
    font-size: 2em;
}

/* potrebne nastavit, aby sa sipky dali zvacsit pri podrzani kurzoru nad nimi */
.posun-hore-dole a {
    display: inline-block;
}

/* pri kurzore nad sipkou sa ta mierne zvacsi a zmeni farbu */
.posun-hore-dole a:hover,
.posun-hore-dole a:visited:hover {
    color: var(--farba-link-hover);
    transform: scale(1.2);
}

/* pri stlaceni sipky sa tato zmensi naspat */
.posun-hore-dole a:active {
    transform: scale(1);
}

/* farba sipky po klinuti na nu */
.posun-hore-dole a:visited {
    color: var(--farba-link);
}

/* polozky v zozname clankov o firmach su v riadku, bez guliciek */
.zoznam-firiem {
    display: flex;
    padding: 0;
    list-style: none;
}

/* potrebne nastavit, aby sa loga firiem zvacsili pri podrzani kurzoru nad nimi */
.zoznam-firiem li {
    display: inline-block;
    padding: 0 30px 0 0;
}

/* zvacsi loga firiem pri podrzani kurzoru nad nimi */
.zoznam-firiem li:hover {
    transform: scale(1.05);
}

/* pri kliknuti na logo firmy sa toto zmensi naspat */
.zoznam-firiem li:active {
    transform: scale(1);
}

/* velkost loga firmy v zozname */
.zoznam-firiem img {
    max-height: 50px;
}

/* nastavenie zdroja uvedeneho pri clanku */
.prebrate {
    font-size: smaller;
    font-style: italic;
    color: var(--farba-svetly-text);
    padding-bottom: 0;
}

/* format mena osoby v texte */
.osoba {
    font-style: italic;
    color: var(--farba-osoba);
}

/* datum udalosti tucnym pismom */
.datum-udalosti {
    font-weight: bold;
}

/* velkost obrazku v tabulke s obrazkami */
.maly-portret {
    height: 100px;
}

/* portret vlavo, text ho obteka */
.portret {
    float: left;
    padding: 0;
    margin: 0 15px 0 0;
}

/* velkost portretu */
.portret img {
    height: 300px;
}

/* portret sa pri podrzani kurzora nad nim zvacsi */
.portret img:hover {
    transform: scale(1.2);
}

/* tabulka s obrazkami; zarovnanie textu nalavo */
.zoznam-osobnosti {
    text-align: left;
    margin: 25px 0;
}

/* "medzery" v kazdej bunke */
.zoznam-osobnosti td {
    padding: 5px 10px;
}

/* viac vertikalneho miesta v bunkach hlavicky */
.zoznam-osobnosti th {
    padding: 10px;
}

/* potrebne, ak chcete vidiet oramovanie hlavicky tabulky */
.zoznam-osobnosti {
    border-collapse: collapse;
}

/* oramovanie hlavicky tabulky */
.zoznam-osobnosti thead {
    border-bottom: 2px solid;
}

/* oramovanie riadkov tabulky */
.zoznam-osobnosti tbody tr {
    border-bottom: thin solid;
}

/* sirka druheho stlpca tabulky (stlpec s menom) */
.zoznam-osobnosti thead th:nth-child(2) {
    width: 20%;
}

/* horizontalne zarovnanie v prvom stlpci tabulky na stred (portret) */
.zoznam-osobnosti tbody td:nth-child(1) {
    text-align: center;
}

/* tucny font verzie jazyka */
.verzia-jazyka {
    font-weight: bold;
}

/* zmensenie medzier medzi ukazkami kodu */
#standardy-js pre {
    margin: 0;
}

/* loga jazykov a firiem vlavo, text ich obteka */
img.logo-jazyka,
img.logo-firmy {
    max-width: 150px;
    float: left;
    padding: 0;
    margin: 0 15px 0 0;
}

/* sirka videa */
video {
    max-width: 80%;
}

/* video horizontalne na stred stranky */
.video {
    text-align: center;
}

/* nastavenie prehravaca audia a jeho popisu: umiestnenie vedla seba,
vertikalne zarovnanie na stred, natlacit doprava */
.audio {
    display: flex;
    align-items: center;
    font-style: normal;
    font-size: inherit;
    margin-left: auto;
}

/* medzera medzi popiskom prahravaca audia a prehravacom */
.audio>* {
    margin: 0 5px;
}