* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

/* ustawiamy display:flex i flex-direction:column aby oś główna była Y i aby elementy układały się pod sobą */
/* align-items zmieniam z stretch na center */
body {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 200vh;
    font-size: 10px;
    font-family: 'Oswald', sans-serif;
}

/* nawigację rozciągamy zeby była na całą stronę */
/* align-self nadpisuje align-items */
nav {
    align-self: stretch;
}

/* dajemy display: flex na ul bo wtedy wszystkie li są elastyczne */
/* flex direction jest domyślnie na row */
ul {
    list-style: none;
    display: flex;
}

/* ustawiamy szerokość flex-basis bo jest po osi X (row) */
/* mozemy dać 100% bo dzięki flex-shrink: 1 wszystko zostaje zmniejszone proporcjonalnie*/
/* mozemy nawet dać 25%. Poniej np 15% dopiero zacznie się zmniejszać i wtedy nalezałoby dać flex-grow: 1 aby urosły*/
li {
    flex-basis: 100%;
}

/* paddingi dajemy na a bo jak damy na li to będą nieaktywne */
li a {
    display: block;
    background-color: #444;
    color: white;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 2.2em;
    padding: 20px;
    margin: 2px;
}

a:hover {
    background-color: #000;
}

/* nadajemy width 100% daje efekt jak stretch 
jednocześnie ograniczając szer do 1440px element jest wycentrowany*/
/* flex-basis nadajemy wysokość */
header {
    width: 100%;
    max-width: 1440px;
    flex-basis: 80vh;
    background-size: cover;
    overflow: hidden;
    background-color: #ccc;
    position: relative;
}

header img.logo {
    position: absolute;
    bottom: 50px;
    right: 5%;
    height: 10%;
    z-index: 1;
    animation: color 4s linear infinite;
}

header img.picture {
    position: absolute;
    bottom: 0;
    left: 0%;
    height: 110%;
    opacity: 0.3;
    animation: gray 4s linear infinite;
}

/* przywracamy 100% szerokości i poprzez text-align wyśrodkowujemy */
/* dzieci tego diva dziedziczą po nim */
/* nalezy podać top i left dla bezpieczeństwa */
header .product {
    position: absolute;
    top: 10%;
    left: 0;
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
    animation: text 4s linear infinite;
}

.product h1 {
    font-size: 4rem;
}

.product h2 {
    font-size: 2.6rem;
}

/* nadajemy display:flex aby main i aside były elastyczne - domyślnie row */
/* chcemy aby sekcja rosła na max za pomocą flex-grow */
/* na body ustawiliśmy height: 100vh i flex-grow zabiera wolną przestrzeń z body/
/* width:100% rośnie na całość rodzica ale max-width:1440px zatrzymuje
się na 1200px */
/* domyślnie mają align-items:stretch dlatego main i aside urosły */
main {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    width: 100%;
    max-width: 1440px;
    font-size: 2.2rem;

}

main h1 {
    font-size: 4rem;
    text-align: center;
    margin-bottom: 20px;
    text-transform: uppercase;
}

span {
    color: blue;
    text-transform: uppercase;
}

main a {
    font-size: 2rem;
    text-align: center;
}

/* flex-grow:1 pozwala e main opanowuje całą wolną przestrzeń i zostawia innym tylko tyle ile ten potrzebują */
section {
    flex-basis: 100%;
    flex-grow: 1;
}

section#about {
    padding: 10px 20px;
}

section#about p {
    margin-bottom: 20px;
    text-indent: 10vw;
}


section#offer {
    background-color: #ccc;
    text-align: center;

}

section#offer figure {
    display: inline-block;
    width: 340px;
    margin: 0;
    margin-bottom: 20px;

}

section#offer figure figcaption {
    text-align: center;
    font-size: 1.5rem;
}

section#offer figure img {
    width: 100%;
    border: 2px solid#444;
}

section#contact {
    width: 100%;
    text-align: center;
    font-size: 1.8rem;
    margin-bottom: 20px;
}

/* rozszerzyć mozemy za pomocą align-self: stretch (nadpisuje column) lub width:100%; */
/* wysokość stopki mozemy ustawić za pomocą flex-basis (jest column więc po osi Y */
/* wysokość zabierana jest z sekcji bo tam jest ustawione flex-grow 1 */
footer {
    background-color: #000;
    align-self: stretch;
    /* flex-basis: 10vh; */
    color: #fff;
    text-align: center;
    font-size: 2em;
}

footer a {
    color: #fff;
    text-decoration: none;
}

/* ustawiamy dla max 1024px flex-direction: column aby lepiej wyglądało na mobilnych */
/* rozdzielczość 1024px to rozsądna granica przejścia między mobile a desktop */
@media(max-width: 1280px) {
    section#offer figure {
        width: 49%;
    }

    a {
        margin: 2px;
    }
}

@media(max-width: 1024px) {
    ul {
        flex-direction: column;
    }

    /* zmieniamy kolejność. Header idzie do góry poprzez order:-1 */
    header {
        order: -1;
    }

    /* poprzez flex-wrap:wrap pozwalamy aby aside poszło do nowej lini */
    section {
        flex-wrap: wrap;
    }



    section#offer figure {
        width: 100%;
    }

    a {
        margin: 2px;
    }
}

/*  */
@keyframes color {
    0% {
        transform: translateX(0);
        opacity: 0;
    }

    8% {
        opacity: 0;
    }

    13% {
        opacity: 1;
    }

    87% {
        opacity: 1;
    }

    92% {
        opacity: 0;
    }

    /* podajemy % wielkości tego elementu */
    100% {
        transform: translateX(-15%);
        opacity: 0;
    }
}

@keyframes gray {
    0% {
        transform: scale(1);
        opacity: 0;
    }

    8% {
        opacity: 0;
    }

    13% {
        opacity: 0.3;
    }

    87% {
        opacity: 0.3;
    }

    92% {
        opacity: 0;
    }

    /* podajemy % wielkości tego elementu */
    100% {
        transform: scale(1.2);
        opacity: 0;
    }
}

@keyframes text {
    0% {
        transform: scale(1);
        opacity: 0;
    }

    8% {
        opacity: 0;
    }

    13% {
        opacity: 1;
    }

    87% {
        opacity: 1;
    }

    92% {
        opacity: 0;
    }

    /* podajemy % wielkości tego elementu */
    100% {
        transform: scale(1.2);
        opacity: 0;
    }
}