@font-face {
    font-family: atk;
    src: url(../fonts/Atkinson_Hyperlegible_Mono/static/AtkinsonHyperlegibleMono-Regular.ttf);
}

@font-face {
    font-family: prompt;
    src: url(../fonts/Prompt/Prompt-Black.ttf);
}

@font-face {
    font-family: afa;
    src: url(../fonts/Afacad_Flux/static/AfacadFlux-Regular.ttf);
}

@keyframes kon {
    from {
        left: -18%
    }

    to {
        left: -1%
    }
}

@keyframes kon2 {
    from {
        left: -1%
    }

    to {
        left: -18%
    }
}

@keyframes showw {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes deshow {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes rotate1 {
    from {
        rotate: 0deg;
    }

    to {
        rotate: 90deg;
    }
}

@keyframes rotate2 {
    from {
        rotate: 90deg;
    }

    to {
        rotate: 0deg;
    }
}

html {
    scroll-behavior: smooth;
}

#all {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    padding: 0;
    margin: 0;
    background-color: rgb(36, 36, 36);
}

#intro_mobile {
    display: none;
}

#logo_inne {
    width: 100%;
    text-align: center;
    height: 100px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

#logo_img {
    height: 90px;
    width: auto;
}

#intro {
    background-image: url(../zdj/sesja_2025/all5.jpeg);
    display: flex;
    flex-direction: column;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    position: relative;
}

#intro a,
#logo a,
#logo_inne a,
#mobile_zdj a {
    color: white;
    text-decoration: none;
    font-family: atk;
}

/*#intro img{
    align-self: center;
    color: white;
    text-shadow: 0px 0px 4px black;
    font-family: atk;
    position: absolute;
    top: 30%;
    width: 600px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 20px;
    animation-name: jackInTheBox;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
}*/
#div_intro {
    bottom: 15%;
    position: absolute;
    width: 100% !important;
    align-self: center;
    text-align: center;
    display: flex;
    justify-content: center;
}

#div_intro h1 {
    width: fit-content;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 5px;
    border-radius: 5px;
    animation-name: jackInTheBox;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
}

#div_intro a {
    width: fit-content;
    display: block;
}

#intro p {
    font-size: 32px;
    text-align: center;
    font-weight: bold;
}

#logo p,
#logo_inne p {
    font-size: 20px;
    text-align: center;
    font-weight: bold;
}

.p_right {
    animation-name: zoomIn;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 5px;
    border-radius: 5px;
}

.p_left {
    animation-name: zoomIn;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 5px;
    border-radius: 5px;
}

.p_right_logo {
    background-color: rgba(0, 0, 0, 0.5);
    padding: 8px;
    border-radius: 5px;
}

.p_left_logo {
    background-color: rgba(0, 0, 0, 0.5);
    padding: 8px;
    border-radius: 5px;
}

#logo_main {
    width: 7%;
    position: absolute;
    left: 0;
    top: 10px;
}

#logo_main2 {
    width: 7%;
    position: absolute;
    right: 0;
    top: 10px;
}

#main {
    display: flex;
    flex-direction: row;
    position: relative;
    justify-content: right;
    padding-top: 20px;
    border-radius: 20px;
}

#main_o_nas,
#main_dysk {
    display: flex;
    flex-direction: column;
    padding-top: 20px;
    border-radius: 20px;
}


#main_koncerty {
    width: 70%;
    margin: auto;
    color: white;
}

#main_galeria {
    width: 80%;
    margin: auto;
    color: white;
}

#main_kontakt {
    width: 80%;
    display: flex;
    flex-direction: row;
    margin: auto;
    margin-top: 20px;
    color: white;
    gap: 20px;
}

#main_koncerty h1 {
    font-family: atk;
    font-size: 3em;
    text-align: center;
}

#main_koncerty li {
    font-family: atk;
    font-size: 1.3em;
}

#main_koncerty a {
    color: white;
    font-style: italic;
}

#main_kontakt div {
    width: 50%;
}

#main_kontakt div img {
    width: 100%;
    border-radius: 20px;
}

#main_kontakt h1 {
    font-family: atk;
    font-size: 3em;
}

#main_kontakt p {
    font-family: atk;
    font-size: 1.3em;
}

#main_kontakt li {
    font-family: atk;
    font-size: 1.3em;
}

#main_kontakt a {
    color: white;
    font-style: italic;
}

#main_broszura {
    width: 80%;
    display: flex;
    flex-direction: row;
    margin: auto;
    margin-top: 20px;
    color: white;
    gap: 20px;
}

#main_broszura h1 {
    font-family: atk;
    font-size: 3em;
    text-align: center;
}

#main_broszura div {
    width: 50%;
}

#main_broszura p {
    font-family: atk;
    font-size: 1em;
}

.concerts{
    width: 80%;
    height: 200px;
    background-color: rgb(51, 51, 51);
    border-radius: 10px;
    margin: 10px auto;
    padding: 10px 20px;
    display: flex;
    flex-direction: row;
}

.opis_koncertu{
    width: 70%;
    height: 100%;
}

.opis_koncertu h2{
    font-family: atk;
}

.czas_miejsce{
    font-family: afa;
}

.opis_face{
    font-family: afa;
}

.kon_hr{
    width: 100%;
    border: 1px solid gray;
    border: 50%;
    background-color: gray;
    margin: 20px auto;
}

.zdjecie{
    width: 30%;
    height: 100%;
    align-content: center;
    display: flex;
    justify-content: center;
}

.zdjecie2{
    width: 25%;
    height: 100%;
    align-content: center;
    display: flex;
    justify-content: center;
}

.zdjecie img{
    height: 100%;
}

.concerts_mobile{
    width: 100%;
    height: fit-content;
    display: flex;
    flex-direction: column;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: rgb(51, 51, 51);
    border-radius: 10px;
    margin: 15px auto;
    text-align: center;
}

.zdjecie_mobile{
    width: 100%;
    height: 300px;
    justify-content: center;
    display: flex;
}

.zdjecie_mobile2{
    width: 100%;
    height: 300px;
    justify-content: center;
    display: flex;
    align-items: center;
}
.zdjecie_mobile img{
    height: 100%;
}

.zdjecie_mobile2 img{
    width: 95%;
    height: min-content;
}

.opis_koncertu_mobile h3{
    font-family: atk;
}

.czas_miejsce_mobile{
    font-family: afa;
}

.opis_face_mobile{
    font-family: afa;
}

#opis_broszura {
    width: 100%;
    font-size: 1.3em !important;
    text-align: center;
}

#main_broszura div img {
    width: 100%;
    border-radius: 20px;
}

#main_broszura a {
    color: white;
    font-style: italic;
}

#main_broszura li {
    font-family: atk;
    font-size: 1em;
}

#intro_main {
    text-align: center;
    width: 100%;
}

#main_o_nas_h1 {
    font-size: 50px;
    color: white;
    margin-top: 0;
    font-family: afa;
}

#band_info {
    margin: 10px auto;
    width: 80%;
    height: min-content;
    border: 3px solid gray;
    color: white;
    padding: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

#band_info_text,
#band_info_img {
    width: 49%;
    align-content: center;
    margin-top: 10px;
    margin-bottom: 10px;
}

#band_info_text h1 {
    font-family: atk;
}

#band_info_text p {
    line-height: 1.7em;
    font-size: 1.3em;
    font-family: afa;
}

#band_info_img div {
    width: 85%;
    margin: auto;
}

#band_info_img img {
    width: 100%;
    height: auto;
}

#band_members {
    width: 100%;
    border-top: 3px solid gray;
    border-bottom: 3px solid gray;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    color: white;
}

#band_members a {
    text-decoration: none;
    color: white;
}

#band_members_h1 {
    color: white;
    text-align: center;
    margin: 40px auto 20px;
    font-family: afa;
}

.band_member {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 10px;
}

.band_member:hover {
    cursor: pointer;
}

.band_member img {
    width: 100%;
    height: auto;
}

.band_member_img {
    width: 90%;
    margin: auto;
}

.band_member_img img {
    border-radius: 20px;
}

.band_member p {
    width: 100%;
    font-family: afa;
    text-align: center;
}

.band_member h3 {
    font-size: 1.7em;
    margin: 10px auto 0;
    font-family: afa;
}

#band_member_info {
    width: 80%;
    height: 600px;
    border: 6px dashed gray;
    border-radius: 15px;
    margin: 20px auto;
    align-content: center;
    color: white;
    padding: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-content: center;
}

.band_member_info_text {
    width: 48%;
}

.band_member_info_text h1 {
    font-size: 4em;
    font-family: atk;
    letter-spacing: 20px;
    text-align: center;
}

.band_member_info_text p {
    font-size: 1.4em;
    line-height: 1.8em;
    font-family: atk;
    text-align: center;
}

.band_member_info_text hr {
    width: 90%;
    border: 3px solid gray;
    border-radius: 20px;
    background-color: gray;
}

.band_member_info_img {
    width: 48%;
}

.band_member_info_img div {
    margin: auto;
    width: min-content;
    height: 100%;
    width: 100%;
}

.band_member_info_img div img {
    width: 100%;
    border-radius: 10px;
}

#band_member_info_h1_default {
    text-align: center;
    font-size: 2em;
    font-style: italic;
    align-self: center;
}

#band_history {
    width: 80%;
    margin: 20px auto;
}

#band_history h1 {
    text-align: center;
    color: white;
    font-family: afa;
    font-size: 3em;
}

#band_history div {
    margin: auto;
    width: 60%;
    text-align: center;
}

#band_history p {
    width: 100%;
    text-align: center;
    color: white;
    font-family: atk;
    font-size: 1.3em;
    line-height: 1.7em;
}

#band_history img {
    width: 100%;
    margin-bottom: 10px;
}

.but {
    width: 50%;
    font-size: 1.3em;
    border-radius: 10px;
    border: 3px solid white;
    background-color: gray;
    color: white;
    font-family: atk;
}

.but:hover {
    background-color: rgb(88, 87, 87);
    cursor: pointer;
}

#krs_info {
    margin: 10px auto;
    width: 80%;
    height: min-content;
    border-radius: 10px;
    border: 3px solid gray;
    color: white;
    padding: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

#krs_info_text,
#krs_info_img {
    width: 49%;
    align-content: center;
    margin-top: 10px;
    margin-bottom: 10px;
}

#krs_info_text h1 {
    font-family: atk;
}

#krs_info_text p {
    line-height: 1.7em;
    font-size: 1.3em;
    font-family: afa;
}

#krs_info_img div {
    width: 85%;
    margin: auto;
}

#krs_info_img img {
    width: 100%;
    height: auto;
}

#news,
#info_det,
#info_more {
    margin: 0px 10px 0px;
}

#news {
    width: 20%;
    border-radius: 0px 10px 10px 0px;
    border: gray 3px solid;
    color: white;
    position: absolute;
    left: -18%;
    background-color: gray;
    animation-name: kon2;
    animation-duration: 0.3s;
    animation-fill-mode: forwards;
    display: none;
    flex-direction: row;
}

#news:hover {
    animation-name: kon;
    animation-duration: 0.3s;
    animation-fill-mode: forwards;
}

#news div ul {
    width: 85%;
}

#news_h2 {
    transform: rotateZ(-90deg);
}

#news div li {
    font-family: atk;
}

#div1 {
    width: 60%;
    height: 100%;
}

#div2 {
    width: 40%;
    height: 100%;
}

#info_det {
    width: 55%;
    height: fit-content;
    border: 3px solid gray;
    transition: border-radius 0.5s;
    color: white;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
}

#info_det:hover {
    border-radius: 20px;
}

#info_det h1 {
    font-size: 2em;
    font-family: atk;
}

#info_det p {
    line-height: 1.7em;
    font-family: afa;
    font-size: 1.3em;
}

#info_det img {
    width: 100%;
}

#info_more {
    width: 45%;
    height: 600px;
    clear: both;
}

#info_more a {
    text-decoration: none;
}

.mini_info {
    width: 95%;
    height: 47%;
    border: 3px solid gray;
    transition: border-radius 0.5s;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#fb {
    margin-bottom: 15px;
}

#main_mobile {
    display: none;
}

.mini_info:hover {
    border-radius: 20px;
}

.mini_info span {
    color: white;
    text-align: center;
    font-weight: bold;
    font-size: 32px;
    font-family: afa;
    margin-bottom: 0;
}

.mini_info_zdj {
    width: 40%;
    height: 100%;
    align-content: center;
}

.mini_info img {
    height: 80%;
}

#foot {
    width: 100%;
    height: 60px;
    background-color: black;
    margin-top: 10px;
    text-align: center;
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    color: white;
    margin-bottom: 0;
}

#foot div {
    width: 25%;
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: center;
    justify-content: center;
}

.icons {
    height: 30px;
    width: auto;
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.icons img {
    height: 100%;
}

.main_logo_p {
    font-size: 1em !important;
    font-family: afa;
}

.sites_foot {
    font-size: 18px;
    font-style: italic;
    letter-spacing: 3px;
    font-family: afa;
}

.sites_foot a {
    text-decoration: none;
    color: white;
}

.sites_foot a p {
    padding: 5px;
    background-color: rgba(100, 100, 100, 0.5);
    border-radius: 10px;
}

#name {
    color: white;
    font-style: italic;
    font-weight: bold;
    font-size: 18px;
    letter-spacing: 5px;
    font-family: afa;
}

#name_div {
    margin: auto;
}

#type_select_all {
    width: 80%;
    margin: 10px auto;
    text-align: center;
    height: 50px;
}

#type_select {
    width: 300px;
    background-color: rgb(22, 22, 22);
    border-radius: 50px;
    margin: auto;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}

#bt1,
#bt2 {
    width: 45%;
    height: 70%;
    border: none;
    background-color: rgb(157, 155, 155);
    font-family: atk;
    font-weight: bold;
    color: white;
    text-shadow: 0px 0px 2px black;
    font-size: 20px;
}

#bt1:hover,
#bt2:hover {
    cursor: pointer;
}

#bt1 {
    border-radius: 50px 0px 0px 50px;
}

#bt2 {
    border-radius: 0px 50px 50px 0px;
}

#music {
    width: 100%;
    background-color: rgb(8, 8, 8);
    display: flex;
    flex-direction: row;
    gap: 20px;
    height: 300px;
    justify-content: center;
    align-items: center;
}

#text_no_sing,
#text_no_albm {
    color: white;
    font-family: afa;
    font-size: 200%;
}

.albums {
    height: 80%;
    width: 200px;
    text-align: center;
    transition: width 0.5s, height 0.5s;
    animation-name: zoomIn;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}

.albums:hover {
    width: 230px;
    height: 85%;
    cursor: pointer;
}

.albums img {
    width: 100%;
}

.albums h3 {
    font-family: afa;
    color: white;
    margin-top: 5px;
}

#music_details {
    width: 90%;
    height: auto;
    margin: auto;
    color: white;
}

#music_details h1 {
    text-align: center;
    margin-bottom: 20px;
    font-family: afa;
    font-size: 3em;
}

#all_detail {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

#detail_zdj {
    width: 40%;
}

#detail_zdj img {
    width: 100%;
}

#detail_name {
    width: 50%;
}

#detail_name ol {
    margin: 0;
    margin-left: 10px !important;
    line-height: 2em;
    font-family: atk;
    font-weight: bold;
    font-size: 1.3em;
}

#detail_descryption p {
    font-family: afa;
    line-height: 2em;
    font-size: 1.2em;
}

#detail_descryption h2 {
    font-family: afa;
    line-height: 2em;
    font-style: italic;
}

#detail_descryption a {
    text-decoration: none;
    color: white;
}

#detail_descryption {
    width: 100%;
}

.all_zdj {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    gap: 30px;
    margin-top: 20px !important;
    flex-wrap: wrap;
}
.pre_galeria{
    width: 200px;
    height: fit-content;
    cursor: pointer;
    align-items: center;
    position: relative;
}
.back_but{
    font-family: atk;
    cursor: pointer;
    font-size: 1.3em;
}

.pre_all_zdj{
    width: 100%;
    
}

.galeria_zdj {
    width: 100%;
    height: 200px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    transition: border-radius 0.5s;
}
.galeria_zdj_other{
    width: 200px;
    height: 200px;
    overflow: hidden;
    background-size: cover;
    align-items: center;
    position: relative;
    background-position: center;
}
.galeria_zdj_other:hover{
    scale: 110%;
    transition: scale 0.5s;
}

.galeria_zdj:hover {
    scale: 110%;
    transition: scale 0.5s;
}
.name_galery{
    text-align: center;
    font-family: afa;
    font-size: 1.3em;
}

#main_galeria hr {
    width: 90%;
    height: 3px;
    background-color: gray;
    border-radius: 10px;
    border: 1px solid gray;
    margin: 30px auto;
}

#main_galeria a{
    text-decoration: none;
    color: white;
}

#all_menu {
    display: none;
}

#menu_mobile_but {
    display: none;
}

#foot_mobile {
    display: none;
}

#band_info_mobile {
    display: none;
}

#band_members_info_mobile{
    display: none;
}

#band_history_mobile {
    display: none;
}

#krs_info_mobile {
    display: none;
}

#main_koncerty_mobile {
    display: none;
}

#main_galeria_mobile {
    display: none;
}

#main_kontakt_mobile {
    display: none;
}

#main_broszura_mobile{
    display: none;
}

@media screen and (orientation: portrait) {
    #intro {
        display: none;
    }

    #logo_inne {
        display: none;
    }

    #intro_mobile {
        display: flex;
        height: fit-content;
        width: 100%;
        flex-direction: column;
    }

    #menu_intro {
        height: 100px;
        width: 100%;
        display: flex;
        flex-direction: row;
        padding: 10px 0;
        background-color: black;
    }

    #intro_mobile img {
        height: 90%;
        margin-left: 20px;
    }

    .intro_mobile_div {
        height: 100px;
        width: 50%;
        display: flex;
        flex-direction: row;
    }

    #menu_mobile_but {
        width: 70px !important;
        height: 70px !important;
        border: solid gray 4px;
        border-radius: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: absolute;
        right: 20px;
        top: 20px;
        z-index: 2;
        animation-name: none;
        animation-duration: 0.3s;
        animation-fill-mode: forwards;
    }

    #menu_mobile_but hr {
        width: 60%;
        background-color: gray;
        border: 3px solid gray;
        border-radius: 20px;
        margin: 5px auto;
        align-self: center;
    }

    #mobile_zdj {
        width: 100% !important;
        background-image: url(../zdj/sesja_2025/all20.jpeg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        background-attachment: fixed;
        position: relative;
    }

    #mobile_zdj img {
        width: 100%;
    }

    #div_intro h1{
        font-size: 1.5em;
    }

    #all_menu {
        display: none;
        position: fixed;
        width: 300px;
        height: 100%;
        background-color: rgb(34, 34, 34);
        right: 0px;
        z-index: 1;
        opacity: 0;
        animation-name: deshow;
        animation-fill-mode: forwards;
        animation-duration: 0.3s;
        flex-direction: column;
    }

    #all_menu a {
        text-decoration: none;
        color: white;
    }

    #all_menu p {
        font-family: afa;
        font-size: 200%;
        margin: 0;
    }

    .mob_men_links {
        width: 100%;
        height: 80px;
        text-align: center;
        align-content: center;
    }

    .menu_hr {
        width: 100%;
        height: 1px;
        border: none;
        background-color: gray;
    }

    #logos {
        width: 100%;
        height: 110px;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    #logos img {
        width: 50px;
        height: 50px;
        margin-left: 30px;
    }

    #main {
        display: none;
    }

    #main_mobile {
        display: flex;
        flex-direction: column;
        position: relative;
        justify-content: center;
        padding-top: 30px;
        border-radius: 20px;
        width: 100%;
    }

    #info_det_mobile {
        width: 80%;
        height: fit-content;
        border: 3px solid gray;
        border-radius: 20px;
        color: white;
        padding-left: 5%;
        padding-right: 5%;
        padding-bottom: 20px;
        align-self: center;
    }

    #info_det_mobile h1 {
        font-size: 2em;
        font-family: atk;
    }

    #info_det_mobile p {
        line-height: 1.7em;
        font-family: afa;
        font-size: 1.3em;
    }

    #info_det_mobile img {
        width: 100%;
    }

    #info_more_mobile {
        width: 80%;
        clear: both;
        display: flex;
        flex-direction: row;
        margin: auto;
        margin-top: 20px !important;
        gap: 20px;
    }

    #info_more_mobile a {
        text-decoration: none;
    }

    .mini_info_mobile {
        width: 90%;
        border: 3px solid gray;
        transition: border-radius 0.5s;
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 10px;
    }

    #fb_mobile {
        margin-bottom: 15px;
    }

    .mini_info:hover {
        border-radius: 20px;
    }

    .mini_info_mobile span {
        color: white;
        text-align: center;
        font-weight: bold;
        font-size: 32px;
        font-family: afa;
        margin-bottom: 0;
    }

    .mini_info_zdj {
        width: 40%;
        height: 100%;
        align-content: center;
    }

    .mini_info_mobile img {
        width: 80%;
    }

    #foot {
        display: none;
    }

    #foot_mobile {
        width: 100%;
        height: 60px;
        background-color: black;
        margin-top: 10px;
        text-align: center;
        align-items: center;
        display: flex;
        flex-direction: row;
        justify-content: center;
        color: white;
        margin-bottom: 0;
    }

    #band_info {
        display: none;
    }

    #band_info_mobile {
        width: 100%;
        height: min-content;
        color: white;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    #band_info_text_mobile {
        width: 80%;
        align-content: center;
        margin: 10px auto;
    }

    #band_info_img_mobile {
        width: 100%;
        align-content: center;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    #band_info_text_mobile h1 {
        font-family: atk;
        text-align: center;
    }

    #band_info_text_mobile p {
        line-height: 1.7em;
        font-size: 1.3em;
        font-family: afa;
    }

    #band_info_img_mobile div {
        width: 85%;
        margin: auto;
    }

    #band_info_img_mobile img {
        width: 100%;
        height: auto;
    }

    #band_history {
        display: none;
    }

    #band_history_mobile {
        width: 100%;
        margin: 20px auto;
        display: block;
    }

    #band_history_mobile h1 {
        text-align: center;
        color: white;
        font-family: afa;
        font-size: 3em;
    }

    #band_history_mobile div {
        margin: auto;
        width: 80%;
    }

    #band_history_mobile p {
        width: 100%;
        color: white;
        font-family: atk;
        font-size: 1.1em;
        line-height: 1.7em;
    }

    #band_history_mobile img {
        width: 100%;
        margin-bottom: 10px;
    }

    #krs_info {
        display: none;
    }

    #krs_info_mobile {
        margin: 10px auto;
        width: 80%;
        height: min-content;
        border-top: 3px solid gray;
        color: white;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    #krs_info_text {
        width: 100%;
        align-content: center;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    #krs_info_img {
        width: 100%;
        align-content: center;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    #krs_info_text h1 {
        font-family: atk;
        text-align: center;
    }

    #krs_info_text p {
        line-height: 1.7em;
        font-size: 1.3em;
        font-family: afa;
    }

    #krs_info_img div {
        width: 85%;
        margin: auto;
    }

    #krs_info_img img {
        width: 100%;
        height: auto;
    }

    #band_members {
        display: none;
    }

    #band_member_info {
        display: none;
    }

    #band_members_info_mobile {
        width: 100%;
        margin: auto;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .band_member_info_mobile {
        width: 100%;
        height: fit-content;
        display: flex;
        flex-direction: row;
    }

    .band_member_info_text_mobile {
        width: 50%;
        height: min-content;
    }

    .band_member_info_img_mobile {
        width: 50%;
        height: fit-content;
    }

    .band_member_info_img_mobile img {
        width: 100%;
    }

    .band_member_info_text_mobile h2 {
        margin: 5px auto;
        text-align: center;
        color: white;
        font-family: afa;
    }

    .band_member_info_text_mobile p {
        margin: 10px;
        text-align: center;
        color: white;
        font-family: atk;
        font-size: 0.65em;
    }

    #main_koncerty {
        display: none;
    }

    #main_koncerty_mobile {
        width: 90%;
        margin: 10px auto;
        height: fit-content;
        color: white;
        display: block;
    }

    #main_koncerty_mobile h1 {
        font-family: atk;
        font-size: 1.5em;
        text-align: center;
    }

    #main_koncerty_mobile li {
        font-family: atk;
        font-size: 0.7em;
    }

    #main_koncerty_mobile a {
        color: white;
        font-style: italic;
    }

    #main_galeria {
        display: none;
    }

    #main_galeria_mobile {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 95%;
        margin: auto;
        color: white;
    }

    .pre_galeria_mobile{
        width: 95%;
        display: flex;
        flex-direction: column;
        height: fit-content;
        align-items: center;
        position: relative;
        text-align: center;
        justify-content: center;
    }

    .galeria_zdj_mobile {
        width: 200px;
        height: 200px;
        overflow: hidden;
        align-items: center;
        position: relative;
        background-size: cover;
        background-position: center;
    }

    .name_galery_mobile{
        text-align: center;
        font-family: afa;
        font-size: 1.3em;
    }

    .pre_all_zdj_mobile{
        width: 100%;
        
    }

    .back_but_mobile{
        font-family: atk;
        cursor: pointer;
        font-size: 1.3em;
        width: fit-content;
    }

    #main_galeria_mobile a{
        text-decoration: none;
        color: white;
    }

    .all_zdj_mobile{
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        gap: 30px;
        margin-top: 20px !important;
        flex-wrap: wrap;
    }

    .galeria_zdj_other_mobile{
        width: 200px;
        height: 200px;
        overflow: hidden;
        background-size: cover;
        align-items: center;
        position: relative;
        background-position: center;
    }

    .all_zdj {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        gap: 30px;
        margin-top: 20px !important;
        flex-wrap: wrap;
    }


    #main_kontakt {
        display: none;
    }

    #main_kontakt_mobile {
        width: 95%;
        display: flex;
        flex-direction: column;
        margin: auto;
        margin-top: 20px;
        color: white;
        gap: 20px;
    }

    #main_kontakt_mobile div {
        width: 100%;
    }

    #main_kontakt_mobile div img {
        width: 100%;
        border-radius: 20px;
    }

    #main_kontakt_mobile h1 {
        font-family: atk;
        font-size: 1.5em;
    }

    #main_kontakt_mobile p {
        font-family: atk;
        font-size: 0.7em;
    }

    #main_kontakt_mobile li {
        font-family: atk;
        font-size: 0.7em;
    }

    #main_kontakt_mobile a {
        color: white;
        font-style: italic;
    }

    #main_broszura{
        display: none;
    }

    #main_broszura_mobile {
        width: 95%;
        display: flex;
        flex-direction: column;
        margin: auto;
        margin-top: 20px;
        color: white;
        gap: 20px;
    }

    #main_broszura_mobile h1 {
        font-family: atk;
        font-size: 1.5em;
        text-align: center;
    }

    #main_broszura_mobile div {
        width: 100%;
    }

    #main_broszura_mobile p {
        font-family: atk;
        font-size: 0.7em;
    }

    #opis_broszura_mobile {
        width: 100%;
        font-size: 0.9em !important;
        text-align: center;
    }

    #main_broszura_mobile div img {
        width: 100%;
        border-radius: 20px;
    }

    #main_broszura_mobile a {
        color: white;
        font-style: italic;
    }

    #main_broszura_mobile li {
        font-family: atk;
        font-size: 0.7em;
    }

    #all_detail {
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    align-items: center;
}
}