html{
background-color: rgb(211, 211, 211);
}

body {
background-color: antiquewhite;
padding: 20px;
border-radius: 5px;
margin: 10px 80px 10px 80px;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

nav.sticky {
    position: sticky;  /* hlavnú vec robí sticky */
    top: 0;            /* ostane na vrchu stránky */
    background-color: rgb(216, 181, 168); /* farba pozadia */
    z-index: 1000;     /* aby bolo nad ostatným obsahom */
    padding: 10px 0;   /* vertikálne odsadenie */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* jemný tieň pre efekt */
}
video {
  display: block;
  margin: 30px auto;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

h1,h2,h3{ color: rgb(54, 54, 66);}

table, th, td {border: 1px solid;
border-collapse: collapse;
}

h1{font-size: 40px;}
h2{font-size: 30px;}


.tabulka {
    width: 60%;
    margin: 30px auto; /* hore a dole 30px, vľavo/vpravo automaticky vystredí */
    border-collapse: collapse;
}


th {background-color: rgb(187, 119, 119);}

a:link, a:visited {
color: rgb(34, 28, 39);
font-size: smaller;}

a:hover {background-color: rgb(112, 110, 110);}

td {text-align: center;}
p{font-size: larger;}
li{font-size: 23px;}
li.menu {display: inline-block}
ul.menu {list-style-type: none;
margin: 0;
padding: 0;
text-align: center}
a.menu { 

padding: 13px;
background-color: rgb(216, 181, 168);
}

nav {font-size: larger;}

h1,h2 {text-align: center;}

div p{text-align: center;}

div {text-align: center;}

nav {text-align: left;}

div.hopa{word-spacing: 5px;;}

div.gallery {

    margin: 5px;

    border: 1px solid #ccc;

    display: inline-block; ;

    width: 180px;
}

  div.gallery:hover {

    border: 1px solid #777;
}

  div.gallery img {

    width: 100%;

    height: auto;
}

  div.desc {
    padding: 15px;

    text-align: center;

}
.skola-section {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
  max-width: 1000px;
  margin: 0 auto;
}

.skola-section .text {
  flex: 1;
  text-align: justify;
  font-size: 18px;
}

.skola-section .video video {
  border-radius: 12px;
  box-shadow: 0 0 15px rgba(0,0,0,0.3);
}

.arrow {
  position: absolute;
  top: 220px;   /* uprav podľa potreby */
  left: 870px; /* uprav podľa potreby */
  width: 100px; /* veľkosť šípky */
  transform: rotate(270deg); /* otočenie šípky smerom na video */
  z-index: 10; /* aby bola nad textom a videom */
}

.rozvrh-section {
  display: flex;
  justify-content: space-between; /* tabuľka vľavo, text vpravo */
  align-items: flex-start;
  max-width: 1000px;
  margin: 40px auto;
  gap: 30px;
  flex-wrap: wrap; /* na menších obrazovkách sa text presunie pod tabuľku */
}

.rozvrh-section .tabulka {
  flex: 1;
  min-width: 400px; /* tabuľka nebude príliš úzka */
}

.rozvrh-section .tabulka table {
  width: 100%; /* aby flexbox zafungoval */
  border-collapse: collapse;
}

.rozvrh-section .text {
  flex: 1;
  min-width: 300px; /* text nebude príliš úzky */
  text-align: justify;
  font-size: 18px;
  line-height: 1.6;
}

.highlight-link {
  color: #ba6161;       /* základná farba textu */
  text-decoration: none; /* bez podčiarknutia */
  transition: all 0.3s;  /* jemná animácia */
}

.zaluby-gallery {
  display: flex;
  justify-content: space-between; /* prvý obrázok vľavo, druhý vpravo */
  align-items: flex-start;
  gap: 30px; /* medzera medzi obrázkami */
  margin-top: 20px;
  flex-wrap: wrap; /* na mobil sa obrázky pod sebou */
}

.zaluby-gallery .gallery {
  flex: 1;
  max-width: 300px; /* obmedzí šírku obrázku */
  text-align: center;
}

.zaluby-gallery img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.zaluby-gallery .desc {
  margin-top: 8px;
  font-size: 16px;
  color: #333;
}
.arrow2 {
  position: absolute;
  top: 1190px;   /* uprav podľa potreby */
  left: 1180px; /* uprav podľa potreby */
  width: 150px; /* veľkosť šípky */
  transform: rotate(20deg); /* otočenie šípky smerom na video */
  
}

.arrow3 {
  position: absolute;
  top: 1330px;   /* uprav podľa potreby */
  left: 380px; /* uprav podľa potreby */
  width: 150px; /* veľkosť šípky */
  transform: rotate(110deg); /* otočenie šípky smerom na video */
  
}

.kompetencie-section {
  display: flex;
  justify-content: space-between; /* jeden blok vľavo, druhý vpravo */
  gap: 30px; /* medzera medzi blokmi */
  flex-wrap: wrap; /* pre mobilné zariadenia */
  max-width: 1000px;
  margin: 0 auto 40px auto;
}

.kompetencie-section .jazykove,
.kompetencie-section .pocitacove {
  flex: 1;
  min-width: 300px; /* bloky nebudú príliš úzke */
}
 


.kompik {
  position: absolute;
  top: 790px;   /* uprav podľa potreby */
  left: 1280px; /* uprav podľa potreby */
  width: 150px; /* veľkosť šípky */
  }
.matematik {
  position: absolute;
  top: 790px;   /* uprav podľa potreby */
  left: 140px; /* uprav podľa potreby */
  width: 100px; /* veľkosť šípky */
  }
.instagramik{
  position: absolute;
  top: 2290px;   /* uprav podľa potreby */
  left: 882px; /* uprav podľa potreby */
  width: 55px; /* veľkosť šípky */
  }

  .faceboocik{
  position: absolute;
  top: 2290px;   /* uprav podľa potreby */
  left: 810px; /* uprav podľa potreby */
  width: 50px; /* veľkosť šípky */
  }

a img {
  transition: transform 0.2s ease;
}

a img:hover {
  transform: scale(1.2);
  cursor: pointer;
}
.flag {
  width: 30px;
  height: auto;
  vertical-align: middle;
  margin-right: 8px;
  border-radius: 4px;
}
.icon {
  width: 30px;
  height: auto;
  vertical-align: middle;
  margin-right: 8px;
  border-radius: 4px;
}
.icon2 {
  width: 40px;
  height: auto;
  vertical-align: middle;
  margin-right: 10px;
  border-radius: 6px;
}