/*style sheet*/

body {/*background-color: rgb(214, 214, 214);*/ font-family:Verdana, Geneva, Tahoma, sans-serif;
  background-color: rgb(250, 216, 121); /* background-color → meni farbu pozadia podla vdanej farby (RGB) */
  
  background-image: linear-gradient(rgb(252, 224, 146), rgb(220, 200, 146)); /* nastavi pozadie ako linearny gradient (zmeš dvoch farieb) */
  background-repeat: no-repeat; /* vipne opakovanie pozadia */
  background-attachment: fixed; /*pozadie je zaseklnute a nebude sa hibať s polohou stranky */
  /*background-image: repeating-linear-gradient(rgb(250, 216, 121), rgb(217, 180, 77)); */}
  /* •body štil */

.sidebar_1 {left: 0px; /* kolko pixelov ma dať element od lava (zaroven aj element pricucne k tej strane*/
     top: 0px; /* kolko ho ma dať od hora */
     width: 180px; /* širka v pixeloch */
     height: 100%; /* viška v pixeloch */
     background-color:rgb(111, 1, 1);
     background-image: url(images/patern_1.png); /* nastavi obrazok ako pozadie */
     border: black solid 4px; /* oklraj, jeho farba śtyl a hrubka */
     position: fixed; /* pozicia elementu, fixed ho urobi zaseknuti, takže sa nebude posuvať s strankov*/
     z-index: 6;} /* z-index, ako visoko ma byt element nad inimy */


.top_container {right: 0px; top: 0px; width: 100%; height: 110px; position: fixed; background-color: blue;
   opacity: 100%; /* priesvitnost elementu (aplha) */
   z-index: 4;}

.top_deco_1 {right: 0px; top: 0px; width: 100%; height: 7vw; background-color: rgb(128, 198, 210); background-image: url("images/cloud_bg_1.jpg");}
#deco_logo_1 {margin-left: 200px; /* posunutie elementu od lava 200 pixelov */
              margin-top: 10px; /*posunutie elementu od hora 10 pixelov*/
              height: 6vw;}
.jazyk_button_1 {top: 10px; right: 10px;position: absolute; padding: 5px; font-size: 14px; background-color: lightgrey; border: thin solid black;
                border-radius: 5px;} /* border radius → zaobli okraj elementu */
.jazyk_button_1:hover {background-color: rgb(145, 145, 145);}
.flag_img {height: 15px; width: 22px;}

.navig_div_1 {left: 0px; bottom: 0px; width: 100%; height: 65%; background-color: blueviolet;
  background-image: linear-gradient(rgb(190, 77, 7), rgb(121, 48, 3));  border: black solid 4px;}

.main_container {left: 180px; top: 25%; height: 80%; width: 83%; position: absolute;} /* postion:absolute → nastavi abosulutnu poziciu elementu,
                                                                                      da sa dat do akejkolvek pozicie v rodičovskom elemente */

.main_page_1 {margin-left: 30px; margin-top: 25px; margin-right: 20px; width: 92%; height: 100%; /*background-color: yellow;*/ z-index: 3;
    /* padding-top: 10xp; padding-left: 10px; */ }

.main_img_1 {width: 200px; border: black solid 2px; margin-top: 15px;}
.main_article_1 {width: 20%;}
.article_img_1 {position: absolute; width: 200px; border: black solid 2px; margin-top: 15px;}
.article_p_1 {/*right: 10px;*/ position: absolute; padding-left: 220px;}
.article_a_1 {color: blue; text-decoration: none;}
.article_a_1:hover {color: rgb(84, 84, 255);
                    text-decoration: underline;} /*podčiarkne text*/
.red_text {color: red; background-color: black;}
.gallery_photo_1 {border: medium solid black;}
.gallery_photo_1:hover {border-radius: 20px; border: white solid medium;}
.region_mapa {border: medium solid black;}
/*.h_hidden {opacity: 100; font-size: 1px;}*/
h6 {opacity: 0;
    font-size: 1px;} /*velkost textu*/
.video_1 {border: black medium solid; width: 80%;}
.zvuk_1 {border: black medium solid; background-image: linear-gradient(rgb(230, 230, 230), rgb(167, 167, 167));}

.foot_div_1 { left: 0px; margin-top: 2000px; width: 100%; height: 110px; position: absolute; background-color: black; z-index: 5;}
.foot_div_2 { left: 0px; margin-top: 3000px; width: 100%; height: 110px; position: absolute; background-color: black; z-index: 5;}
.foot_menu_1 {margin-left: 41%; margin-top: 38px;}
.foot_a_1 {color: white; font-size: 20px; text-decoration: none;}
.foot_a_1:hover {text-decoration: underline;}
.foot_pipe_1 {color: white; font-size: 20px;}

.nav_1 {margin-left: 190px; margin-top: 20px; display: inline; position: absolute;}
/* .button_1 {margin-right: 5px; border: black solid medium; }
.button_1:hover {background-color: darkgray;}
.button_2 {right: 5px; border: black solid medium; position: absolute; margin-top: 13px;}
.button_2:hover {background-color: rgb(184, 184, 184);} */
.button_a_1 {text-decoration: none; background-color: rgb(230, 230, 230); border: black solid medium; padding: 5px 8px;
            font-size:25px; margin-left: 8px; margin-top: 30px; color: black; text-decoration: none;
            background-image: linear-gradient(rgb(230, 230, 230), rgb(167, 167, 167));}
.button_a_1:hover {background-color: rgb(145, 145, 145);
                  background-image: linear-gradient(rgb(145, 145, 145), rgb(110, 110, 110));}
.button_a_2 {right: 10px; border: black solid medium; position: absolute; margin-top: 13px; padding: 2px; padding-left: 10px; padding-right: 10px; font-size:30px;
            background-color: rgb(230, 230, 230); color: black;
            background-image: linear-gradient(rgb(230, 230, 230), rgb(167, 167, 167));}
.button_a_2:hover {background-color: rgb(145, 145, 145);
                  background-image: linear-gradient(rgb(145, 145, 145), rgb(110, 110, 110));}

.button_txt_1 {font-size:30px; margin-top: 2px; margin-bottom: 2px; margin-left: 5px; margin-right: 5px;}
.logo_img_1 {width: 150px; margin-left: 15px; margin-top: 12px;}

.side_table_1 {border-collapse: collapse; width: 80%; margin-left: 18px; margin-top: 10px;}
.side_tr_0 {border: black solid medium; background-color: rgb(150, 108, 0); color:white;}
.side_tr_1, .side_td_1 {border: black solid medium; background-color: rgb(165, 42, 42);
                        background-image: linear-gradient(rgb(189, 50, 50), rgb(151, 39, 39));}
.side_td_1 {}
.side_td_2 {width: 110px;}
.side_table_icon_1 {width: 16px; height: 16px; margin-left: 20%; margin-top: 15%;}
.side_table_a_1 {margin-left: 25%; font-size: 14px; color: black; text-decoration: none;}
.side_table_a_1:hover {text-decoration: underline;}
.side_th_0 {}

/* [!] Vilepšit zobrazenie založiek pri menšich obrazok */ 
.bookmarks_box_1 {position: fixed; width: 12vw; height: auto; background-color: rgb(192, 192, 192); right: 15px; top: 200px; border: medium solid black;
                  background-image: linear-gradient(rgb(192, 192, 192), rgb(165, 165, 165)); z-index: 7;}
/*.BM_ul_1 {padding-left: 25px;}
.BM_li_1 { padding: 0px;}
.BM_p_1 {font-size: 1vw;}*/
.BM_details {padding-left: 8px; padding-top: 3px; padding-bottom: 5px;}
.BM_a_1, .BM_a_1_2, .BM_a_1_3, .BM_a_1_4, .BM_a_1_5 {margin-top: 3px; color: black; text-decoration: none; font-size: 14px;}
.BM_a_1:hover, .BM_a_1_2:hover, .BM_a_1_3:hover, .BM_a_1_4:hover, .BM_a_1_5:hover {text-decoration: underline;}
.BM_a_1_2 {margin-left: 20px;} .BM_a_1_3 {margin-left: 40px;} .BM_a_1_4 {margin-left: 60px;} .BM_a_1_5 {margin-left: 80px;}

/* [!] vitvoriť automaticke zobrazovanie a schovanie */
.scroll_up_button {width: 50px; height: 50px; right: 20px; bottom: 30px; background-color: lightgray; border: medium solid black;
     position: fixed; font-size: 20px; z-index: 6;}

     /* [!] - Vipnuta animacia, treba zatial */
.scroll_up_a {/*animation-name: appear; animation-timeline: scroll(y);*/
                right: 20px; bottom: 20px; background-color: lightgray; padding: 10px; border: medium solid black; position: fixed; font-size: 30px; z-index: 6;
            padding-left: 15px; padding-right: 15px; padding-top: 4px; color: black; text-decoration: none;
            background-image: linear-gradient(rgb(192, 192, 192), rgb(165, 165, 165));}
.scroll_up_a:hover {background-color: rgb(170, 170, 170);
                    background-image: linear-gradient(rgb(170, 170, 170), rgb(150, 150, 150));}
@keyframes appear {
    0%{ opacity: 0; font-size: 30px;}
    10%{ opacity: 1; font-size: 30px;}
}
.scroll_up_button:hover {background-color: rgb(170, 170, 170);}

.break_section_1 {margin-left: 20px; margin-top: 10px;}
.break_p {font-size: 14px;}
.hr_1 {width: 50%; margin-right: 50px; border: thin solid black; margin-top: 10px;}
.hr_2 {border-color: black;}

/* [-] vitvorit nejaku nahradu za kalendar */
.calendar_holder {width: 145px; height: 160px; margin-left: 15px; background-color: gray; border: medium solid black;
                  background-image: linear-gradient(gray, rgb(73, 73, 73));}
/* [-]  */
.extra_section_1 {width: 145px; height: 80px; margin-left: 15px; margin-top: 20px; background-color: rgb(56, 56, 56); border: thin solid black;
                  background-image: linear-gradient(rgb(56, 56, 56), rgb(37, 37, 37));}


.bounce_img {width: 30px; height: 30px;
            animation-name: hor-movement, ver-movement; /*nazov animacie (ktore ma použit*/
            animation-duration: 3.141s, 1.414s; /*kolko bude animacia trvat*/
            animation-iteration-count: infinite; /*kolko krat by mal zahrat animaciu (nekonečno v tomto pripade*/
            animation-direction: alternate; /*smer animacie alternate → od začiatku do konca, a od konca po zaćiatok*/
            animation-timing-function: linear;} /*zoladenie animacie, animacia pôjde linearne*/

#mobile_text {color: darkblue;}
#mobile_button {background-color: greenyellow; border: solid medium white; color: white;}
h4 {color: grey;}
h4:hover {color:aquamarine; font-size: 21px; background-color: black;}

.pudding_img_1 {width: 200px; height: 200px; background-color: orange; padding: 20px; border: thick black solid; margin-left: 50px; margin-top: 50px;}
.pudding_img_2 {width: 200px; height: 200px; background-color: rgb(212, 104, 22); padding: 20px; border: thick rgb(255, 255, 255) solid; margin-left: 50px; margin-top: 50px; border-radius: 50px;}
.test_table_1 {border-collapse: collapse; border: black medium solid; margin-left: 50px; margin-top: 50px;}
.test_td_1 {width: 50px; height: 10px; border: black medium solid;}
.test_tr_1 {background-color: white; border: black medium solid;}
.test_tr_2 {background-color: red; border: black medium solid;}
.test_tr_3 {background-color: greenyellow; border: black medium solid;}

.test_table_2 {border-collapse: collapse; border: black medium solid; margin-left: 50px; margin-top: 50px;}
.test_td_1 {width: 50px; height: 10px; border: black medium solid;}
.test_tr_4 {background-color: red;}
.test_tr_4:nth-child(even) {background-color: rgb(0, 222, 30);}


@keyframes hor-movement {
  from {
    margin-left: 0%;
  }
  to {
    margin-left: 80%;
  }
} /* nastavi klučove snimky od po*/

@keyframes ver-movement {
  from {
    margin-top: 0%;
  }
  to {
    margin-top: 82%;
  }
}

/* media tags */
/* nastavuju ako sa rôzne štili elementov menia podla velkosti okna */

@media only screen and (max-width: 1160px) {
    .main_container {top: 170px;}
}

@media only screen and (max-width: 850px) {
    /*.button_1 {margin-top: 5px;}
    .button_txt_1 {font-size: 20px;}*/
    .button_a_1 {font-size: 20px;}
    .button_a_2 {font-size: 25px;}
    .jazyk_button_1 {font-size: 14px; top: 5px; right: 5px;}
    .deco_logo_1 {margin-top: 5px;}
}

@media only screen and (max-width: 700px) {
    .main_container {top: 140px;}
    .navig_div_1 {height: 90%; display: grid;}
    .button_a_1:nth-child(4) {margin-top: 50px;}
}

@media only screen and (max-width: 650px) {
    .button_1 {margin-top: 1px;}
    #mobile_button {background-color: red;}
}

.mis_div_0 {background-color: rgb(81, 39, 10); width: 100%; height: 100%; left: 0px; top: 0px; position: fixed;}
.mis_div_1 {background-color: rgb(43, 15, 0); left: 0px; top: 0px; width: 100%; height: 30px;}
.mis_img_1 {margin-left: 10px; margin-top: 10px;}
.mis_a_1 {padding: 5px;position: absolute; color: white; text-decoration: none;}
.mis_a_1:hover {text-decoration: underline;}
.mis_p {margin-left: 10px; margin-top: 8px; font-size: 25px; color: white;}