* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}
body {

    font-family: Arial, sans-serif;

    background-color: #f4f4f4;

    color: #333;

    overflow:unset;

}
header {

    background-color: #A9C46C;

    color: white;

    text-align: center;

    padding: 20px;

    border: black 2px solid;

    border-collapse: collapse;

}

.tlo{

    background-color: #A9C46C;

}



header h1 {

    margin-bottom: 10px;

}



header p {

    font-size: 1.1rem;

}

article {

    background-color: #FFDF88;

    padding: 15px;

    margin: 20px;

    border-radius: 8px;

    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

    width: auto;

    height: auto;

}

article h2 {

    color: #77b355;

    margin-bottom: 10px;

}

article img {

    max-width: 100%;

    border-radius: 8px;

    margin-bottom: 15px;

    border: solid black 3px;

    box-shadow: -5px 5px 8px 2px black;

}

img:hover{

    border: 5px black solid;

    border-radius: 8px;

}

/* Stopka */

footer {

    color: white;

    text-align: center;

    padding: 10px;

    margin-top: 30px;

}

*{

    height: auto;

    align-items:normal;

    width: auto;

}

body{

    overflow-x: hidden;

    margin: 0px;

    box-sizing: border-box;

    background-color:#2C6B2F;

}

aside{

    width: 20%;

    background-color:#388E3C ;

    margin: 0px;

    padding: 15px;

    text-align: center;

}

.uloz{

    display: flex;

    margin: 0px;

}

footer{

    margin: 0px;

    padding: 15px;

    background-color: #2C6B2F;

}

.main_przepisy{

    width: 100%;

    background-color:peru;

    margin: 0px;

    padding: 15px;

    border: black 1px solid;

    border-collapse: collapse;

    display: flex;

    flex-direction: row;

    justify-content: space-evenly;

    align-items: center;

    flex-wrap:wrap;

    align-content: center;

}

header{

    text-align: center;

    width: 100%;

    margin: 0px;

    padding: 15px;

    background-color: #2C6B2F ;

}

h3{

    text-align: center;

    margin: 0px;

}

.odpowiedzi{

    width: 100%;

    margin:0px;

    padding: 15px;

    background-color: #388E3C;

    color: black;

    border: black 1px solid;

    border-collapse: collapse;

}

article.przepisy{

    margin: 0px;

    padding: 0px;

    display: flex;

    border: black solid 1px;

    flex-direction: row;

    flex-wrap: nowrap;

    align-content: stretch;

    justify-content: space-evenly;

    align-items: center;

    height: 650px;

    max-width: 50%;

    background-color: #FFDF88;

    box-shadow: -10px 10px 10px 0px black, inset -2px 2px 6px 0px black;

}

.zdjecie{

    margin: 0px;

    padding: 15px;

    max-width: 100%;

    height: auto;

    border:3px black dashed; 

    border-bottom: 0;

    border-collapse: collapse;

    text-align: center;

    background-color: #FFA55D;

}

p{

    text-align: center;

    width: 100%;

    margin: 0px;

    padding: 15px;

    position: relative;

}

h4{

    width: 100%;

    margin: 0px;

    text-align: center;

}



.przepisy{

    margin: 0px;

    margin-bottom: 15px;

    padding: 15px;

    text-align: center;

    border: dashed 3px black;

    border-collapse: collapse;

    background-color: #FFD061;

    box-shadow: -3px 3px 3px 2px;

}

button{

    float: right;

    text-align: center;

    margin: 0px;

    padding: 5px;

    background-color: lightgreen;

    box-shadow: -6px 5px 5px 1px black;

}

.przycisk{

    background-color: #006400;

}

ul, ol{

    text-align: left;

    margin: 0px;

    padding: 14.5px;

}

.rozwijany_przepis_przepisy{

    background-color:#FFA55D;

    color: #222;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    align-content: center;

    width: 500px;

    height: 650px;

}

ul>li::marker{

    content: "-";

}

a{

    text-decoration-line: none;

    color: #333;

    

}

a:hover{

    text-decoration-line: underline;

    text-decoration-color: goldenrod;

}

a:active{

    color: yellowgreen;

}

.stopka{

    text-align: center;

    width: 100%;

    margin: 0px;

    padding: 16px;

    position: relative;

}

hr{

    border-color: black;

    border-style: solid;

}

.artykol{

    display: grid;

    margin: 15px;

    margin-bottom: 0px;

    max-width: 100%;

    height: 100%;

}

.menu{

    background-color: forestgreen;

    position: sticky;

    top: 0px;

    float: left;

}

.lista{

    padding: 0px;

    padding-left: 40px;

}

.strony{

    padding: 0px;

    background-color: #0CCA4A;

    border: black 2px solid;

    border-collapse: collapse;

}

.strony p{

    border: black 1px solid;

}

.strony p a{

    color: #222;

}

.strony p a:hover{

    color: black;

}

.rozwin_strony{

    background-color: #214e24;

}

nav#nav_1 p a#przycisk{

    font-weight: 800;

    color: white;

}

section.rozwijany_przepis section ul,ol{

    margin: 15px;

}

.zdjecia_responsywnosc_goz{

    min-height: 200px;

    max-height: 700px;

    width: auto;

    margin: 10px 0px 10px 0px;

}

.zdjecia_responsywnosc_przepisy{

    min-height: 100px;

    max-height: 550px;

    width: auto;

    object-fit: cover;

}

.artykol_komputer{

    display: flex;

    margin: 15px;

    margin-bottom: 0px;

    width: 400px;

    height: 700px;

    flex-direction: column;

    align-content: center;

    justify-content: space-evenly;

    align-items: center;

}

.zdjecie_komputer{

    margin: 0px;

    padding: 15px;

    height: auto;

    border:3px black dashed; 

    border-collapse: collapse;

    text-align: center;

    display: flex;

    align-items: center;

    margin-bottom: 15px;

    width: 75%;

    flex-direction: column;

    background-color: #FFA55D ;

}

.przepisy_komputer{

    margin: 0px;

    margin-bottom: 15px;

    padding: 15px;

    text-align: center;

    width: 100%;

    border: dashed 3px black;

    border-collapse: collapse;

    background-color: #FFD061;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    align-items: stretch;

    box-shadow: -3px 3px 3px 2px;

}

.article_goz {

    background-color: #FFDF88;

    margin: 0px;

    margin-bottom: 20px;

    border-radius: 8px;

    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

    width: auto;

    height: auto;

    border: solid 2px black;

}

.lazy_loaded{

    opacity: 1;

    transition: opacity 400ms;

    transition-delay: 0ms;

}

.linia{

    border: black solid 4px;

    border-radius: 8px;

}

.tlo_2{

    background-color: moccasin;

}   

.ograniczenie{

    display: flex;

    flex-direction: row;

    flex-wrap: wrap;

    align-content: center;

    justify-content: space-evenly;

    align-items: center;

}

.linie{

    width: 100%;

    display: flex;

    flex-direction: row;

    flex-wrap: wrap;

    align-items: center;

    justify-content: space-evenly;

    align-items: center;

    margin: 10px;

}

.rozwijany_przepis{

    background-color:#FFA55D;

    color: #222;

}

main{

    width: 100%;

    margin: 0px;

    padding: 15px;

    border: black solid 1px;

    border-collapse: collapse;

    background-color: peru;

}

section.rozwijany_przepis_przepisy:hover{

    border-bottom: solid 5px black;

    border-top:solid 5px black ;

    z-index: 2;

}

@keyframes animacja{

    0% {left:-100px}

    100% {left: 0px;}

    from {opacity: 0;}

    to {opacity: 1;}

}

article{

    position: relative;

    animation: animacja 2s ease-in-out;

}

section.rozwijany_przepis_przepisy{

    position: relative;

    animation: animacja 2s ease-in-out;

    box-shadow: inset 0px 0px 10px 0px black;

    border-radius: 8px;

}

article.article_goz{

    position: relative;

    animation: animacja 2s ease-in-out;

}

@keyframes pojawianie{

    0% {top:-50px}

    100% {top: 0px;}

    from {opacity: 0;}

    to {opacity: 1;}

}

section.rozwijany_przepis{

    position: relative;

    animation: pojawianie 2s ease-in-out;

    box-shadow: inset 0px 0px 10px 0px black;

    border-radius: 8px;

}

nav#nav_1, section#nav{

    position: relative;

    animation: pojawianie 1s ease-in-out;

}

@keyframes znikanie {

    0% {left: -10px;}

    100% {left: 0px;}

    from {opacity: 0;}

    to {opacity: 1;}

}

section.uloz>img.animacja:hover{

    position: relative;

    animation: znikanie 1s ease-in-out 100ms; 

}

.article_telefon{

    margin-left: 0px;

    margin-right: 0px;

    box-shadow: -10px 10px 10px 0px black, inset -2px 2px 6px 0px black;

}

.rozmycie_iframe_index{

    box-shadow: 0px 3px 6px 11px coral;

}
.uloz_escape_room{
    display: flex;
    flex-direction: column;
    text-align: center;
}
.escape_room{
    width: 100%;
    height: calc(100% - 80px);
}
.podrubienie{
    font-weight: 900;
    background-color: #FFA55D;
    margin-bottom: 20px;
    border-radius: 8px;
    text-decoration: underline 3px;
}
@media (max-width:600px) {
    iframe{
        height: 430px;
    }
    main .telefon_e_s{
        height: 540px;
    }
    img .zespol{
        height: 420px;
    }
    section .film{
        height: 500px;
    }
}