/* GLOBÁLNE PREMENNE */
:root { /* root je koreňový element HTML dokumentu (https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:root) */
    --transition: 100ms; /* nastavenie jednotnej premenny pre všetky 'transition' vlastnosti */
    /* nastavenie premenné minimalnej a maximalnej priehladnosť pre 'img:hover' & 'video:hover' */
    --min_hover_opacity: 80%; 
    --max_hover_opacity: 100%;
    --max-width: 64em; /* nastavenie premenny maximálnej šírky hlavného obsahu alebo 'main' */
}

/* FARBY
   Nastavenie klúčov farieb pre jednoduchšie úpravy farieb
   Farby sú zobraté alebo inšpirované farebnou paletou Gruvbox (https://github.com/morhetz/gruvbox), licencované MIT*/
:root {
    --bg: #282828;
    --bg0_h: #1d2021;
    --bg1: #3c3836;
    --bg2: #504945;

    --fg: #ebdbb2;
    --fg0: #fbf1c7;
    --fg2: #d5c4a1;

    --blue_dark: #458588;
    --blue_light: #83a598;
    --orange_dark: #d65d0e;
    --orange_light: #fe8019;
    --red_dark: #cc241d;
    --red_light: #fb4934;
    --green_dark: #98971a;
    --green_light: #b8bb26;
    --yellow_dark: #d79921;
    --yellow_light: #fabd2f;
    --aqua_dark: #689d6a;
    --aqua_light: #8ec07c;

}

html {
    background-color: var(--bg0_h); /* nastaví farbu pozadia, pomocou var(--klúč) môžeme vybrať hodnotu z premenny */
    color: var(--fg); /* nastaví farbu textu */
    scrollbar-color: var(--fg) var(--bg); /* nastaví farby thumb (palca) & track (traťe) scrollbaru (posuvníka) */
    scrollbar-width: thin; /* nastaví šírku scrollbaru */
    scroll-behavior: smooth; /* nastaví chovanie scrollovania (posuvania), 'smooth' (plynulý) sa používa hlavne, keď chceme aby použitie anchoru (kotvy) bolo plynulé */
    font-family: system-ui, sans-serif; /* nastaví rodinu písiem, v tomto prípade som definoval tzv. "system font stack", teda skupinu rodinu písiem ktoré použijú východzie systémové rodiny písiem (https://archive-2020.sthom.kiwi/posts/system-font-stack) */
}

body {
    width: 100%; /* nastaví šírku prvku */
    height: 100%; /* nastaví výšku  prvku */
    margin: 0; /* zruší východzí 'margin' nastavený prehliadačom */
    overflow-x: hidden; /* schová obsah mimo prvku kvôli chybe prehliadača */
    background-color: var(--bg); 
}


footer {
    background-color: var(--bg0_h);
    width: 100%;
    padding: 0.5em; /* nastaví vnútorné odsadenie prvku */
    text-align: center; /* nastaví zarovnanie textu */
}

.footerSmallprint {
    font-size: x-small; /* nastaví veľkosť písma */
}

a {
    color: var(--fg2);
    text-decoration: none; /* nastaví ako vyzerá podčiarknutie/nadčiarknutie textu, v tomto prípade zrušíme podčiarknutie hyperlinku <a> */
    transition: color var(--transition); /* nastaví ako má prehliadač spraviť prechod medzi farbami */
}

a:hover { /* pseudo-trieda 'hover' sa uplatňuje iba vtedy, keď užívateľ dá myš nad prvkom alebo ťukne prstom na prvok */
    color: var(--blue_light);
}

header {
    background-color: var(--bg0_h);
    width: 100%;
    padding: 0.5em;

    display: flex; /* nastaví typ zobrazenia blockov na flexbox (rozhranie s flexibilnými krabicami) (https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts) */
    flex: auto; /* nastaví ako sa majú boxy zväčšovať či zmenšovať na zaplnenie miesta */
    align-items: center; /* nastaví vertikálné zarovanie krabic */
    flex-direction: row; /* nastaví smer flexboxu, v tomto prípade dáva krabice do stĺpcov po riadkoch */
    gap: 2rem; /* nastaví aká ma byť veľká medzera medzi prvkami (krabicami)  */
}

nav {
    display: inherit;
    gap: 0.5em;
    overflow-x: auto; /* 'auto' nám v tomto prípade zaručí, aby sa scrollbar zobrazil iba vtedy, pokiaľ je treba, teda keď sa obsah skrýva za kraj prvku */
}

#headerTitle {
    font-size: 24px;
    font-weight: bold; /* nastaví tučnosť písma */
    padding: 0.25em 1em;
}

#headerTitle img,
#headerTitle img:hover {
    border-radius: 0; /* zruší zaoblenie krajov všetkćh obrázkov */
    vertical-align: middle; /* nastaví vertikalné zarovnanie samostatného prvku */
    width: 48px;
    opacity: var(--max_hover_opacity); /* nastaví priehladnosť, v tomto prípade zároveň zruší zníženie priehladností všetkých obrázkov */
}

#headerTitle:hover {
    opacity: var(--min_hover_opacity);
    color: var(--fg);
}

.button {
    color: var(--fg);
    background-color: var(--bg);
    transition: opacity var(--transition);
    padding: 0.5em 1em;
    border-radius: 5em; /* nastaví zaoblenie krajov prvku */
}

.button:hover {
    opacity: var(--min_hover_opacity);
}

a.linkButton {
    background-color: var(--blue_light);
    color: var(--bg);
}

a.secondaryLinkButton {
    background-color: var(--bg0_h);
    color: var(--fg);
    outline: 1px solid var(--fg); /* nastaví obrys prvku */
}

a.headerTitleButton {
    display: flex;
    align-items: center;
    text-wrap-mode: nowrap;

    background-color: transparent;
    color: var(--fg);
    transition: background-color var(--transition);
}

a.headerTitleButton:hover {
    opacity: var(--max_hover_opacity);
    background-color: var(--bg1);
}

a.selectedHeaderTitleButton,
a.selectedHeaderTitleButton:hover {
    opacity: var(--max_hover_opacity);
    color: var(--bg0_h);
    background-color: var(--fg);
}

a.selectedHeaderTitle,
a.selectedHeaderTitle:hover {
    opacity: var(--max_hover_opacity);
    color: var(--fg);
}

a.PHPHeaderTitleButton,
a.PHPHeaderTitleButton:hover {
    opacity: var(--max_hover_opacity);
    color: var(--bg0_h);
    background-color: var(--blue_light);
}

a.PHPHeaderTitleButton:hover {
    opacity: var(--min_hover_opacity);
}

img {
    width: 20em;
    height: auto;
    border-radius: 1em;
    opacity: var(--min_hover_opacity);
    transition: opacity var(--transition);
    font-style: italic;
}

img:hover {
    opacity: var(--max_hover_opacity);
}


video {
    width: 20em;
    opacity: var(--min_hover_opacity);
    transition: opacity var(--transition);
    font-style: italic; /* nastaví štýl písma */
}

video:hover {
    opacity: var(--max_hover_opacity);
}

blockquote {
    font-style: italic;
    color: var(--fg2);
}

q {
    font-style: italic;
}

table,
th,
td {
    border: 1px solid var(--bg1); /* nastaví štýl okraju prvku */
    border-collapse: collapse; /* nastaví, aby prvky mali rovnaké okraje */
}

th,
td {
    padding: 0.1em 0.67em;
}

tr {
    transition: background-color var(--transition);
}

tr:nth-child(odd) {
    background-color: var(--bg0_h);
}

tr:hover {
    background-color: var(--bg1) !important;
}

main {
    margin: 1em auto 3em;
    max-width: var(--max-width); /* nastaví maximálnú šírku prvku */
}

@media (max-width: 64em) { /* toto "pravidlo" sa bude aplikovať, pokiaľ je šírka okna prehliadača menší než max-width */
    main {
        margin: 1em 1em 3em;
    }
}

/* index */


main.index {
    margin-top: 0;
    margin-left: unset; /* zruší predtým dané hodnoty vlastností */
    margin-right: unset;
    max-width: unset;
}


main.index video.hero-video,
main.index video.hero-video:hover {
    width: 100%;
    height: 16em;
    object-fit: cover; /* nastaví, aby video zaplnilo celý daný priestor, s tým, že sa použije celá šírka a odrezajú sa časti podľa výšky */
    opacity: 50%;
}

main.index h1 {
    position: absolute; /* nastaví, kde sa prvok nachádza, v tomto prípade sa používa na umiestnenie textu nad videom */
    top: 3em; /* nastaví výškovú pozíciu zhora */
    text-align: center;
    width: 100%;
    font-weight: 900;
    font-size: xxx-large;
    text-shadow: 0 0 10px var(--bg); /* nastaví tieň textu, aby sa garantovala kontrast textu s pozadím (videom) */
}

main.index section.main {
    margin-left: auto;
    margin-right: auto;
    max-width: var(--max-width);
}

@media (max-width: 64em) {
    main.index section.main {
        margin: 1em 1em;
    }
}

main.index section.main hgroup {
    display: flex;
    gap: 1em;
    align-items: center;
}

main.index section.main hgroup audio {
    height: 2rem;
}

main.index section.main p.buttonLinks {
    text-align: center;
}


/* portfolio */

article {
    min-width: 10em;
    max-width: 20em;
    background-color: var(--bg0_h);
    border-radius: 1em;
}

article h2 {
    padding: 0.5em 1em;
    margin: 0;
}

article p {
    width: inherit;
    padding: 0.5em 1em;
    margin: 0em 0.5em ;
}

article p.buttons {
    width: inherit;
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap; /* nastaví či má flexbox dať prvok, ktorý by sa normálne nezmestil, do ďalšieho riadku alebo nechať v rovnakom riadku */
    margin-bottom: 0.5em;
    gap: 0.5em;
}

article img {
    border-radius: 0;
    width: 100%;
}

.sectionPortfolio {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    justify-content: center; /* zarovná horizontálne krabice */
    align-items: center;
}

/* ??? */

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
        ". . ."
        ". . ."
        ". . .";
}

.container h6 {
    text-align: center;
    font-family: monospace;
    font-weight: 700;
}

.container2 h2 {
    text-align: center;
}

/* CHAT GPT */

.container2 {
  display: grid;

  /* 3 horizontal sections */
  grid-template-rows: 25% 50% 25%;
  grid-template-columns: 1fr;

  width: 100%;
  height: 100vh;
}

/* visualization only */
.container2 h2 {
  border: 1px solid var(--fg0);
}

/* remove last line if desired */
.bottom {
  border-bottom: none;
}

/* cv */

.cv {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    max-width: 42em;
}

.cv hgroup h1 {
    margin-bottom: 0;
}

.cv hgroup p {
    margin-top: 0;
    text-align: center;
    text-indent: 0;
    color: var(--fg2);
}

.cv p {
    text-align: start;
    text-indent: 50px; /* nastaví odsadenie textu (alebo prvej vety), aby sa približovala štandardného formátovania slovenských textov */
}

.cv h2 {
    text-align: start;
    border-bottom: var(--fg) 1px solid;
}

.cv p.footer {
    text-align: start;
    text-indent: 0;
}

.cv ul {
    text-align: start;
}

.cv b {
    color: var(--fg2)
}

/* kontakt */

section.contacts dt {
    color: var(--fg2);
    font-style: italic;
}