body {
    background-color: #F5F5F5; /* Svetlejšia farba pozadia */
    margin: 0;
    padding: 0;
    font-family: 'Arial', sans-serif;
}

h1 {
    font-family: 'Inter', sans-serif;
    margin: 0;
    padding: 20px;
    text-align: center; /* Centrovanie textu */
    font-size: 90px; /* Zníženie veľkosti písma */
    color: #2E3A4D; /* Tmavšia farba */
}

h2 {
    margin: 50px 0 20px; /* Rozmiestnenie okrajov */
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 40px; /* Zníženie veľkosti písma */
    color: #2E3A4D;
    margin-top: 100px;
}

section {
    margin: 80px; /* Zmenšenie okrajov */
    padding: 20px;
    background-color: #FFFFFF; /* Biely pozadie pre sekcie */
    border: 1px solid #E1E1E1; /* Jemný okraj */
    border-radius: 8px; /* Zaoblenie rohov */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Jemný tieň */
    text-align: center;
}

h3 {
    font-size: 28px; /* Zníženie veľkosti písma */
    color: #c92b2b; /* Pridanie farby textu */
}

.left-panel {
    position: fixed;
    top: 10px;
    left: 0px;
    width: 100px;
    
    background-color: #c92b2b9e;; /* Farba panelu */
    color: white;
    padding: 20px;
    border: 1px solid #c92b2b;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.5);
}

.left-panel a {
    color: white;
    text-decoration: none;
    display: block;
    padding: 10px 0;
}

.left-panel a:hover {
    background-color: #b82929; /* Tmavšia farba po hover */
}

.navigation-menu {
    list-style-type: none; /* Zrušenie bodiek v zozname */
    padding: 0;
}

ul {
    padding: 0;
}

.dokumenty {
    margin: 20px 80px 0px 80px; /* Okraje nad a pod */
    text-align: center; /* Centrovanie textu */
    font-family: 'Inter', sans-serif;
    font-size: 18px; /* Veľkosť písma */
    color: #2E3A4D; /* Tmavá farba textu */
    padding: 15px; /* Vnútorné okraje */
    background-color: #F9F9F9; /* Svetlošedé pozadie */
    border: 1px solid #E1E1E1; /* Jemný okraj */
    border-radius: 8px; /* Zaoblenie rohov */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Jemný tieň */
}

#harmonogram {
    margin: 20px auto; /* Priestor nad a pod */
    max-width: 800px; /* Maximálna šírka */
    padding: 20px; /* Vnútorné okraje */
    background-color: #F9F9F9; /* Svetlošedé pozadie */
    border: 1px solid #E1E1E1; /* Užší okraj */
    border-radius: 8px; /* Zaoblenie rohov */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Jemný tieň */
}

.harmonogram-objekt {
    margin: 15px 0; /* Priestor medzi položkami */
    padding: 15px; /* Vnútorné okraje pre lepší vzhľad */
    background-color: #FFFFFF; /* Biele pozadie pre jednotlivé položky */
    border: 1px solid #E1E1E1; /* Okraj pre jednotlivé položky */
    border-radius: 5px; /* Zaoblenie rohov pre položky */
    transition: background-color 0.3s; /* Prechod pre hover efekt */
}

.harmonogram-objekt:hover {
    background-color: #f1f1f1; /* Zmena pozadia pri hover */
}

.harmonogram-objekt h3 {
    font-family: 'Inter', sans-serif; /* Typ písma */
    font-size: 20px; /* Veľkosť písma nadpisu */
    margin: 0; /* Zrušenie predvolených okrajov */
}


#prototyp_title {
    font-family: 'Inter', sans-serif; /* Typ písma */
    font-size: 24px; /* Veľkosť písma pre nadpis */
    text-align: center; /* Centrovanie nadpisu */
    margin: 20px 0; /* Priestor nad a pod nadpisom */
    padding-top: 100px;
}

#prototyp_gallery {
    display: flex; /* Flexbox na zobrazenie obrázkov vedľa seba */
    justify-content: center; /* Centrovanie obrázkov */
    flex-wrap: wrap; /* Zalamovanie, ak je málo miesta */
    gap: 15px; /* Priestor medzi obrázkami */
    margin: 20px 0px; /* Priestor okolo galérie */
}

.prototyp-img {
    max-width: 200px; /* Maximálna šírka obrázkov */
    height: auto; /* Automatické prispôsobenie výšky */
    border: 1px solid #E1E1E1; /* Svetlý okraj okolo obrázka */
    border-radius: 5px; /* Jemné zaoblenie rohov */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Jemný tieň */
    transition: transform 0.3s ease; /* Animácia pri prechode myšou */
}

.prototyp-img:hover {
    transform: scale(2.50); /* Zvýraznenie obrázka pri prechode myšou */
}

#databazy_title {
    font-family: 'Inter', sans-serif;
    font-size: 24px;
    text-align: center;
    margin: 20px 0px;
    padding-top: 100px;
}


#databazy_gallery,
#tabulky_gallery,
#login_gallery,
#nav_gallery,
#view_gallery,
#admin_view_gallery,
#filter_gallery{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    margin: 20px 0px;
}

.databazy-img {
    max-width: 500px;
    height: auto;
    border: 1px solid #E1E1E1;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.databazy-img:hover {
    transform: scale(2.50);
}

#meeting {
    margin: 20px auto; /* Priestor nad a pod */
    max-width: 800px; /* Maximálna šírka */
    padding: 20px; /* Vnútorné okraje */
    background-color: #F9F9F9; /* Svetlošedé pozadie */
    border: 1px solid #E1E1E1; /* Užší okraj */
    border-radius: 8px; /* Zaoblenie rohov */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Jemný tieň */
}

#dennik {
    margin: 20px auto; /* Priestor nad a pod */
    max-width: 800px; /* Maximálna šírka */
    padding: 20px; /* Vnútorné okraje */
    background-color: #F9F9F9; /* Svetlošedé pozadie */
    border: 1px solid #E1E1E1; /* Užší okraj */
    border-radius: 8px; /* Zaoblenie rohov */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Jemný tieň */
}

#meetings-title {
    font-family: 'Inter', sans-serif; /* Typ písma */ 
    text-align: center; /* Centrovanie nadpisu */
    margin-top: 50px; /* Horný priestor */
}

.meeting-detail {
    margin: 15px 0; /* Priestor medzi položkami */
    padding: 15px; /* Vnútorné okraje pre lepší vzhľad */
    background-color: #FFFFFF; /* Biele pozadie pre jednotlivé položky */
    border: 1px solid #E1E1E1; /* Okraj pre jednotlivé položky */
    border-radius: 5px; /* Zaoblenie rohov pre položky */
    transition: background-color 0.3s; /* Prechod pre hover efekt */
}

.meeting-detail:hover{
    background-color: #f1f1f1;
}

.meeting-detail ol {
    margin: 15px 0 0 0; /* Vzdialenosť hore */
    padding-left: 0; /* Žiadne odsadenie zoznamu */
}

.meeting-detail ol li {
    list-style-position: inside; /* Odsadenie zoznamu zvnútra */
    margin-bottom: 10px; /* Medzera medzi jednotlivými bodmi */
    line-height: 1.5; /* Vylepšená čitateľnosť */
}

.dokumenty{
    margin: 20px auto; /* Priestor nad a pod */
    max-width: 800px; /* Maximálna šírka */
    padding: 20px; /* Vnútorné okraje */
    background-color: #F9F9F9; /* Svetlošedé pozadie */
    border: 1px solid #E1E1E1; /* Užší okraj */
    border-radius: 8px; /* Zaoblenie rohov */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Jemný tieň */
}

img {
    max-width: 200px;
    max-height: 200px;
    border: 1px solid #E1E1E1; /* Svetlý okraj okolo obrázka */
    border-radius: 5px; /* Jemné zaoblenie rohov */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Jemný tieň */
}


.spolocny_img {
    max-width: 1000px;
    max-height: 1000px;
    display:block;
    margin-left: auto;
    margin-right: auto;
}

.logo{
    width: 50px; /* nastaví šírku loga */
    height: auto; /* zabezpečí zachovanie proporcií */
    margin-left: auto;
    margin-right: auto;
}

#tabulky_title {
    font-family: 'Inter', sans-serif;
    font-size: 24px;
    text-align: center;
    margin: 20px 0px;
    padding-top: 100px;
}

#progress_title,
#prihlasenie_title,
#nav_bar_title,
#view_title,
#view_admin_title,
#testovanie_filtra_sortu {
    font-family: 'Inter', sans-serif;
    font-size: 24px;
    text-align: center;
    margin: 20px 0px;
    padding-top: 100px;
}

#Finalny_dizajn,
#prihlasenie_title,
#nav_bar_title,
#view_title,
#view_admin_title,
#testovanie_filtra_sortu,testovanie_filtra_sortu2,filter_gallery2 {
    font-family: 'Inter', sans-serif;
    font-size: 24px;
    text-align: center;
    margin: 20px 0px;
    padding-top: 100px;
}


.progress-bar-container {
    width: 100%;
    background-color: #d3d3d3;  /* svetlosivá farba na pozadí */
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 10px;
  }
  

  .progress-bar {
    width: 75%;
    height: 25px;
    background-color: #4caf50;
    color: white;
    font-weight: bold;
    text-align: center;
    line-height: 25px;    
    transition: width 0.3s ease;
    border-radius: 8px 0 0 8px; 
  }

#figma{
    border: 1px solid rgba(0, 0, 0, 0.1);
    width: 100%;
    height: 450px;
    margin: 0 auto;
}





/*-----------------------------------------------------------------------------------------------*/






@media (max-width: 800px) {
    section {
        width: 80%;
        margin: 20px auto;
        background-color: #FFFFFF;
        border: 1px solid #E1E1E1;
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        text-align: center;
        transform: translateX(40%);
    }

    h1 {
        text-align: center;
        font-size: xx-large;
        margin: 0 auto;
        transform: translateX(40%);
    }

    #o-nas, #motv_doc, #cas_harm, #meetings-title,
    #dennik_title, #Dotaznik, #shop {
        text-align: center;
        font-size: x-large;
        margin: 20px auto;
        transform: translateX(40%);
    }

    #databazy_title, #tabulky_title,
    #prihlasenie_title, #nav_bar_title, #view_title,
    #view_admin_title, #testovanie_filtra_sortu, #Finalny_dizajn,
    #progress_title, .progress-bar-container{
        text-align: center;
        font-size: x-large;
        margin: 20px auto;
        transform: translateX(40%);
    }

    #p1,#p2{
        transform: translateX(40%);
    }

    .dokumenty {
        width: 80%;
        margin: 20px auto;
        text-align: center;
        font-family: 'Inter', sans-serif;
        font-size: 18px;
        color: #2E3A4D;
        padding: 15px;
        background-color: #F9F9F9;
        border: 1px solid #E1E1E1;
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        transform: translateX(40%);
    }

    #harmonogram {
        width: 80%;
        margin: 20px auto;
        padding: 15px;
        background-color: #FFFFFF;
        border: 1px solid #E1E1E1;
        border-radius: 5px;
        transition: background-color 0.3s;
        transform: translateX(40%);
    }

    #dennik {
        width: 80%;
        margin: 20px auto;
        padding: 10px;
        background-color: #FFFFFF;
        border: 1px solid #E1E1E1;
        border-radius: 5px;
        transform: translateX(40%);
    }

    #meeting {
        width: 80%;
        margin: 20px auto;
        padding: 10px;
        background-color: #FFFFFF;
        border: 1px solid #E1E1E1;
        border-radius: 5px;
        transform: translateX(40%);
    }

    .meeting-detail, .harmonogram-objekt {
        width: 80%;
        margin: 20px auto;
        padding: 10px;
        background-color: #FFFFFF;
        border: 1px solid #E1E1E1;
        border-radius: 5px;
        transform: translateX(10%);
    }

    .spolocny_img {
        width: 80%;
        margin: 0 auto;
        transform: translateX(40%);
    }

    #figma {
        border: 1px solid rgba(0, 0, 0, 0.1);
        width: 100%;
        height: 450px;
        margin: 0 auto;
        transform: translateX(40%);
    }

    .left-panel {
        text-align: center;
        height: 400px;
    }


    #databazy_gallery,
    #tabulky_gallery,
    #login_gallery,
    #nav_gallery,
    #view_gallery,
    #admin_view_gallery,
    #filter_gallery{
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 15px;
        margin: 20px 0px;
        transform: translateX(40%);
    }

    #dennik {
        margin: 20px;
        max-width: 800px!important;
        padding: 20px!important;
        border: none !important;
        border-radius: 8px!important;
        box-shadow: none !important;
        transform: translateX(40%);
        background-color: transparent !important;
    }

    .databazy-img:hover {
        transform: scale(1.50)!important;
    }

}