body,html{
  margin:0;
  padding:0;
  height:100%;
  position:relative;
  font-family:Montserrat,sans-serif;
  background-color:black;}

main{display:flex; flex-direction:row;}

a{display:inline-block; text-decoration:none;}

a img{vertical-align:middle;}

header{
  height:70px;
  background-color:black;
  display:flex;
  padding-left:20px;
  padding-right:20px;
  justify-content:center;
  align-items:center;
  position:relative;}

.headerLavo,.headerPravo{
  flex:1;
  display:flex;
  align-items:center;}

.headerPravo{
  justify-content:flex-end;}

.headerStred{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;}

.logo{width:50px; position:absolute; top:15px; left:20px;}

.vyhladavacKontajner{
  display:flex;
  align-items:center;
  justify-content:center;
  background-color:#1f1f1f;
  border-radius:40px;
  padding:25px 200px;
  color:#888;
  font-size:15px;}

.hladatH{position:absolute; left:65px;}

.vyhladavacKontajner span{position:absolute; left:100px; bottom:15px;}

.browse{position:absolute; right:15px;}

.domov{transition:background-color 0.2s ease;}

.domov:hover{
  background-color:#2a2a2a;
  cursor:pointer;
  transform:scale(1.1);
  transition:transform 0.1s ease;}

.ja:hover{
  cursor:pointer;
  transform:scale(1.1);
  transition:transform 0.2s ease;}

footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  height:85px;
  background-color:black;
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
  padding:0px 20px;
  z-index:50;}

.footerLavo{
  display:flex;
  align-items:center;}

.footerPravo{
  display:flex;
  justify-content:center;
  align-items:center;
  right:30px;
  position:relative;}

.footerStred{
  position:fixed;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  height:85px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  z-index:60;
  font-size:14px;}

footer #NazovTeraz{font-size:14.5px;}
footer #InfoTeraz{color:#b3b3b3; font-size:14px;}

nav{
  position:fixed;
  top:70px;
  left:10px;
  bottom:85px;
  width:300px;
  background-color:#121212;
  border-radius:10px;}

.Album.TERAZ{color:#5c3d80;}
.TERAZ{background-color:#222222;}
.pocuvanie{margin-left:90px;}

.Album{
  color:white;
  display:flex;
  max-width:260px;
  gap:10px;
  padding:10px;
  margin-left:10px;
  margin-right:10px;
  border-radius:10px;
  align-items:center;}

.navNadpis{
  color:white;
  padding-left:20px;
  padding-right:20px;
  align-items:center;
  display:flex;
  justify-content:space-between;}

.navPodNadpis{
  color:white;
  padding-left:20px;
  padding-right:20px;
  padding-bottom:5px;
  align-items:center;
  display:flex;
  justify-content:flex-start;}

.SK{
  background-image:url("ikony/sk2.png");
  background-size:cover;
  background-position:center;}

.EN{
  background-image:url("ikony/en2.png");
  background-size:cover;
  background-position:center;}
  
.DE{
  background-image:url("ikony/de.png");
  background-size:cover;
  background-position:center;}

.navPodNadpis div{
  background-color:#2a2a2a;
  border-radius:999px;
  font-size:14px;
  display:inline-block;
  padding:8px 12px;
  margin-right:10px;
  color:white;
  transition:background-color 0.2s ease;}

.navPodNadpis a{
  border-radius:999px;
  display:inline-block;
  padding:8px 12px;
  margin-right:10px;
  color:white;
  transition:background-color 0.2s ease;
  height:15px;
  width:50px;}

.navPodPodNadpis{
  font-size:13px;
  color:#b3b3b3;
  padding:15px 20px;
  display:flex;
  justify-content:space-between;
  align-items:center;}

.navPodNadpis div:hover{background-color:#3a3a3a; cursor:pointer;}

.Albumy{display:flex; flex-direction:column;}

.Scrollovanie{
  height:calc(90vh - 155px);
  overflow-y:auto;
  overflow-x:auto;
  flex:1;}

.pravastrana{
  display:flex;
  align-items:center;
  gap:8px;}

.Ikonky{
  display:flex;
  align-items:center;
  gap:10px;}

.Nazov{font-size:14px;}
.Info{color:#b3b3b3; font-size:13.5px;}
.hlavickaKontajner .Info{padding-bottom:10px;}

.N&I{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;}

.N&I+i{
  display:flex;
  align-items:center;}

.stredny{
  color:white;
  position:absolute;
  top:70px;
  left:320px;
  bottom:85px;
  right:10px;
  background:linear-gradient(to bottom, #44206D 0.1%, #121212 100%);
  background-attachment:scroll;
  background-repeat:no-repeat;
  background-size:100% 100%;
  border-radius:10px;
  z-index:10;
  overflow-y:auto;
  overflow-x:hidden;
  transition:background 0.5s ease;}

.uvod{
  margin-top:80px;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:column;}

.hlavicka{
  position:relative;
  max-width:100%;
  height:250px;
  background:linear-gradient(to bottom, #573380 0.1%, #512D7A 50%);
  padding:20px;
  display:flex;
  flex-direction:row;
  gap:20px;
  align-items:flex-end;}

.hlavicka .Nazov{font-size:100px;}
.hlavicka .Info{color:white; }
.hlavickaJa{border-radius:20px;}
.hlavicka .AlbumCover{box-shadow: 0 6px 20px #35115E;}
.hlavickaKontajner{display: flex; flex-direction: column;}

.miniNazov{font-size:13px;}
.JamN{display:flex; flex-direction:row; align-items:center;}

.obsah{
    position: relative;
    width: 100%;
    background: linear-gradient(to bottom, #44206D 0.1%, #121212 100%);
    padding: 20px;
    overflow-x: hidden;
    overflow-y: visible;
    text-align: center;
    box-sizing: border-box;
    flex-shrink: 0;}

/* Omne */

.obsah1{
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-wrap: nowrap;
    align-items: center;
    font-size: 1.3vw;
    max-width: 100%;
    word-break: break-word;}

.obsah1 p{
    background: rgba(147, 72, 208, 0.1);
    border-radius: 50px;
    padding: 0.5em 1em;
    display: inline-block;
    text-align: center;
    max-width: 90%;
    box-sizing: border-box;
    border: 1px #A5B5C5 solid;
    border-radius:50px;}

.obsah1 p:nth-child(2){color:#B3B3B5;}
.obsah1 p:nth-child(3){color:#A5B5C5;}

.Kontakt{
    margin-top: 20px;
    background: rgba(106, 125, 153, 0.5);
    border-radius: 50px;
    padding: 0.5em 1em;
    display: inline-block;
    font-size:1.4vw;
    border: white 1px solid;}

.IG{margin-top:10px;}
.Instagram, .Gmail{
    
    margin-top:5px;
    padding-left:20px; padding-right:20px;
    
    display:inline-flex;
    flex-direction:row; 
    justify-content:center; 
    align-items:center;
    border: white 1px solid;
    border-radius:50px;}

    
.obsah1 p:nth-child(4){background: rgba(147,72,208,0.7);}
.obsah1 a{color:white;}
.obsah1 a:hover{color:gray;}

/* Omne */

/* Skola */

.ZakladnaNadpis{
    color: white; 
    font-size:25px;
    padding: 5px 15px 5px 15px;
    border: 1px #A5B5C5 solid;
    border-radius:50px;
    background: #465666;}

.Zakladna img{border-radius:50px; border: 2px #8675B0 solid;}
.Zakladna{
    background: rgba(106, 125, 153, 0.5); 
    border-radius:50px;
    display:flex; 
    flex-direction:row;
    padding:10px 25px 10px 25px;
    overflow-x:hidden;
    overflow-y:hidden;
    gap:25px;
    border: 1px #A5B5C5 solid;
    border-radius:50px;}

.ZakladnaKontajner{
    flex:1; 
    display:flex; 
    flex-direction:column; 
    gap:10px; 
    justify-content:center; 
    align-items:center;}

.ZakladnaProjekty{
    display:flex;
    flex:1; 
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:10px;}

.ZakladnaNadpisProjekty{
    color: #D9E9F9; 
    font-size:25px;
    padding: 5px 15px 5px 15px;
    border: 2px #465666 solid;
    border-radius:50px;
    background: #8F9FAF;}

.Projekty{display:flex; flex-direction:column; gap:10px; align-items:center; height:50px;}
.Projekty a{text-decoration:none; color:white;}
.Projekty a:hover{color:gray;}

.StrednaNadpis{
    color: white; 
    font-size:25px;
    padding: 5px 15px 5px 15px; 
    font-size:25px;
    border: 1px #A5B5C5 solid;
    border-radius:50px;
    background: #465666;}

.Stredna img{border-radius:50px; border: 2px #8675B0 solid;}
.Stredna{
    background: rgba(106, 125, 153, 0.5); 
    border-radius:50px;
    display:flex; 
    flex-direction:row;
    padding:10px 25px 10px 25px;
    overflow-x:hidden;
    overflow-y:hidden;
    gap:25px;
    border: 1px #A5B5C5 solid;
    border-radius:50px;}

.StrednaKontajner{
    flex:1; 
    display:flex; 
    flex-direction:column; 
    gap:10px; 
    justify-content:center; 
    align-items:center;}

.StrednaProjekty{
    display:flex;
    flex:1; 
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:10px;}

.StrednaNadpisProjekty{
    color: #D9E9F9; 
    font-size:25px;
    padding: 5px 15px 5px 15px;
    border: 2px #465666 solid;
    border-radius:50px;
    background: #8F9FAF;}

.skoly{display:flex; flex-direction:column; gap:20px; justify-content:center; align-items:center;}

.Rozvrh{display:flex; flex-direction: column; align-content:center;}

table{
    border: 1px #A5B5C5 solid;
    border-collapse: collapse;
    background-color: rgba(106, 125, 153, 0.5);
    color: white;
    font-size: 2vw;
    text-align: center;
    width: 100%;
    min-width: 400px;}

th, td{

    border: 1px #A5B5C5 solid;

    padding: 1vw;

    white-space: nowrap;

    overflow: hidden;}

/* Skola */

/*Zá¾uby*/

.ZalubyKontajner{display:flex; flex-direction:column; gap:20px; justify-content:center; align-items:center;}

.HudbaNadpis{
    color: white; 
    font-size:25px;
    padding: 5px 15px 5px 15px; 
    font-size:20px;
    border: 1px #A5B5C5 solid;
    border-radius:50px;
    background: #465666;}

.Hudba{
    background: rgba(106, 125, 153, 0.5); 
    border-radius:50px;
    display:flex; 
    flex-direction:column;
    justify-content:center;
    align-items:center;
    padding:10px 25px 10px 25px;
    overflow-x:hidden;
    overflow-y:hidden;
    gap:5px;
    border: 1px #A5B5C5 solid;
    border-radius:50px;}

.Hudba a{text-decoration:none; color:white;}
.Hudba a:hover{color:gray;}

.FSNadpis{
    color: white; 
    font-size:25px;
    padding: 5px 15px 5px 15px; 
    font-size:20px;
    border: 1px #A5B5C5 solid;
    border-radius:50px;
    background: #465666;}

.FilmySerialy{
    background: rgba(106, 125, 153, 0.5); 
    border-radius:50px;
    display:flex; 
    flex-direction:column;
    justify-content:center;
    align-items:center;
    padding:10px 25px 10px 25px;
    overflow-x:hidden;
    overflow-y:hidden;
    gap:5px;
    border: 1px #A5B5C5 solid;
    border-radius:50px;}

.HryNadpis{
    color: white; 
    font-size:25px;
    padding: 5px 15px 5px 15px; 
    font-size:20px;
    border: 1px #A5B5C5 solid;
    border-radius:50px;
    background: #465666;}

.Hry{
    background: rgba(106, 125, 153, 0.5); 
    border-radius:50px;
    display:flex; 
    flex-direction:column;
    justify-content:center;
    align-items:center;
    padding:10px 25px 10px 25px;
    overflow-x:hidden;
    overflow-y:hidden;
    gap:5px;
    border: 1px #A5B5C5 solid;
    border-radius:50px;}

.KlavirNadpis{
    color: white; 
    font-size:25px;
    padding: 5px 15px 5px 15px; 
    font-size:20px;
    border: 1px #A5B5C5 solid;
    border-radius:50px;
    background: #465666;}

.Klavir{
    background: rgba(106, 125, 153, 0.5); 
    border-radius:50px;
    display:flex; 
    flex-direction:column;
    justify-content:center;
    align-items:center;
    padding:10px 25px 10px 25px;
    overflow-x:hidden;
    overflow-y:hidden;
    gap:5px;
    border: 1px #A5B5C5 solid;
    border-radius:50px;}

    

.ZalubyFotky{
    background: #425262; 
    border-radius:50px;
    display:flex; 
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    padding:10px 25px 10px 25px;
    overflow-x:hidden;
    overflow-y:hidden;
    gap:10px;
    border: 1px #A5B5C5 solid;
    border-radius:50px;}
    
.ZalubyFotky img{border-radius:20px; border: 5px black solid;}
.ZalubyFotky img:hover{transform: scale(1.01); transition: ease 0.1s; cursor: pointer;}

/*Zá¾uby*/

/*Fotogaleria*/

.FotogaleriaKontajner{
    display:flex; 
    flex-direction:column; 
    gap:20px; 
    justify-content:center; 
    align-items:center;}

.FotogaleriaKontajner img:hover{transform: scale(1.01); transition: ease 0.1s;}
.FotogaleriaKontajner video:hover{transform: scale(1.01); transition: ease 0.1s;}

.PrahaNadpis{
    color: white; 
    font-size:25px;
    padding: 5px 15px 5px 15px; 
    font-size:25px; 
    border: 1px #A5B5C5 solid;
    border-radius:50px;
    background: #465666;}

.Praha{
    background: rgba(106, 125, 153, 0.5); 
    border-radius:50px;
    display:flex; 
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    padding:10px 25px 10px 25px;
    overflow-x:hidden;
    overflow-y:hidden;
    gap:10px;
    border: 1px #A5B5C5 solid;
    border-radius:50px;}

.Praha img{border-radius:20px; border: 5px black solid}

.ChorvatskoNadpis{
    color: white; 
    font-size:25px;
    padding: 5px 15px 5px 15px;; 
    font-size:25px;
    border: 1px #A5B5C5 solid;
    border-radius:50px;
    background: #465666;}

.Chorvatsko{
    background: rgba(106, 125, 153, 0.5); 
    border-radius:50px;
    display:flex; 
    flex-direction:column;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    padding:10px 25px 10px 25px;
    overflow-x:hidden;
    overflow-y:hidden;
    gap:10px;
    border: 1px #A5B5C5 solid;
    border-radius:50px;}

.Chorvatsko img{border-radius:20px; border: 5px black solid}
.Chorvatsko video{border-radius:20px; border: 5px black solid}

.PolaroidyNadpis{
    color: white; 
    font-size:25px;
    padding: 5px 15px 5px 15px; 
    font-size:25px;
    border: 1px #A5B5C5 solid;
    border-radius:50px;
    background: #465666;}

.Polaroidy{
    background: rgba(106, 125, 153, 0.5); 
    border-radius:50px;
    display:flex; 
    flex-direction:column;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    padding:10px 25px 10px 25px;
    overflow-x:hidden;
    overflow-y:hidden;
    gap:10px;
    border: 1px #A5B5C5 solid;
    border-radius:50px;
    
    position:relative;}

.Polaroidy img{border-radius:20px; border: 5px black solid;}

.Laura{position:absolute; top:85%; right:10px; color:rgba(107,126,154, 0.1)}

/*Fotogaleria*/

.stredny span{font-size:5vw; padding-bottom:10px; margin-top:100px;}
.PodNadpis{font-size: 2vw; color:#B3B3B5; padding-bottom:10px;}
.PodPodNadpis{font-size: 1.5vw; color:#708090;}
.stranka{font-size:1vw; margin-top:100px;}


/*SCROLLBAR*/
.stredny::-webkit-scrollbar, .Scrollovanie::-webkit-scrollbar{
  width: 8px; /* Width of the scrollbar */
  height: 20px;}
  
.stredny::-webkit-scrollbar-track, .Scrollovanie::-webkit-scrollbar-track{
  background: #1e1e1e; /* Track background */
  border-radius: 10px;}
  
.stredny::-webkit-scrollbar-thumb, .Scrollovanie::-webkit-scrollbar-thumb{
  background-color: #888; /* Scrollbar color */
  border-radius: 10px;
  border: 2px solid transparent;}
  
.stredny::-webkit-scrollbar-thumb:hover, .Scrollovanie::-webkit-scrollbar-thumb:hover{
  background-color: #555; /* Color on hover */
}
/*SCROLLBAR*/
  

.Secret{
  color: #121212;}

/*                 PREHRAVAC                    */

.PlayingPaused, .Next, .Previous{
  position: relative;
  top: 0;
  left: 0;
  right: 0;}

.prehravacKontajner{
  display: flex;
  flex-direction: column;
  align-items: center;}

.songKontajner{
  display: flex;
  align-items: center;
  gap: 10px;
  color: white;}

.prehravanieKontajner{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 25px;}

.prehravanie{
  cursor: pointer;
  transition: transform 0.1s ease;}

.prehravanie:hover{
  transform: scale(1.1);}

.progressKontajner{
  display: flex;
  align-items: center;
  gap: 10px;
  width: 600px;
  font-size: 0.85em;
  user-select: none;
  margin-top: 6px;
  justify-content: center;}
  
.time{color:#b3b3b3;}

.progress-bar{
  flex-grow: 1;
  height: 4px;
  background-color: #444;
  border-radius: 2px;
  position: relative;
  overflow: visible;
  cursor: pointer;}

.progress-fill{
  height: 100%;
  background-color: white;
  width: 0%;
  border-radius: 2px;}

.progressDot{
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.2s ease;}

.Album:hover{background-color:#222222; cursor: pointer;}

.Special:hover{color:#E2BD00}

.AlbumCover{background-color:#121212; border-radius:10px;}

#Pridat{background-color:#121212; border-radius:20px;}

#AlbumCoverTeraz{border-radius:5px;}

.ovladaniehlasitosti{
  display: flex;
  align-items: center;
  gap: 8px;
  color: white;
  padding-right: 15px;
  padding-left: 15px;}

#hlasitostSlider{
  appearance: none;
  width: 100px;
  height: 4px;
  background: linear-gradient(to right, white 100%, #888 0%);
  border-radius: 2px;
  cursor: pointer;}

#hlasitostSlider::-webkit-slider-thumb{
  appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: white;
  cursor: pointer;}

#hlasitostSlider::-moz-range-thumb{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: white;
  cursor: pointer;}

/*                 PREHRAVAC                    */

/* media */

@media (max-width: 1300px){ .hlaslavo{display:none;}}

@media (max-width: 1000px){

  main{
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow-x: hidden;
    overflow-y: hidden;}

  .vyhladavacKontajner img{display: none;}
  
  .vyhladavacKontajner{ 
    padding: 10px 20px;
    font-size: 14px;
    max-width: 90%;
    width: auto;}

  .vyhladavacKontajner span{
    position: static;
    margin-left: 10px;}

  .hladatH{display: none;}

  .headerStred{
    position: static;
    transform: none;
    justify-content: center;}

  .netreba{display: none;}

  nav{
    position: static;
    width: 90%;
    height: 160px;
    margin: 10px 0;
    border-radius: 10px;}

  .navPodNadpis{justify-content: center;}
  .navPodPodNadpis{display: none;}

  .stredny{
    position: static;
    width: 90%;
    max-height: calc(66vh - 85px);
    margin-bottom: 20px;
    margin-top: 10px;
    border-radius: 10px;
    font-size: 4.5vw;
    overflow-y:auto;}
    
  footer{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    height: 85px;
    box-sizing: border-box;}

  header{
    height: 70px;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;}

  .footerLavo, .footerStred{
    flex: 1;
    min-height: 0;
    max-height: 85px;
    overflow: hidden;}

  .progressKontajner{width: 350px;}

  .hlaslavo, .hlaspravo{display: none;}

  .Albumy{
    flex-direction: row;
    overflow-x: auto;
    white-space: nowrap;
    padding: 5px;}

  .Albumy::-webkit-scrollbar{height: 8px;}
  .Albumy::-webkit-scrollbar-track{background: #1e1e1e;}
  .Albumy::-webkit-scrollbar-thumb {background: #888;}
  .Albumy::-webkit-scrollbar-thumb:hover {background: #555;}

  .stredny span{
    font-size: 6vw;
    padding-bottom: 10px;}

  .PodNadpis{
    font-size: 3vw;
    padding-bottom: 10px;}

  .PodNadpis{font-size: 2.5vw;}
  .PodPodNadpis{font-size: 2vw;}

  .stranka{font-size: 1.5vw;}

  .pocuvanie{margin-left: 5px;}

  .footerLavo{transform: scale(0.9); transform-origin: left center;}

  .hlavicka{height:150px;}
  .hlavicka .AlbumCover{height:150px; width:150px;}
  .hlavicka .Nazov{font-size:50px;}
  
  .Kontakt{font-size:2.5vw;}
  .Instagram{font-size:1.5vw;} .Instagram img{width:20px; height:20px;}
  .Gmail{font-size:1.5vw;} .Gmail img{width:20px; height:20px;}

.ZakladnaKontajner{font-size:11px;} .ZakladnaKontajner img{height:auto;width:70%;}
.StrednaKontajner{font-size:11px;} .StrednaKontajner img{height:auto;width:70%;}
.Projekty{font-size:11px;}

.ZalubyKontajner{font-size:10px;}

.Laura{font-size:80%; right:10%;}

}

@media (max-width: 600px){

  .footerPravo{display:none;}
  .progressKontajner{width:180px;}
  
  footer{
    display: flex;
    justify-content: space-between;
    align-items: center;}
    
  .footerStred{
    position: static;
    transform: none;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 85px;}
    
  .footerLavo{
    flex: 1;
    justify-content: flex-start;}
}