/* Autor: Piotr Gawrysiuk na zlecenie Mateusza Łasia */

/*Główne*/
*{
    font-family: Helvetica, Tahoma;
}
body{
    margin: 0% 8%;
    padding: 0;
    overflow-x: hidden;
    background-color: rgb(240, 240, 240);
    background-image: url(Images/logo_original.png);
    background-size: 50vh;
    background-repeat: no-repeat;
    background-position: center;
}
body.nobackgroundImage{
    background-image: none;
}
/* Header */
header{
    height: 5vh;
    width: 100%;
    background-color: rgb(253,253,253);
    color: black;
    display: flex;
    float: left;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    font-size: 110%;
}
header div{
    display: flex;
    gap: 15%;
    margin-left: 1%;
}
header img{
    margin-top: 1px;
    width: auto;
    height: 5vh;
    float: left;
    transition: 1s;
    overflow: hidden;
}

nav{
    background-color: rgb(253,253,253);;
    width: 100%;
    height: 5vh;
    display: flex;
    float: left;
    gap: 5%;
    justify-content: center; 
    align-items: center;
    font-size: 120%;
    text-decoration: underline;
    border-bottom-left-radius: 100px;
    border-bottom-right-radius: 100px;
    overflow: visible;
}

/* Menu */
.menuitem{
    transition: 0.5s;
    text-decoration: none;
    color: black;
}
main{
    margin: 0;
    width: 100%;
    height: 82vh;
    overflow: auto;
    font-size: 200%;
    text-align: center;
}

main a{
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #000000;
    font-size: 130%;
}



footer{
    height: 20%;
    background-color: rgb(253,253,253);;
    color: black;
    height: 8vh;
    text-align: center;
    clear: both;
    overflow: hidden;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
}

ul{
    list-style: none;
}

/*err*/

#err_main{
    background-color: rgba(240,240,240, 0.5);
}
#errbtn{
    transition: 0.5s;
    padding: 2%;
    text-decoration: none;
    border: 3px dashed grey;
    background-color: rgb(34, 34, 34);
    color: white;
    display: inline-block;
    margin-top: 15%;
}

  

/*Additional Config*/
h1,h2,h3,h4,h5{
    margin:1%
}
.grey_text{
    margin: 1%;
    color:rgb(54, 54, 54)
}

table{
    margin:auto;
    box-shadow: 3px 7px 5px grey;
}

/* Korepetytorzy */
#korepetytorzy_main{
    width: 100%;
    height: 82vh;
    overflow: auto;
    font-size: 180%;
    opacity: 0.95;
}
#korepetytorzy_main form{
    margin: 1%;
    text-align: center;
}

#korepetytorzy_main img{
    width: auto;
    height: 20vh;
    float: left;
    padding-right: 5%;
    border-radius: 30px;
    
}
#korepetytorzy_main p{
    display: inline;
    text-align: left;
    margin-left: 7%;
}
#korepetytorzy_main h3{
    display: inline;
    text-align: left;
}
#korepetytorzy_main h4{
    display: inline;
    text-align: left;
    margin-top: 1%;
    margin-left: 5%;
}
#korepetytorzy_main span{
    display: inline;
    text-align: left;
    margin-left: 7%;
}
#korepetytorzy_main section{ /*Sekcja Korepetytora*/
    height: 19vh;
    padding: 2%;
    border: 5px solid white;
    margin: 4% 10%;
    transition: 0.5s;
    position: relative;
    background-color: rgb(241, 247, 249);
    animation: korepetytor_entry 1s;
    border-radius: 25px;
    box-shadow: 3px 3px 5px grey;
}
#korepetytorzy_main h1{
    text-align: center;
    color:rgb(54, 54, 54);
    margin: 1%;
    
}

#korepetytorzy_main a{ /* Przycisk Umów */
    padding: 1%;
    border-radius: 10px;
    transition: 0.5s;
    color: rgb(54, 54, 54);
    float: right;
    text-decoration: none;
    border: 3px solid rgba(60,60,60,0.5);
    background-color: rgb(255,255,255);
    z-index: 1;
    transition: 0.5s;
    position: absolute;
    right: 8%;
    top: 87%;
}

.wroclaw{
    z-index: 1; /* Ustawić z index na podstawowy dla sekcji korepetytorzy_main by nie pojawiało się ostrzeżenie */
}
.matematyka{
    z-index: 1; /* Ustawić z index na podstawowy dla sekcji korepetytorzy_main by nie pojawiało się ostrzeżenie */
}
.chemia{
    z-index: 1; /* Ustawić z index na podstawowy dla sekcji korepetytorzy_main by nie pojawiało się ostrzeżenie */
}
.fizyka{
    z-index: 1; /* Ustawić z index na podstawowy dla sekcji korepetytorzy_main by nie pojawiało się ostrzeżenie */
}
.hidden{
    display: none;
}

/* Sekcja Prywatna korepetytora */
#korepetytor_main{
    background-color: rgb(240, 240, 240);
    width: 100%;
    height: 82vh;
    overflow: auto;
    font-size: 180%;
    opacity: 0.95;
}



#korepetytor_main img{
    width: auto;
    height: 21vh;
    float: right;
    border: 3px solid grey;
    border-radius: 15px;
    overflow: hidden;
}
#korepetytor_main p{
    display: inline;
    text-align: left;
    font-size: 80%;
}
#korepetytor_main ul{
    list-style-type: disc;
    font-size: 80%;
}
#korepetytor_main span{
    display: inline;
    text-align: left;
    margin-left: 10%;
}

#korepetytor_main h3{
    display: inline;
    text-align: left;
    margin-top: 7%;
    color:rgb(54, 54, 54)
}
#korepetytor_main h4{
    display: inline;
    text-align: left;
    margin-top: 7%;
    margin-left: 5%;
    color:rgb(54, 54, 54)
}
#korepetytor_main h5{
     margin: 1%;
    text-align: center;
}
#korepetytor_main h6{
    color:rgb(54, 54, 54);
    margin: 1%;
    text-align: center;
}
#korepetytor_main > section{ /*Sekcja Wyobru*/
    margin-top: 2%;
    height: 60vh;
    padding: 2%;
    border: 5px solid rgb(255,255,255);
    margin-left: 10%;
    margin-right: 10%;
    transition: 0.5s;
    position: relative;
    background-color: rgb(241, 247, 249);
    border-radius: 10px;
    box-shadow: 2px 2px 10px rgb(40,40,40);
    
    
}
#korepetytor_achivements{ /*Sekcja Wyobru*/
    width: 30%;
    height: 35vh;
    /* border: 5px solid rgb(255,255,255); */
    border-collapse: collapse;
    transition: 0.5s;
    position: absolute;
    /* background-color: rgb(230, 230, 230); */
    right: 2%;
    bottom: 3%;
    padding: 1%;
    border-radius: 10px;
}
#korepetytor_opis{ /*Sekcja Wyobru*/
    width: 60%;
    height: 35vh;
    /* border: 5px solid rgb(255,255,255); */
    border-collapse: collapse;
    transition: 0.5s;
    position: absolute;
    /* background-color: rgb(230, 230, 230); */
    left: 2%;
    bottom: 3%;
    padding: 1%;
    border-radius: 10px;
}
#korepetytor_main h1{
    text-align: center;
    color:rgb(54, 54, 54);
    margin: 1%;
    
}
#korepetytor_main a{
    transition: 0.5s;
    color: rgb(54, 54, 54);
    float: right;
    text-decoration: none;
    border: 3px solid grey;
    background-color: white;
    z-index: 1;
    transition: 0.5s;
    position: absolute;
    right: 40%;
    top: 95%;
    padding: 1%;
}


/*Cennik*/

.cennik th{
    padding: 15px;
    border: 4px solid rgb(0, 0, 0);
    transition: 0.5s;
}
.cennik td{
    padding: 15px;
    border: 4px solid rgb(0, 0, 0);
    transition: 0.5s;
}
.cennik tr{
    background-color: rgb(255,255,255,0.5);
}
#small_additional_payment{
    font-size: 50%;
}

/* Współpraca */
.wspolpraca1{
    margin: auto;
    background-color: rgba(200,200,200, 0.95);
    width: 35%;
    border-radius: 10px;
}
.wspolpraca2{
    padding: 1%;
    width: 50%;
    margin: auto;
    background-color: rgba(230,230,230,0.95);
    border-radius: 30px;
    padding-left: 5%;
}
#wspolpracaAplikuj{
    position: absolute;
    bottom: 10%;
    left: 38%;
    width: 25%;
    border: 3px black dashed;
    background-color: rgba(200,255,200,0.95);
    border-radius: 5px;
    transition: 0.5s;
}

/*Kalendarz Dostępności*/
#kalendarz th{
    padding: 6px;
    border: 2px solid gray;
    transition: 0.5s;
    border-collapse: collapse;
    font-size: 80%;
}
#kalendarz td{
    padding: 6px;
    border: 2px solid gray;
    transition: 0.5s;
    border-collapse: collapse;
    font-size: 80%;
}
.occupied{
    display: table-cell;
    background-color: maroon;
}
.available{
    display: table-cell;
    background-color: darkgreen;
    transition: 1s;
}
.available a{
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;             
    pointer-events: auto;    
    
}
.occupied a{
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;             
    pointer-events: none;    
}

#kalendarz{
    border: 5px solid grey;
}
#kalendarz_spis{
    border: 2px solid rgb(100,100,100);
    font-size: 80%;
    margin-top: 3%;
    background-color: rgb(194, 194, 194);
    width: 30%;
}
#kalendarz_spis .available,
#kalendarz_spis .occupied{
    opacity: 0.9;
    border: 1px dashed rgb(40,40,40);
    padding: 2%;
}
#kalendarz a{
    display: block;
    text-decoration: none;
    color: #000000;
}
#mateusz_przedmiot{
    margin: 1%;
    color: purple
}
#david_przedmiot{
    margin: 1%;
    color: darkblue
}

/* Subskrypcje */
.subskrypcja_main{
    position: relative;
    transition: 0.5s;
    text-decoration: none;
    color: black;
}
.subskrypcja_dropdown{
    left: -30%;
    width: 150%;
    display: none;
    position: absolute;
    z-index: 2;
    padding: 5%;
    transition: 0.5s;
}
.subskrypcja_button{
    background-color: rgba(253,253,253, 0.95);
    color: black;
    text-decoration: none;
    text-align: center;
    display: block;
    border: 1px dashed rgb(194, 194, 194);
    padding: 5%;
    transition: 0.3s;
    border-radius: 7px;
    box-shadow: 3px 3px 5px grey;
}
.subskrypcja_opcja{
    display: inline-block;
    vertical-align: top;
    margin: 2% 2%;
    width: 25%;
    border: black 1px solid;
    background-color: rgba(241, 247, 249,0.75);
    border-radius: 25px;
    box-shadow: 3px 3px 5px grey;
}
.subskrypcja_opis{
    height: 20%;
    margin: 2% 2%;
    display: inline-block;
    width: 75%;
    border: black 1px solid;
    background-color: rgba(241, 247, 249,0.75);
    border-radius: 25px;
    box-shadow: 3px 3px 5px grey;
}
.subskrypcja_lista .subskrypcja_opcja:nth-child(1) {
    background-color: lightgreen;
}
.subskrypcja_lista .subskrypcja_opcja:nth-child(2) {
    background-color: lightskyblue;
}
.subskrypcja_lista .subskrypcja_opcja:nth-child(3) {
   background-color: lightseagreen;
}
.subskrypcja_lista .cena{
    font-size: 120%;
}

/* Materiały Dydaktyczne */
.podreczniki{
    display: flex;
    justify-content: center;
}
.podrecznik{
    margin: 0% 5%;
    width: 45%;
    font-size: 70%;
    transition: 1s;
}
.podrecznik .tytul,
.podrecznik .cena,
.podrecznik .opis,
.podrecznik img{
    margin-top: 1%;
    border: 2px solid rgb(100,100,100);
}
.podrecznik .tytul,
.podrecznik .cena,
.podrecznik .opis{
    border-radius: 5px;
}
.podrecznik .tytul{
    padding: 1%;
}
.podrecznik img{
    width: 80%;
    border-radius: 20px;
    transition: 1s;
}



/*Animacje*/
.menuitem:hover{
    transform: scale(1.1);
    color: rgb(100,100,100);
}
.subskrypcja_main:hover .subskrypcja_dropdown{
    display: block;
}
.subskrypcja_button:hover{
    background-color: rgb(100,100,100);
    color: rgb(253,253,253);
    transform: scale(1.1);
}
.available:hover{
    transform: scale(1.3);
}
 
#korepetytorzy_main section:hover{
    transform: scale(1.02) translateZ(1px);
}
#korepetytorzy_main a:hover{
    /* transform: scale(1.1); */
    background-color: rgb(227, 255, 223);
}

#korepetytor_main a:hover{
    transform: scale(1.1);
    background-color: rgb(227, 255, 223);
    color: black;
}

#errbtn:hover{
    transform: scale(1.3);
    background-color: #d3d3d3;
    color: black;
}
#wspolpracaAplikuj:hover{
    transform: scale(1.4) ;
    background-color: rgba(130, 255, 57, 0.85);
}
/* Animacje */
@keyframes korepetytor_entry{
    from{
        margin-top: 100%;
    }
    to{
        margin-top: 0%;
    }
}



/* Przycisk menu na telefonie */
#mobile-menu-toggle {
    display: none;
    background-color: #6e6e6e;
    color: white;
    padding: 10px 20px;
    font-size: 150%;
    cursor: pointer;
    text-align: center;
}

/* Menu mobilne domyślnie ukryte */
#menu {
    transition: max-height 0.3s ease;
    overflow: hidden;
}





/* Styl dla urządzeń mobilnych */
@media screen and (max-width: 768px) {
    body {
        margin: 0;
        padding: 0;
        background-size: 30vh;
    }
    
    header {
        height: auto;
        flex-direction: column;
        padding: 10px 0;
        font-size: 90%;
    }
    
    header h2 {
        margin: 5px 0;
        text-align: center;
    }
    
    header div {
        margin: 5px 0 0 0;
        gap: 20px;
    }
    
    nav {
        height: auto;
        flex-direction: column;
        gap: 0;
        padding: 10px 0;
        border-radius: 0;
        font-size: 100%;
    }
    
    .menuitem, .subskrypcja_main {
        padding: 8px 0;
        width: 100%;
        text-align: center;
    }
    
    
    main {
        height: auto;
        min-height: 82vh;
        font-size: 140%;
    }
    
    #korepetytorzy_main {
        height: auto;
        min-height: 82vh;
        font-size: 140%;
    }
    
    #korepetytorzy_main section {
        height: auto;
        padding: 15px;
        margin: 15px 5%;
        display: flex;
        flex-direction: column;
    }
    
    #korepetytorzy_main img {
        float: none;
        margin: 0 auto;
        padding-right: 0;
        height: 15vh;
    }
    
    #korepetytorzy_main h3,
    #korepetytorzy_main h4,
    #korepetytorzy_main span {
        display: block;
        text-align: center;
        margin-left: 0;
    }
    
    #korepetytorzy_main a {
        position: static;
        float: none;
        margin: 10px auto 0 auto;
        width: 80%;
    }
    
    form {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 0 10%;
    }
    
    select {
        font-size: 90%;
    }
    
    footer {
        height: auto;
        padding: 10px 0;
        font-size: 90%;
    }
    .subskrypcja_opcja{
        width: 90%;
    }
    .subskrypcja_dropdown {
    position: static;
    border: none;
    box-shadow: none;
    width: 90%;
    padding: 5%;
    }
    
    .subskrypcja_button {
        padding: 10px;
        border-top: 1px solid #eee;
    }

    #korepetytor_main {
        height: auto;
        min-height: 82vh;
        font-size: 120%; /* Increased from 100% */
        padding-bottom: 20px;
    }
    
    #korepetytor_main > section {
        height: auto;
        padding: 15px;
        margin: 15px 5%;
        display: flex;
        flex-direction: column;
    }
    
    #korepetytor_main img {
        float: none;
        margin: 0 auto 15px auto;
        width: 80%;
        height: auto;
        max-height: 200px;
    }
    
    #korepetytor_main h3 {
        font-size: 140%; /* Larger heading */
        margin: 10px 0;
    }
    
    #korepetytor_main h4 {
        font-size: 120%; /* Larger subheading */
        margin: 8px 0;
    }
    
    #korepetytor_main span {
        font-size: 110%; /* Larger span text */
        margin: 6px 0;
    }
    
    #korepetytor_main a {
        position: static;
        float: none;
        margin: 15px auto;
        width: 80%;
        font-size: 100%; /* Increased from 80% */
        padding: 10px;
    }
    
    #korepetytor_opis,
    #korepetytor_achivements {
        position: static;
        width: 90%;
        height: auto;
        margin: 15px auto; /* Slightly more spacing */
        padding: 10px;
    }
    
    #korepetytor_opis p {
        font-size: 90%; /* Increased from 70% */
        margin: 8px 0;
        line-height: 1.4; /* Better line spacing */
    }
    
    #korepetytor_achivements ul {
        font-size: 90%; /* Increased from 70% */
        padding-left: 25px;
        margin: 8px 0;
    }
    
    #korepetytor_achivements li {
        margin-bottom: 8px;
        line-height: 1.3; /* Better line spacing */
    }
    
    #korepetytor_opis h5,
    #korepetytor_achivements h5 {
        font-size: 130%; /* Larger section headings */
        margin: 12px 0;
    }
}