/*kontajner menu - velky obdlznik okolo poloziek menu*/
.menu {                                                /*vyberie class="menu", na ktoru sa budu styly aplikovat*/                                            
    display: flex;                                     /*vytvori flexibilny kontajner, ktory umoznuje polozkam pruzne reagovat na dostupny priestor*/ 
    align-items: center;                               /*zarovna polozky na stred*/     
    list-style: none;                                  /*odstrani odrazky/cislovanie zo zoznamu*/  
    padding: 10px 20px;                                /*vnutorny okraj, 10px zhora, zdola, 20px zlava, sprava*/ 
    background: linear-gradient(to right,#cbb5eb, #9a71d2);/*farba pozadia menu*/
    border-radius: 15px;                               /*zaobli rohy menu o 15px*/
    width: fit-content;                                /*sirka menu sa prisposobi obsahu*/
    }                                                  /*ukoncenie CSS bloku*/
/*jednotlive odkazy - male obdlzniky v menu, selektor typu class*/
.menu li a {                                           /*vybera odkazy <a> v <li> v ul class="menu"*/
    display: block;                                    /*zmeni odkaz na blokovy prvok, padding potom funguje na cely tlacidlovy tvar*/
    padding: 10px 13px;                                /*vnutorny okraj, 10px zhora, zdola, 18px zlava, sprava*/ 
    background:linear-gradient(to bottom ,#bb97e8, #8855d0);                       /*farba pozadia menu*/
    color: white;                                    /*biela farba textu*/
    text-decoration: none;                             /*odstrani podciarknutie odkazu*/
    border-radius: 10px;         
    font-size: 18px;                                   /*velkost pisma */
    font-weight: 800;                                  /*nastavi tucne pismo*/
    letter-spacing: 1px;                               /*prida medzery medzi pismenami */
    margin: 11px;                                      /*vonkajsie odsadenie medzi tlacidlami*/
    padding: 15px;                                     /*vnutorne odsadenie, cize medzera medzi slovom na tlacidle a vonkajsim okrajom tlacidla*/
}
.menu li a:hover {                                     /* hover efekt */
    background: linear-gradient(to bottom, #a14ba8, #9832a3); 
    transform: scale(1.2);                             /* mierne zvacsi tlacidlo */
    box-shadow: 5px 10px 20px rgba(59, 4, 51, 0.2);  /* prida jemny tien, posun tiena vodorovne(dolava/doprava), zvisle, rozmazanie tiena*/
    cursor: pointer;                                   /* ukazovatel ruky */
    transition: 0.5s ease;                             /*prida plynuly prechod 0.7 sekundy pre vsetky zmeny, napr. hover efekt*/
}
body {
    background: radial-gradient(circle, #e2d8f2, #f4f2f5);
    font-size: 18px;
    line-height: 1.5;
    display: flex;              
    flex-direction: column;    
    align-items: center;   
}
h1, h2, h3, h4 {                       /*Selektor typu (nazvu HTML prvku), ide o aplikaciu na vsetky nadpisy h1, h2, h3, h4 na vsetkych strankach*/
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;           
    letter-spacing: 1.5px;  
    font-weight: 600;
    margin-top: 30px;
    margin-bottom: 10px;
}
h1 {
    font-size: 26px;
    text-transform: uppercase;
    background-color: rgb(107, 105, 108); 
    border: 2px solid #a88ad3;                     /*solid=plna ciara, 2px je hrubka ramiku */
    padding: 10px 20px;                              /*vnutorne odsadenie medzi textom a okrajom ramiku*, 10px=horny a spodny, 20px=lavy a pravy*/
    display: inline-block;
    border-radius: 10px;
    background-image: linear-gradient(90deg, #b769d3, #6d2e8d);  /*vytvara linearny gradient, 90deg=smer gradientu zlava doprava*/
    background-clip: text;                                           /*pozadie sa orezava podla tvaru textu*/
    -webkit-background-clip: text;                                   /*pre Chrome, Safari a Edge, nutne pre spravne zobrazenie gradientu textu*/
    -webkit-text-fill-color: transparent;                            /*robi text priehladnym*/
    box-shadow: inset 0 0 0 10px #c6aae9;                          /*vytvara vnutorny ramik dovnutra, farba vnutorneho ramika*/
    text-align: center;                                              /*centrovanie textu horizontalne vo vnutri bloku, nadpis bude centrovany*/
}
h1:hover {
    background-color: #7342c6;       
    box-shadow: inset 0 0 0 15px #d0b3f0;                         /*hrubsi vnutorny ramik pri hover*/
    transform: scale(1.2);   
    cursor: s-resize;  
    transition: 0.5s ease;                                             
}
h2 {
    font-size: 23px;
    color:#8855d0;
}
h3 {
    font-size: 20px;
    color:#694c8c;
}
h4 {
    font-size: 16px;
    color:#7e5aa9;  
}
#zadanie-prikladu {                          /*Selektor jedinecneho identifikatora ID, ktory je aplikovany vzdy na 1 prvok, na strankach cykly a podmienka*/
    font-family:"Pacifico", cursive;
    font-size: 24px;
    color: #7342c6;
    margin-top: 30px;
}
#zadanie-prikladu::before {
    content: "\1F4CC"; 
    margin-right: 10px;
    font-size: 22px;
}
img:not(.logoHlavnaStranka) {                          /*vsetky obrazky okrem tych, ktore su v tabulke*/
    border: 4px solid #ab91cf;             /*oramovanie obrazkov*/
    border-radius: 5px;
    transition: 0.3s ease;
}
img:hover {                         /* Hover efekt pre vsetky obrazky */
    transform: scale(1.1);          /*zvacsenie obrazka */
    border-color: #6d2e8d;        /* zmena farby oramovania pri hover */
}
.umiestnenie {                   /*Obrazok a text vedla seba ako bloky*/
    display: flex;               
    flex-direction: row;         /*text a obrazok sa zobrazia vodorovne vedla seba, ak zmenim na row-reverse, obrazok a text si vymenia pozicie, dalsie moznosti su column, column-reverse*/
    align-items:center;          /*posun oramovaneho textu*/
    gap: 10px;                  /* medzera medzi textom a obrazkom */
    max-width: 950px;           /* sirka textu a obrazka */
    margin: 0 auto;             /* centrovanie celej sekcie na stranke */
}
/* Textova cast vlavo */
.odlisnosti {
    flex: 0 0 280px;             /* pevna sirka textu */                     
    text-align: justify;         /*text v bloku bude zarovnany do bloku*/
    background-color: #d4d0da;    
    padding: 0 19px 19px 19px;              
    border-radius: 20px;  
    display: flex;                
    flex-direction: column;       
    justify-content: center;      /* vertikalne centrovanie textu v bloku */                 
}
.mapa:hover {
    transform: scale(1.1);        /*ak zmenim scale na 0.8, obrazok sa zmensi*/          
    cursor: pointer;  
    transition: transform 0.3s, box-shadow 0.3s;                          
}
.obtekanie {                      /* OBTEKANIE OBRAZKU */
    max-width: 700px;             /* sirka celeho bloku */
    margin: 0 auto;  
    padding-left: 200px;         /*odsadenie obrazku, posuva obrazok aj text*/    
}
.obtekanie .obrazok {
    float: left;                 /* obrazok vlavo, text ho obteka, pre vymenu pozicii float:right */
    width: 15%;                  /* obrazok zaberie 25%*/
    margin: 15px 25px 2px 0;     /* medzery okolo obrazku: hore, vpravo, dole, vlavo */
    border: 3px solid #9c14e6; /*ramik okolo obrazka */
    border-radius: 8px;          /* zaoblene rohy */
}
.obtekanie p {
    text-align: justify;         /* text zarovnany do bloku */
    line-height: 1.5;            /* medzera medzi riadkami */
    letter-spacing: 2px;
}
.obtekanie::after{
    content:"";
    display:block;
    clear: both;                /*zabezpeci zaciatok dalsieho obsahu pod obrazkom*/
}
hr {
  border-top: 2px dashed rgb(40, 19, 71);     /* prerusovana ciara */
  margin: 30px 0;
}
table {
  border-collapse: collapse;   /* odstrani medzery medzi bunkami tabulky, aby sa hrany spojili, aby bola tabulka celistva*/
  width: 70%;
  text-align: center;          /* zarovna obsah vsetkych buniek tabulky na stred */
  margin-left: auto;           /* automaticky nastavi lavy okraj pre horizontalne centrovanie tabulky */
  margin-right: auto;          /* automaticky nastavi pravy okraj pre horizontalne centrovanie tabulky */
}
table caption {                /* Nadpis tabulky */
    font-size: 1.3rem;
    font-weight: bold;
    color: #250a3c;
    margin-bottom: 7px;       /* medzera pod nadpisom */  
}
table th {                    /* Hlavicka tabulky */
    color: #250e3a;
    background-color: #9d87c3;
    font-weight: 600;
}
table, tr, td, th {
  border: 3px solid rgb(69, 7, 98); 
  padding: 15px;
}
tr:nth-of-type(2n) {                /*vybera kazdy druhy riadok tabulky*/  
  color: rgb(162, 74, 251);
  background-color: beige;
  text-align: center;
}
td img {                           /*uprava obrazku vlozeneho do tabulky*/  
  width: 30px;
  height: 40px;
}
table td {                       
    font-size: 20px;              /*uprava pisma v bunkach tabulky*/
    font-weight: 450;
}
.nad-tabulkou {
  text-align: center;
  margin-bottom: 20px;            /*medzera medzi textom a tabulkou*/
}
.pod-tabulkou { 
  margin-left: auto;             /*nastavi automaticky okraj zlava aj sprava, blok sa horizontalne vycetruje*/ 
  margin-right: auto;
  width: fit-content;            /*sirka textu rovnaka ako tabulky*/
}
blockquote {
  text-align: justify;          /* zarovna text do bloku, oba okraje su rovne */
  width: 70%;                
  margin: 20px 0;               /* Vertikalna medzera nad a pod citatom */
  padding-left: 20px;           
  padding-right: 20px;          
}
.mapa {
    flex: 0 0 530px;              /* pevna sirka vedla textu */
    transform: translateY(-25px); /*posun obrazkovej mapy smerom hore*/
}
.obrazkovaMapa {
    width: 100%;        
    height: 450px;
    object-fit: cover;          /* zabezpeci, aby sa obrazok nezdeformoval */
}
.syntax-podmienka {
    font-family: monospace;
    line-height: 1.5;
}
.syntax-podmienka p {
    margin: 0 0 5px 0;        /* medzera medzi riadkami */
}
.syntax-podmienka .odsadene30,
.priklad1 .odsadene30,
.priklad4 .odsadene30,
.priklad2 .odsadene30,
.priklad5 .odsadene30,
.priklad3 .odsadene30,
.priklad7 .odsadene30,
.priklad6 .odsadene30, 
.priklad8 .odsadene30 
{
    margin-left: 30px;
}
.syntax-podmienka .odsadene70,
.priklad1 .odsadene70,
.priklad4 .odsadene70,
.priklad2 .odsadene70,
.priklad3 .odsadene70, 
.priklad7 .odsadene70, 
.priklad8 .odsadene70 
{
    margin-left: 70px;
}
.syntax-podmienka .odsadene110, 
.priklad1 .odsadene110,
.priklad4 .odsadene110
{
    margin-left: 110px;
}
.syntax-podmienka code,      /* zvyrazni klucove slova ako if, else*/
.viacnasobne code {
    font-weight: bold;       
}
.textyVedla {
    display: flex;
    flex-direction: row;
    gap: 10px;
    max-width: 1450px;
    margin: 0;
    align-items: flex-start;
}
/* Spolocny styl pre sekcie */
.syntax-podmienka,
.viacnasobne,
.priklad1,
.priklad4
{
    display: table;                    /* ramik sa prisposobi obsahu */
    background-color: #d8d7d8b6;  
    border: 2px solid #756d7a;       /* fialovy ramik */
    border-radius: 10px;          
    padding: 20px;                
    margin: 10px 0;                   /* odsadenie od okolitych prvkov */
}
.syntax-podmienka {                   /*nastavenie sirky, aby lava sekcia bola pevna a prava sa prisposobovala */
    flex: 0 0 650px;                  /* pevna sirka lavej sekcie:Syntax podmien prikazu v jazyku C, Riesenie prikladu*/
}
.viacnasobne,
.priklad4
{
    flex: 1;                         /* prava sekcia zabera zostavajuci priestor*/
}
.viacnasobne{
    transform: translateY(2px);     /*posun smerom dole*/
}
.zoznam-cykly {
    padding: 0;
    margin: 0;
    list-style: none;
}
.zoznam-cykly li {                     /* Polozky zoznamu vedla seba*/
    display: inline-block;
    margin-right: 22px;
    padding: 10px;
    border: 1px solid rgba(181, 181, 181, 0.3);
    background-color: rgb(248, 249, 248);
    text-align: center;
    vertical-align: top;               
}
.zoznam-cykly li img {              /* Obrazky v neusporiadanom zozname */
    display: block;
    margin: 0 auto 5px;
    width: 40px;            
    height: 40px;
}
.priklad2vystup {                   /* priklad + vystupu vedla seba */
    display: flex;
    gap: 80px;
    align-items: flex-start;
}
.vystup {                                  /*vystup (aside)*/
    border: 1px solid #ccc;
    background-color: rgb(195, 197, 197);
    padding: 15px;
    width: 200px;
    height: auto;
    overflow: auto;
    border-radius: 8px;
    margin-top: 110px;
}
.priklad5vystup5 {
    display: flex;
    gap: 50px;                           /* medzera medzi kodom a vystupom */
    align-items: flex-start;            /* vertikalne zarovnanie hore */
}
.priklad5 {
    flex: 1; 
}
.vystup5 {
    border: 1px solid #ccc;
    background-color: rgb(195, 197, 197);
    padding: 15px;
    width: 200px;
    height: 120px; 
    overflow: auto;
    margin-top: 60px;                     /* posun vystupu trochu nizsie */
}
.video-section iframe {
    width: 100%;                      /*na mobile sa zmensi*/
    max-width: 700px;                 /*na desktope bude max 700px*/
    height: 400px;
    height: 350px;
    border: 2px solid #756d7a;
    border-radius: 10px;
}
.prikazyImg {
    width: 800px;
    height: 290px;
}
.komentareImg {
    width: 700px;
    height: 230px;
}
.operatoryImg {
    width: 600px;
    height: 240px;
}
.menu li  img.logoHlavnaStranka {
    width: 55px;
    height: 55px;
    display: block;
    margin: 0;
    padding: 0;
}
.menu li.logo-item a {
    background: none;
    padding: 0;
    margin: 0;
    border-radius: 0;
}