/* globalne rzeczy */


:root {
    --main: #282526;
    --aux: #fcd116;
    --main-alt: #322f30;
    --aux-alt: #ab912c;
    --main-third: #6e6d6b;
    --main-fourth: #aaa;

}

/* @font-face {
    font-family: Roboto;
    src: url('/media/fonts/Roboto.ttf');
} */

@font-face {
    font-family: Poppins-Bold;
    src: url('/media/fonts/Poppins-Bold.ttf');
}

/* rzeczy wbudowane w HTML */

body,
html {
    overflow-x: hidden;
    width: 100%;
    height: 100%;
    background-color: black;
    margin: 0;
    padding: 0;
}

body {
    
    display: flex;
    flex-flow: column;

}

h1,
h2,
h3,
h4,
h5,
h6,
p,
li,
a {
    /* jaka to jest czionka? */
    font-family: 'Poppins-Bold', 'Trebuchet MS', 'Helvetica', 'Verdana', sans-serif;
    color: white;
    text-align: center;
}

h1{
    font-size: 2rem;
}

header{
    position: relative;
}

p {
    font-size: large;
}

article {
    text-align: center;
}

/* własności wszystkich podstron */

.scream{
    text-transform: uppercase;
}

.big-header {
    margin: 0;
    padding: 2rem 0;
    font-size: calc(2rem + 1vw);
}

.bold{
    font-weight: bold;
}

.emph {
    font-size: x-large;
    font-weight: bold;
}

.mirrorred{
    transform: scale(-1, 1);
}


/* HEADER */
#banner {
    display: flex;
    /*background-color: var(--main);*/
    background-color: black;
    flex-flow: row;
    justify-content: space-between;
    height: 12rem;
}

#banner>* {
    
    margin: auto 0;
}

#banner img {
    max-width: 100%;
}

#logo{
    background-image: url('/media/img/loft3.png');
    background-position: center;
    background-color: black;
    background-size: contain;
    background-repeat: no-repeat;
    max-width: 25vw;
    height:8rem;
    width:12rem;
    
    margin: auto;
}


#main-container {
    flex: 1 0 auto;
}


.menu ul {
    line-height: 3rem;
    list-style: none;
    padding-left: 0;
}

.menu a {
    text-decoration: none;
    /* color: var(--aux);*/
    font-weight: bold;
    font-size: calc(1rem + 1vw);
    z-index: 2;
}

#mobile-menu-btn img {
    max-width: 50%;
    transition: all 0.4s ease-in-out;
}

#mobile-menu-btn {
    padding-left:0.5rem;
    text-align: center;
}

#mobile-menu {
    background-color: black;
    max-height: 0;
    overflow-y: hidden;
    transition: all 0.4s ease-in-out;
}

#wide-menu{
    flex:1;
  justify-content: space-evenly;
}

#wide-menu>a {
    white-space: nowrap;
    transition: all 0.4s ease-in-out;
    padding:0.5rem 1rem;
    font-size: min(2vw, 1.5rem);
}

#wide-menu .booking-tab {
    border-radius: 2rem;
}

#wide-menu>a:hover{
    background-color: var(--aux);
    color: var(--main);
}

.menu .booking-tab,.menu .booking-tab a {
    background-color: var(--aux);
    color:black;
    /*color: var(--main-alt);*/
}


/* END-HEADER */
/* FOOTER */

footer {
    flex-shrink: 0;
}



#contact {
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
}
footer .emph {
    color: var(--aux);
}

#contact>* {
    flex: 1;
    min-width: 18rem;
    width: 100%;
}

#contact ul {
    list-style: none;
    text-align: center;
    padding-left: 0;
}

.socials {
    width: 100%;
    text-align: center;
}

.socials img {
    margin: 0 auto;
    padding: 1rem 3rem;
    max-width: 4rem;
}

.legal>a{
   display: block;
}
/* END-FOOTER */
/* breaki mogą być wszędzie */
.break {
    background-image: url("/media/img/vouchers.jpg");
    min-height: 200px;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}


/* responsywność */

.wide {
    display: none;
}

@media screen and (max-width: 480px) {
    #banner{
        justify-content: space-around;
    }
    #logo{
        padding: 0;
        margin: 0;
        height: 100%;
    }
    #mobile-menu-btn{
        margin: auto 0;
        padding: 0;
    }
    
}

@media screen and (min-width: 768px) {
    .wide {
        display: revert;

    }

    .mobile {
        display: none;
    }

    #wide-menu{
        
    

        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }



}


@media screen and (min-width:966px) and (max-width:1366px) {

    #banner > *{
        padding: 1rem;
            
    }    

    #logo{
        margin-left:2rem;
    }

    #landing-text{
        margin-left:30vw;
    }

}

@media screen and (min-width: 1366px){
    #logo{
        margin-left: 2rem;;
    }
    #landing-text{
        margin-left:30vw;
    }
    #wide-menu>a{
        padding:2rem 3vw;
    }
}