@import url('https://fonts.googleapis.com/css2?family=Frank+Ruhl+Libre:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

body {
    font-family: Ubuntu, 'Microsoft YaHei Light', sans-serif;
    font-weight: 300;
    height: 100vh;
    width: 80%;
    background-image: white;
    background-size: 100% 100%;
    margin: auto;
    display: grid;
    grid-template-columns: 12em auto;
    grid-template-rows: 185px auto 25px;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    grid-template-areas: 
      "header header"
      "nav main"
      "footer footer";
    row-gap: 10px;
    column-gap: 10px;
}

@media (max-width: 1000px) {
    body {
        width: 100%;
        grid-template-areas: 
          "header"
          "nav"
          "video"
          "main"
          "footer";
        grid-template-columns: auto;
        grid-template-rows: auto auto auto auto 25px;
    }

    nav h1 {
        margin: 0px 0 10px 0;
    }
}

@media (min-width: 1001px) {
    video {
        display: none
    }
}

header {
    font-family: 'Frank Ruhl Libre', cursive, serif;
    grid-area: header;
    font-size: 6vmin;
    height:100%;
    width:100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(219, 187, 117, 0.329);
}

header img {
    object-fit: cover;
    max-width: 100%;
}

nav {
    grid-area: nav;
    justify-self: center;
    width: 92%;
    padding: 4%;
    background-color: rgb(195 138 89 / 35%);
}

main {
    grid-area: main;
    justify-self: center;
    width: 95%;
    padding: 2.5%;
    background-color: rgba(165, 147, 94, 0.3);
}

footer {
    grid-area: footer;
    font-size: 2vmin;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color:  rgba(235, 201, 13, 0.445);
}

nav h1 {
    text-transform: uppercase;
}

nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

nav li {
    padding: 10px auto;
    margin: 0;
}

nav li a {
    padding: 10px 5px;
    text-decoration: none;
    color: black;
    display: block;
    background: rgba(202, 180, 147, 0.1);
    transition: ease-in-out 0.2s background-color;
}

nav li a.active, nav li a:hover {
    background: rgba(224, 146, 56, 0.404);
}

main section {
    width: 100%;
}

main section article.general {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
}

main section article.general img {
    width: 47.5%;
    height: 47.5%;
}

main section article.główna p {
    color: black;
}

main section article.general p {
    text-align: justify;
    font-size: 20px;
    width: 100%;
    padding-right: 5%;
}

@media (min-width: 0px) and (max-width: 1000px) {
    main section article.general {
        flex-direction: column;
    }

    main section article.general img {
        width: 100%;
        height: 100%;
    }

    main section article.general p {
        width: 100%;
        padding: 0;
    }
}

table, tr, td {
    border: 1px solid black;
    border-collapse: collapse;
    font-size: 25px;
}


h1 {
    font-size: 30px;
    width: 100%;
}


main article img {
    height: 40%;
    width: 40%;
}

main article.contact {
    font-size:20px;
}

div.ramka {
    background-color: rgba(240, 198, 12, 0.65);
    list-style-type: none;
    padding: 0 10px 15px 10px;
    margin: 0;
    display: block;
    width: 40%;
}

div.ramka a {
    text-decoration: none;
    color: white;
    font-size: 23px;
    display: block;
}

div.ramka a:hover {
    text-decoration: underline;
    color: black;
}

div.ramka h2 {
    color: white;
}

div.ramka p {
    color: white;
    font-size: 19px;
}

main section article.slajd {
    min-height: 300px;
    padding: 20px;
    width: calc(100% - 40px);
    background-size: cover;
    background-position-x: center;
}
main section article#strgl {
    background-image: url('chleb.jpg');
}

main section article#historia {
    background-image: url('historia.jpg');
}

main section article#cennik {
    background-image: url('c.jpg');
}

main#main-index section {
    color:black;
}
main section article#con {
    background-image: url('kontakt.jpg');
}

main section article#sprz {
    background-image: url('mapa.jpg');
}

main section article#cen {
    background-image: url('c.jpg');
}

main section article#rodz {
    background-image: url('pszenica.jpg');
}
main section article#godz {
    background-image: url('ti.jpg');
}
div.ramka#h {
    color: grey;
}
main section article a {
    text-decoration: none;
    color: black;
}
main section article a:hover {
    text-decoration: underline;
    color: rgb(102, 100, 95);
}
main section article img.zdj {
    height:50%;
    width:50%;
    object-fit: cover;
}
div#h {
    background-color: rgba(223, 168, 116, 0.55);
}
div#sprz {
    background-color: rgba(224, 179, 140, 0.6);
}
div#godz {
    background-color: rgba(149, 156, 168, 0.6);
}
div#con {
    background-color: rgba(93, 95, 99, 0.418);
}
div#cen {
    background-color: rgba(134, 136, 141, 0.56);
}
main section#rodz2 {
    display: flex;
    flex-wrap: wrap;
    
}
section.rodz article p:first-child {
    font-weight: normal;
    font-family: 'Microsoft YaHei UI';
}

section.rodz article {
    max-width: 32%;
    margin:0% 1% 1% 0%;
}

@media (max-width: 1050px) {
    section.rodz article {
        max-width: 49%;
    }
}

@media (max-width: 750px) {
    section.rodz article {
        max-width: 99%;
    }
}

section.rodz article img {
    width: 100% !important;
}

h2 {
    font-weight: normal;
}
td#nazwa {
    font-weight: normal;
}
td#cena {
    font-weight: normal;
}
a#tel{
    color:grey;
}
a#adres{
    color:grey;
}
a#email{
    color:grey;
}