/* body, header, main, footer */

body{
    background-color: rgb(30, 30, 30);      /* background-color = nastavuje farbu pozadia / rgb = nastavovanie farby pomocou troch cisel - miesanie cervenej, zelenej a modrej v hodnote od 0 do 255 */
    color: white;       /* color = nastavuje zakladnu farbu textu */
}

header{
    background-color: rgb(60, 60, 60);
    color: white;
    display: flex;      /* display = urcuje sposob zobrazovania / flex = felxbox - umoznuje rozlozenie obsahu v jednom smere */
    align-items: center;        /* aling-items = zarovnava prvky-obsah na priecnej osi flexboxu / center = zarovna prvok-obsah do stredu danej funkcie */
    justify-content: space-between;     /* justify-content = rozmiestnuje prvky-obsah na osi flexboxu / space-between = robi medzeru medzi prvym prvkom-obsahom, obsahom uprostred a poslednym obsahom */
    padding: 10px 30px;
    border-radius: 10px;        /* border-radius = zaoblenie okraja, napr. 10 pixelov */
    border-style: solid;        /* border-style = vyzor okraja, aky vzor bude mat okraj */
    border-color: lightgray;        /* border-color = farba okraja, napr. svetlosiva */
}

main{
    padding: 10px 20px;
}

footer{
    background-color: rgb(140, 140, 140);
    color: black;
    text-align: center;         /* text-aling = urcuje vodorovne zarovanie textu / center = zarovanie od stredu */
    padding: 10px 20px;
    border-radius: 10px;
    border-style: solid;
    border-color: rgb(60, 60, 60);
}



/* section, article, aside */

section{
    margin: 10px;       /* margin = vonkajsi odstup prvku-obsahu od ostatnych prvkov */
    padding: 10px;       /* padding = vnutorny odstup prvku-obsahu od jeho vlastneho okraja */
    background-color: rgb(35, 35, 35);
    border-radius: 5px;
}

article p{
    text-align: justify;        /* justify = zarovna text ku pravemu a lavemu okraju bloku */
}

aside p{
    margin-top: 50px;
    padding: 30px 5px;
    color: black;
    background-color: whitesmoke;
    text-align: center;
    border-style: solid;
    border-color: darkgoldenrod;
}



/* navigator */

nav{
    display: flex;
    gap: 30px;      /* gap = urcuje medzeru medzi prvkami vo flexboxe, napr. 30 pixelov */
}

nav a{
    color: white;
    text-decoration: none;      /* text-decoration = nastavuje dekoraciu textu / none = odstrani dekoraciu v texte, v tomto pripade odstrani podciarknutie odkazu */
    transition: 0.7s;
}

nav a:hover{
    transform: scale(1.2);
    color: lightblue;
}



/* logo, nadpisy, texty */

.logo{
    width: 100px;       /* width = nastavuje sirku obsahu */
    height: 100px;        /* height = nastavuje vysku obsahu */
    border-radius: 50px;
    border-style: double;
    border-color: black;
    transition: 0.4s;       /* transition = urcuje plynulost zmeny v animaciach, napr. rychlost 0.4s */
}

.logo:hover{
    transform: scale(1.04);        /* transform = umoznuje menit tvar, polohu alebo velkost prvku-obsahu / scale = zvacsenie alebo zmensenie velkosti prvku-obsahu, napr. 1.04 je zvacsenie 104 percent*/
    border-radius: 60px;
}

h2{
    color: gold;
    text-align: center;
}

h3{
    color: darkgoldenrod;
}

h5{
    visibility: hidden;        /* visibility = viditelnost prvku / hidden = vlastnost - skryta, v tomto pripade je to preto, aby layout zvoleny pre stranku bol validny a aby nazvy niektorych sektorov nebol vidiet */
}

mark{
    color: black;
    background-color: lightgoldenrodyellow;
}

blockquote{
    font-style: italic;        /* font-style = styl daneho textu */
}



/* index */

.mapa{
    border-radius: 10px;
    border-style: ridge;
    border-color: whitesmoke;
}



/* layout pre index, sampionaty a kontakt */

.kontajner{
    display: grid;        /* zapina grid layout, ktory umoznuje riadky a stlpce */
    grid-template-columns: 1fr 1fr;       /* dve rovnake stlpcove oblasti, kazda zabera rovnaku cast priestoru */
    grid-template-rows: 1fr;        /* jeden riadok, ktory zabera cely dostupny priestor */
    gap: 10px 10px;           /* medzera medzi stlpcami a riadkami (10px vertikalne aj horizontalne) */
    grid-template-areas: "prava lava";        /* pomenovane oblasti, ktore ulahcuju umiestnenie prvkov */
}

.prava{ 
    grid-area: prava;       /* priradi tento blok do oblasti prava */
}

.lava{ 
    grid-area: lava;        /* priradí tento blok do oblasti lava */
    align-content: center;        /* vertikálne centrovanie obsahu v rámci tejto oblasti */
    text-align: justify;        /* zarovna text v bloku do bloku, teda k lavemu aj pravemu okraju */
}



/* podstranka okruhy */

.japonsko, .taliansko, .usa, .tabulka{
    text-align: center;
}

.japonsko a{
    background-color: whitesmoke;
    color: palevioletred;
    text-decoration: none;
    padding: 7px;
    border-radius: 5px;
}

.taliansko a{
    background-color: lightgreen;
    color: red;
    text-decoration: none;
    padding: 7px;
    border-radius: 5px;
}

.usa a{
    background-color: lightsalmon;
    color: blue;
    text-decoration: none;
    padding: 7px;
    border-radius: 5px;
}



/* tabulka */

table{
    justify-self: center;       /* justify-self = urcuje zarovanie konkretneho prvku-obsahu...  */
}

table, tr, td, th {
    border: 5px solid darkkhaki;        /* border 5px solid darkkhaki = skrateny zapis pre sirku, stylu a farby okraja do jedneho riadku */ 
    border-collapse: collapse;        /* border-collapse = urcuje sposob zobrazenia okrajov buniek tabulky / collapse = spoja sa okraje susedných buniek do jedného */
    padding: 10px;
    color: black;
    text-align: center;
}

thead{
    background-color: lightgoldenrodyellow;
}

tbody tr:nth-child(odd){        /* nastavenie css vlastnosti na neparne riadky tabulky */
    background-color: lightgray;
}

tbody tr:nth-child(even){       /* nastavenie css vlastnosti na parne riadky tabulky */
    background-color: lightgoldenrodyellow;
}



/* nastavenie section a img pre podstranky japonsko, taliansko a usa */

.suzuka, .fuji, .monza, .imola, .miami, .austin{
    padding: 15px 30px 200px;
    text-align: justify;
}

.obrsuzuka, .obrfuji, .obrmonza, .obrimola, .obrmiami, .obraustin{
    float: left;        /* float = urcuje, ze prvok presunie na jednu stranu (vľavo) a ostatny obsah sa okolo neho obtaca */
    border-radius: 15px;
    border-color: darkgoldenrod;
    border-style: groove;
    margin-right: 20px;
    transition: 0.3s;
}

.obrsuzuka:hover, .obrfuji:hover, .obrmonza:hover, .obrimola:hover, .obrmiami:hover, .obraustin:hover{
    transform: scale(1.05);
    border-radius: 30px;
}



/* podstranka sampionaty */

.obrf1, .obrwec, .obrgt3{
    border-radius: 5px;
    border-color: gold;
    border-style: groove;
    transition: 0.5s;
}

.obrf1:hover, .obrwec:hover, .obrgt3:hover{
    transform: scale(1.10);
    border-radius: 10px;
}

#video{
    width: 360px;
    height: 640px;
    border-radius: 10px;
    border-color: whitesmoke;
    border-style: groove;
}



/* podstranka kontakty */

.youtube, .instagram{
    width: 50px;
    height: 50px;
    vertical-align: middle;        /* vertical-align = urcuje vertikalne zarovnanie prvku-obsahu / middle = zarovna prvok-obsah na stred */
    margin-right: 5px;
    margin-bottom: 5px;
    border-radius: 10px;
}