body {
    margin: 0;
    color: #276177;
    background-color: rgb(174, 206, 213);
    font-family: Arial, Helvetica, sans-serif;
}
header{background-color: #e72492;
color: rgb(250, 250, 250);
}

header h1 {display:block;
width:fit-content;
margin-left:auto;
margin-right:auto;
padding-top: 10px;}


.menu {
    display: flex;
    justify-content: center; /*vycentrovanie horizontalne*/
    gap: 15px; 
    flex-wrap: wrap; /*tlacidla sa mozu dat aj pod seba*/
}

.menu-btn {
    background: white;
    padding: 12px 20px;
    border-radius: 25px;
    text-decoration: none; /*odstrani podciarknutie*/
    color: #555;
    font-weight: bold;
    transition: 0.3s;
    margin-bottom: 20px;
}
.menu-btn:hover {
    background: #ffd6eb;
 transform: scale(1.05);
} /*ked prejdem mysou po bloku menu, zvacsi sa*/


main {
    padding: 0px;
}

.bublina {
    display: flex;
    align-items: center;
    gap: 30px;
    background: rgba(255,255,255,0.9);
    padding: 30px;
    border-radius: 25px;
    box-shadow: 0 6px 15px rgba(0,0,0,0.1);
    margin: auto;
}
/*profilovka*/
 .foto {
    position: relative;
}
.foto img {
    width: 180px;
    height: 180px;
    object-fit: cover;
    border-radius: 50%;   /* kruh */
    border: 4px solid #ffc2e2;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
} /*profilovka k*/

@media (max-width: 768px) /*profilovka pre telefon*/ {
    .bublina {
      flex-direction: column;
      text-align: center
  }
      
   .foto::before {
       left: 50%;
       transform: translateX(-50%) rotate(-20deg);
    }
      }

section {
    background-color: rgba(248, 249, 250, 0.9);
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    margin: auto;
}

h2 {
    color: #e72492;
}

footer {
    justify-content: center;
    text-align: center;
    padding: 20px;
    background: linear-gradient(90deg, #9d5379, #4c7291);
    color: rgb(255, 255, 255);
}

html,body {
    height:100%;
    margin:0%;
}

body{display:flex;
flex-direction:column;}

main{flex:1;}

/* Responzívny dizajn pre telefóny -header, menu */
@media screen and (max-width: 780px) {

    header {
        padding: 10px;
    }

    header h1 {
        font-size: 24px;
    }

    .menu {
        flex-direction: column;
        align-items: center;
        gap:0px;
    }

    .menu-btn {
        width: 70%;
        text-align: center;
    }

    

} 

main {
        padding: 20px;
    }

section {
        padding: 10px;
        border-radius: 15px;
    }

    h2 {
        font-size: 22px;
    }

    p {
        font-size: 16px;
        line-height: 1.6;
    }

    footer {
        font-size: 14px;
        padding: 15px;
    }
 .kvietky {
     position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         /*kontajner umiestneny na celu obrazovku*/
         pointer-events: none; /* aby neprekážali klikaniu */
        overflow: hidden; /*skryje kvietky, kt. su mimo obrazovky*/
        z-index: 0; /*postavenie POD na nulke - main , header a footer su na jednotke*/
    } 

        
 .kvietky span /*upravuje samostetne kazdy kvietok*/{
     position: absolute; /*presne umiestnenie kvietku*/
     font-size: 24px; 
    animation: floatUp 10s linear infinite; /*samotna animacia, trva 10 sekund,rovnaka rychlost,opakuje sa donekonecna*/
    opacity: 0.7; /*priehladnost od 0 do 1*/
 }
        
 /* náhodné pozície a oneskorenia */
.kvietky span:nth-child(1) { left: 10%; animation-delay: 0s; }
.kvietky span:nth-child(2) { left: 30%; animation-delay: 2s; }
.kvietky span:nth-child(3) { left: 50%; animation-delay: 4s; }
.kvietky span:nth-child(4) { left: 70%; animation-delay: 1s; }
.kvietky span:nth-child(5) { left: 90%; animation-delay: 3s; }
        
    @keyframes floatUp /*definuje animaciu- pohyb smerom nahor*/{
         0% {transform: translateY(100vh);
            opacity: 0; } /*na uplnom zaciatku - kvietok sa pohybuje po vertikale, bude uplne dole pod obrazovkou, a je neviditelny*/
        50% {opacity: 1;} /* v strede najvacsia viditelnost*/
         100% {transform: translateY(-10vh);
                opacity: 0;}        /*koniec animacie kvietok nad obrazovkou, opat priehladny*/
    }


.galeria-obrazok {
        width: 300px;
        max-width: 30%;
        border-radius: 8px;
        cursor: pointer;
        transition: 0.3s;
        box-shadow: 0 4px 10px rgba(0,0,0,0.2);
        flex-direction: row;
    }
    
    .galeria-obrazok:hover {
        transform: scale(1.05);
    }


.kvietkovy-zoznam {
        list-style: none;
        padding-left: 0;
    }
    
    .kvietkovy-zoznam li {
        position: relative;
        padding-left: 35px;
        margin-bottom: 12px;
        font-size: 18px;
    }
    
    .kvietkovy-zoznam li::before {
        content: "🌸";
        position: absolute;
        left: 0;
        top: 0;
    }

    .kvietkovy-zoznam2 {
        list-style: none;
        padding-left: 0;
    }
    
    .kvietkovy-zoznam2 li {
        position: relative;
        padding-left: 35px;
        margin-bottom: 12px;
        font-size: 18px;
    }
    
    .kvietkovy-zoznam2 li::before {
        content: "🌷";
        position: absolute;
        left: 0;
        top: 0;
    }

  /* TIMELINE */
    .timeline {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 50px;
        flex-wrap: wrap;
    }
    
    .bubble {
        background: #ffdced;
        border: 3px solid #a8d8ff;
    
        padding: 15px 25px;
        border-radius: 30px;
    
        font-weight: bold;
        text-align: center;
    
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }
    
    .line {
        width: 80px;
        height: 4px;
        background: #a8d8ff;
    }
/* MOBIL mapka*/
@media screen and (max-width: 768px) {
    
    .timeline {
        flex-direction: column;
        gap: 15px;
    }

    .line {
        width: 4px;
        height: 40px;
    }

    .obsah {
        flex-direction: column;
    }

}

    
    .kurz {
        background: #e8d9ff;
    }
    
    /* OBSAH */
    
    .obsah {
        display: flex;
        gap: 25px;
    }
    
    /* ľavá veľká časť */
    
    .skola-box {
        flex: 2;
        background: rgba(255,255,255,0.9);
        padding: 30px;
        margin:10px;
        border-radius: 25px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }
    
    /* pravá menšia časť */
    .kurzy-box {
        flex: 2;
        background: rgba(255,255,255,0.9);
        padding: 25px;
        border-radius: 25px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }
    
    main,
    header,
    footer,
    section {
        position: relative;
        z-index: 1;
    }