html{                       /*nastavenie vzdialenosti article od vrchu, inak by sa vrch article schoval pod header*/
    scroll-padding-top: 115px;
}

body{                                           /*definovanie pisma pre celu web stranku*/
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    background-repeat: no-repeat;               /*obrazok sa bude vyskytovat na stranke iba raz*/
    background-position: top;                   /*bude zarovnany na vrch*/
    background-attachment: fixed;               /*a jeho pozicia je fixna - nebude sa hybat spolu so strankou*/
}

.body_futbal{                /*pozadie na jednotlivych podstrankach vytvorene obrazkom*/
    background-image: url("../images/futbalova_lopta_background.png");
}

.body_americky_futbal{
    background-image: url("../images/americky_futbal_background.png");
}

.body_hokej{
    background-image: url("../images/hokej_background.png");
}

.body_basketbal{
    background-image: url("../images/basketbal_background.png");
}

.body_bejzbal{
    background-image: url("../images/bejzbal_background.png");
}

header{
    position: fixed;                /*header ma fixnu poziciu - zostane na mieste aj pri scroll stranky*/
    top: 0;                         /*odsadenie od vrchu a z lava je 0*/
    left: 0;
    width: 100%;                                    /*vyplna celu sirku stranky*/
    height: 100px;                                  /*nastavenie vysky*/
    background-color: rgb(145, 145, 145);         /*nastavenie farby pozadia*/
    z-index: 1;                     /*velkost z-indexu definuje, ktory prvok bude na vrchu a ktory pod nim - vacsi index, viac na vrchu*/
}

.header_futbal{
    background-color: rgb(92, 147, 79);
}

.header_hokej{
    background-color: rgb(129, 181, 217);
}

.header_basketbal{
    background-color: rgb(253, 173, 48);
}

.header_bejzbal{
    background-color: rgb(255, 251, 242);
}

header img{
    position: fixed;
    left: 330px;
    width: 5.2%;                    /*velkost obrazka*/
}

nav{
    position: absolute;             /*pozicia absolut je pevne dana vo vztahu k header v ktorom je nav vlozeny*/
    bottom: 0px;                    /*ak sa zmeni header, pozicia nav v nom bude stale odsadena o 0px zo spodu a 55px zprava*/
    right: 55px;
}

nav li{
    display: inline-block;          /*jednotlive polozky zoznamu su zarovnane vedla seba*/
}

nav a{
    color: rgb(255, 255, 255);              /*polozky zoznamu maju bielu farbu*/
}

.nav_a_bejzbal{
    color: rgb(0, 0, 0);            /*podstranka bejzbal ma nav s ciernym textom kvoli bledej farbe header*/
}

aside{                              /*fixna pozicia aside vo vztahu k stranke odsadena z vrchu a spodku, pismo 16px*/
    position: fixed;
    top: 140px;
    left: 225px;
    font-size: 16px;
}

aside img{
    width: 2%;
}

aside a{
    color: rgb(0, 0, 0);
}

article{
    position: relative;
    top: 110px;
    margin: 0 auto;                 /*zarovnanie article na stred stranky*/
    width: 750px;
    text-align: justify;            /*zarovnanie textu na oba okraje*/
}

section{
    clear: both;                    /*definovanie, ze section nema obtekat obrazok*/
}

section h2{
    text-align: left;               /*zarovnanie nadpisu v section na lavu stranu*/
}

section h3{
    text-align: left;
}

section h4{
    text-align: left;
}

a{
    text-decoration: none;                    /*text bez dekoracii, v default nastaveni podciarknuty text*/
}

a:hover{                            /*definovanie pre vsetky linky, ze po ukazani mysou sa text podciarkne*/
    text-decoration: underline;
}

hr{                                 /*formatovanie ciary - cierna farba, 1,5px hrubka a vytvorenie medzeri od vrchu*/
    background: black;
    height: 1.5px;
    clear: both;                    /*definovanie, ze hr nema obtekat obrazok*/
    margin: 40px 0 0 0;
}

h1{                         /*specifikacia hlavneho nadpisu - vlastny font pisma, zarovnanie na stred, velkost a vytvorenie medzeri od spodu*/
    font-family: Georgia, 'Times New Roman', Times, serif;
    text-align: center;
    text-transform: uppercase;              /*vypis velkym pismom*/
    font-size: 300%;                        
    padding: 0 0 30px 0;
}

h2{
    text-align: center;
    text-transform: uppercase;
}

h6{
    text-align: right;
    font-size: 100%;
    margin: 0 0 50px 0;
}

.img1{
    width: 22%;
    float: left;                    /*umiestnenie obrazku vlavo a obtekanie textom sprava*/
    margin: 0 30px 0 0;
}

.img1:hover{                        /*po ukazani kurzorom mysi na obrazok sa tento zvacsi*/
    transform: scale(1.1);
}

.img2{
    width: 19%;
    float: right;                   /*umiestnenie obrazku vpravo a obtekanie textom zlava*/
    margin: 0 30px 0 0;
}

#img3{
    display: block;                 /*vytvorenie bloku obrazku, aby mohol byt centrovany na stred*/
    width: 40%;
    margin: 0 auto;                 /*centrovanie na stred*/
    transition: transform 1.5s ease;        /*nastavenie casoveho rozpatia animacie na 1,5 sekundy, ease - zrychlovanie a spomalovanie otacania od zaciatku do konca*/       
}

#img3:hover{
    transform:rotateY(360deg);          /*otocenie o 360 stupnov okolo osi Y*/
}

table{
    text-align: center;
    width: 100%;
    margin: 10px 0 50px 0;
}

table img{
    max-width: 27px;
}

tr:nth-child(even){
    background-color: rgb(220, 220, 220);
}

th{
    background-color: rgb(145, 145, 145);
    color: rgb(255, 255, 255);
    height: 30px;
}

td{
    height: 30px;
}

ul{
    list-style-type: none;          /*neoznacovanie jednotlivych poloziek neusporiadaneho zoznamu*/
}

li{
    font-weight: bold;
    padding: 10px;                  /*vytvorenie priestoru okolo kazdej polozky na vsetky styri strany po 10px*/
}

dd{
    padding: 10px 0 50px 0;
}

video{
    width: 100%;
    margin: 50px 0 50px 0;
}

address{
    border-color: black;            /*definovanie farby ohranicenia*/
    border-style: dotted;             /*definovanie bodkovaneho vzoru ohranicenia*/
    border-radius: 75%;               /*zaoblenie ohranicenia*/
    padding: 10px;
    margin: 75px 0px 25px 0px ;
    text-align: center;
}

mark{
    background-color: rgb(225, 225, 225);
    font-size: 125%;
}

footer{
    position: relative;
    top: 150px;
    margin: 0 auto;
    text-align: center;
    max-width: 750px;
}