body{background-image: url('pinkswirls.jpg');
     background-repeat: no-repeat;
     background-attachment: fixed;
     background-size: cover;;
     font-family: "Apple Chancery", cursive;
     font-size: 1.3em;              /*zvacsi o 30%*/
     margin: 0 auto;                         /*centruje na stred celkovo*/
     overflow-wrap: break-word;       /*lomi dlhy text*/
     word-wrap: break-word;          /*starsie prehliadace*/
}
  

* {
    cursor: url('myska.png'), auto !important;
}


/*nadpisy - vsade*/

h2 {
    color: rgb(9, 35, 13);
    text-align: center;
    text-shadow: -2px -2px 11px #ffadf4;
}

h1 {
    color: rgb(26, 10, 27);
    text-align: center;
    text-shadow: -2px -2px 11px #ffadf4;
}


/*obrazky*/

.obrazky1 {
    max-height: 20rem;   /*nasobi zakladnu velkost*/
    width: auto;
}

.obrazky2 {
    max-width: 20rem; ;
    height: auto;
}

.obrazky3 {
    max-height: 25rem;
    width: auto;
}



/*index*/

header{
  display: flex;        /*vytvori flexibilny kontajner*/
  flex-direction: column;   /*uklada pod seba*/
  align-items: center;    
  text-align: center;     
  position:relative;    /*pohybuje sa, no yanechava si svoju relativnu poziciu + nenici prvky naokolo*/
}

.zajac{
  width: 19rem;        
  height: 15rem;
}

.cedula{
    width: 25rem;
    max-width: 100%;
    height: auto;
}




.navfoto{
  width: 15rem;        
  height: 15rem;}

.fotokrt{
    width: 40rem;
    max-width: 100%; 
    height: auto;
}
 

 


.kontajner {
  display: flex;
  flex-direction: column;
  align-items: center;   
  width: 100%;
}

.hlavny-obsah {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}




footer {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px;   /*prida na vsetky 4 strany*/   
  }






/*zeprofesionalnastranka*/  /*+hotove*/

.ja2 {
    max-width: 600px;
    margin: 0 auto;   
    text-align: center;
}

.uvodtext {
    text-align: center;
}

.patkane {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;             
  width: 100%;
}


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


.radobrazkov {
  display: flex;
  flex-direction: row;    
  justify-content: center;
  flex-wrap: wrap;     
  gap: 10px;              
  margin-bottom: 10px;    
}

table {
    width: 75%;
    border-collapse: collapse; 
    margin-left: auto;
    margin-right: auto;
    border: none;
    padding: 40px 20px;
    text-align: center;
    table-layout: fixed;
}

thead {
    color: rgb(26, 23, 23);
    text-shadow: -2px -2px 11px #ffadf4;
    text-align: center;
}


/*hotove*/

.cony {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;             
  width: 100%;
}

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



/*snadrazbudehotove*/ /*+hotove*/

.isolde {
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  gap: 20px;
}

.chrysalis {             /* + cintorin*/
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  gap: 20px;
}

.sigma {
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  gap: 20px;
}

.sigewinne {
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  gap: 20px;
}

.pinkie {
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  gap: 20px;
}






@media (min-width: 768px) {
  .kontajner {
    flex-direction: row; 
    align-items: flex-start; 
    justify-content: center;
    max-width: 1200px;        
    margin: 0 auto;           
    gap: 40px; 
  }
   .bocne-menu {
    width: 250px; 
    flex-shrink: 0; 
    display: flex;
    flex-direction: column;  
    align-items: center;
    gap: 15px;
  }

  .hlavny-obsah {
    flex-grow: 1;  
    padding: 20px;   
    display: flex;
    flex-direction: column;  
    align-items: center;     
    gap: 20px; 
  }

}

@media (max-width: 768px) {
  .isolde {
    flex-direction: column;
    gap: 10px;
  }

  .chrysalis {
    flex-direction: column;
    gap: 10px;
  }

  .sigma {
    flex-direction: column;
    gap: 10px;
  }

  .sigewinne {
    flex-direction: column;
    gap: 10px;
  }

  .pinkie {
    flex-direction: column;
    gap: 10px;
  }

  img, video, table {
  max-width: 100%;
  height: auto;
}
}