@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Caveat&display=swap');

@media all and (min-width: 1001px){
    body{
        margin: 0;
        font-family: 'Raleway', sans-serif;
    }
    h3, header{
        font-family: 'Caveat', cursive;
        font-size: x-large;
    }
    header{
        height: 70px;
        width: 100%;
        background: rgba(135, 206, 250, 0.685);
        display: flex;
        align-items: center;
        position: fixed;
        backdrop-filter: blur(6px);
        box-shadow: 0px 0px 13px 2px rgba(135, 206, 250);
        justify-content: space-around;
    }
    .head_kateg{
        padding: 10px;
        background-color: rgba(255, 255, 0, 0.37);
        margin: 0 10px;
        border-radius: 4px;
        transition: 200ms;
    }
    .head_kateg:hover{
        background-color: yellowgreen;
    }
    #main{
        background-image: url("./obrazy/forest-2942477_comphard.jpg");
        /* Image by Sven Lachmann from Pixabay */
        width: 100%;
        min-height: 100vh;
        padding-top: 80px;
        background-size: cover;
        background-position-x: 20%;
    }
    #blokl{
        background-color: rgba(241, 222, 187, 0.801);
        width: 40%;
        padding: 20px;
        margin: 10px;
        border-radius: 5px;
    }
    #blokp{
        background-color: rgba(241, 222, 187, 0.801);
        width: 30%;
        padding: 20px;
        margin: 10px;
        border-radius: 5px;
    }
    .kleks{
        display: flex;
        justify-content: center;
    }
    .op_blok_poz{
        width: 90%;
        min-height: 40px;
        background-color: rgba(0, 153, 0, 0.575);
        border-radius: 5px;
        padding: 10px;
        margin: 8px auto;
    }
    .op_blok_neu{
        width: 90%;
        min-height: 40px;
        background-color: rgba(130, 153, 0, 0.575);
        border-radius: 5px;
        padding: 10px;
        margin: 8px auto;
    }
    .op_blok_neg{
        width: 90%;
        min-height: 40px;
        background-color: rgba(160, 22, 17, 0.521);
        border-radius: 5px;
        padding: 10px;
        margin: 8px auto;
    }
    .op_nazwa{
        font-size: large;
        font-weight: bold;
        margin: 0 0 4px 0;
    }
    #blokl>p>img{
        margin: 0 10px 5px 0;
        float: left;
        border-radius: 5px;
    }
    .fbembed{
        background-color: rgba(255, 255, 255, 0.788);
        border-radius: 5px;
    }
    #bloks{
        background-color: rgba(241, 222, 187, 0.801);
        width: 80%;
        padding: 20px;
        margin: 10px;
        border-radius: 5px;
    }
    .cytat{
        font-family: 'Caveat', cursive;
        font-size: 32px;
    }
    a{
        color: rgb(35, 64, 190);
        text-decoration: none;
    }
    .op_data{
        font-size: smaller;
        text-align: right;
    }
    .blog_main{
        background-color: rgba(172, 255, 47, 0.363);
        border-radius: 5px;
        padding: 15px;
        box-shadow: 0px 10px 21px 0px rgba(0,0,0,0.75);
        margin: 20px 0;
    }
    .blog_tytul{
        font-family: 'Caveat', cursive;
        font-size: xx-large;
    }
    .blog_tresc>img, .blog_tresc>p>img, .blog_tresc img{
        padding: 7px;
        margin: 5px 0;
        background-color: rgba(132, 206, 22, 0.822);
        border-radius: 5px;
        max-width: 99%;
    }
    .admin_kateg{
        color:#1c1275; background-color: white; padding:10px; margin: 0 5px 0 0;
    }
    .logo{
        display: flex; align-items: center; font-size: 40px;
    }
    .formularz_opinia{
        margin: 0 auto; width: 670px;
    }
    input, textarea{
        width: 500px;
        background-color: rgb(255, 255, 255);
        padding: 5px;
        border: 1px solid greenyellow;
        border-radius: 5px;
    }
    .margin_up{
        margin: 10px 0 0 0;
    }
}



@media all and (max-width: 1000px){
    body{
        margin: 0;
        font-family: 'Raleway', sans-serif;
        background-size: 100%;
        background-position-x: 20%;
        background-attachment: fixed;
        background-image: url("./obrazy/forest-2942477_comphard.jpg");
        /* Image by Sven Lachmann from Pixabay */
        background-color: #202020;
        font-size: 18px;
    }
    h3, header{
        font-family: 'Caveat', cursive;
        font-size: x-large;
    }
    header{
        line-height: 25px;
    }
    h3{
        font-size: 30px;
        margin: 5px 0 3px 0;
    }

    header{
        height: 70px;
        width: 100%;
        background: rgba(135, 206, 250, 0.685);
        display: flex;
        align-items: center;
        position: fixed;
        backdrop-filter: blur(6px);
        box-shadow: 0px 0px 13px 2px rgba(135, 206, 250);
        justify-content: space-around;
    }
    .head_kateg{
        padding: 5px;
        background-color: rgba(255, 255, 0, 0.37);
        margin: 0 5px;
        border-radius: 4px;
        transition: 200ms;
    }
    .head_kateg:hover{
        background-color: yellowgreen;
    }
    #main{

        width: 100%;
        min-height: 100vh;
        padding-top: 80px;

    }
    #blokl{
        background-color: rgba(241, 222, 187, 0.801);
        width: 85%;
        padding: 20px;
        margin: 10px;
        border-radius: 5px;
    }
    #blokp{
        background-color: rgba(241, 222, 187, 0.801);
        width: 85%;
        padding: 20px;
        margin: 10px;
        border-radius: 5px;
    }
    .kleks{
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }
    .op_blok_poz{
        width: 90%;
        min-height: 40px;
        background-color: rgba(0, 153, 0, 0.575);
        border-radius: 5px;
        padding: 10px;
        margin: 8px auto;
    }
    .op_blok_neu{
        width: 90%;
        min-height: 40px;
        background-color: rgba(130, 153, 0, 0.575);
        border-radius: 5px;
        padding: 10px;
        margin: 8px auto;
    }
    .op_blok_neg{
        width: 90%;
        min-height: 40px;
        background-color: rgba(160, 22, 17, 0.521);
        border-radius: 5px;
        padding: 10px;
        margin: 8px auto;
    }
    .op_nazwa{
        font-size: large;
        font-weight: bold;
        margin: 0 0 4px 0;
    }
    #blokl>p>img{
        margin: 0 10px 5px 0;
        float: left;
        border-radius: 5px;
    }
    .fbembed{
        background-color: rgba(255, 255, 255, 0.788);
        border-radius: 5px;
    }
    #bloks{
        background-color: rgba(241, 222, 187, 0.801);
        width: 85%;
        padding: 20px;
        margin: 10px;
        border-radius: 5px;
    }
    .cytat{
        font-family: 'Caveat', cursive;
        font-size: 32px;
    }
    a{
        color: rgb(35, 64, 190);
        text-decoration: none;
    }
    .op_data{
        font-size: smaller;
        text-align: right;
    }
    .blog_main{
        background-color: rgba(172, 255, 47, 0.363);
        border-radius: 5px;
        padding: 15px;
        box-shadow: 0px 10px 21px 0px rgba(0,0,0,0.75);
        margin: 20px 0;
    }
    .blog_tytul{
        font-family: 'Caveat', cursive;
        font-size: xx-large;
    }
    .blog_tresc>img, .blog_tresc>p>img, .blog_tresc img{
        padding: 7px;
        margin: 5px 0;
        background-color: rgba(132, 206, 22, 0.822);
        border-radius: 5px;
        max-width: 99%;
    }
    .admin_kateg{
        color:#1c1275; background-color: white; padding:10px; margin: 0 5px 0 0;
    }
    .logo{
        display: flex; align-items: center; font-size: 28px;
        margin: 3px 0 0 3px;
    }
    .formularz_opinia{
        margin: 0 auto; width: 100%;
    }
    input, textarea{
        width: 250px;
        background-color: rgb(255, 255, 255);
        padding: 5px;
        border: 1px solid greenyellow;
        border-radius: 5px;
    }
    .margin_up{
        margin: 4px 0 0 0;
    }
}