
@media all and (max-device-width: 1000px){
    

    body{
        margin: 0;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        align-content: flex-start;
        height: 100vh;
        background-color: #0a1525;
        font-family: czcionka2;
         width: 100%;
    }


    /*nagłówek*/

        header{

            font-family: czcionka1;
            letter-spacing: 1px;
            text-align: center;
            width: 100%;
            height: 40%;
            background-image: url(../images/kolumny.jpg);
            background-position: center;
            color: white;
            background-size: cover;
            display: flex;
            justify-content: center;
            align-content: center;
            flex-wrap: wrap;

        }

        header h2{
            width: 100%;
            margin: 0;
            font-size: 70px;
        }    
        header a{
            width: 250px;
            height: 60px;
            font-size: calc(0.7vh + 1vw);
            background-color: #baa881;
            color: white;
            text-decoration: none;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 30px;
        }
            a img{
            width: 50px;
                height: 50px;
            }
    /*sekcja*/

    section{
            
            color: #0a1525;
            margin-top:1%;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            width: 100%;
            height: auto;
        }

    #dane{
        width: 100%;
        margin-left: 10%;
        color: white;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    #dane img{
        width: 50px;
        height: 50px;
        margin-right:10px;
    }
    #dane > div{
        
        font-size: calc(0.5vw + 1vh);
        display: flex;
        flex-direction: row;
        width: 50%;
        align-items: center;
        margin: 1vh;
        height: 5vh;
    }
        .gold{
            width: 100px;
            height: 3px;
            background-color: #baa881;
            margin-bottom: 3%;
            margin-top: 3%;
        }
    #code{
        margin-top: 3vh;
        width: 80%;

        display: flex;
        
       
        flex-direction: column;

    }
    #code img{
    width: 40%;
        max-width: 400px;
    }
    #code p{
        color: white;

    }
    section a, footer a{
        color: white;
        text-decoration: none;
    }
    #dane div:nth-of-type(2) img, #dane div:nth-of-type(3) img{
    width: 30px;
        height: 30px;
         margin-right:20px;
        margin-left:10px;
    }

    /*rodo*/
        #rodo{
            margin-top: 3vh;
        color: white;
        width: 80%;
            border-top: 2px solid #baa881;
    }
    #rodo h3{
        font-family: czcionka2;
        font-size: 1.5em;
    }
    #rodo li{
        font-size: 0.7em;
        margin-bottom: 1vh;
    }

}

@media all and (min-device-width: 1000px){
    

    body{
        margin: 0;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        align-content: flex-start;
        height: 100vh;
        background-color: #0a1525;
        font-family: czcionka2;
    }


    /*nagłówek*/

        header{

            font-family: czcionka1;
            letter-spacing: 1px;
            text-align: center;
            width: 100%;
            height: 60%;
            background-image: url(../images/kolumny.jpg);
            background-position: center;
            color: white;
            background-size: cover;
            display: flex;
            justify-content: center;
            align-content: center;
            flex-wrap: wrap;

        }

        header h2{
            width: 100%;
            margin: 0;
            font-size: 50px;
        }    
        header a{
            width: 200px;
            height: 50px;
            background-color: #baa881;
            color: white;
            text-decoration: none;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 30px;
        }
            a img{
            width: 50px;
                height: 50px;
            }
    /*sekcja*/

        section{

            color: #0a1525;
            margin-top:1%;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            width: 100%;
            height: 120vh;
        }

    #dane{
        width: 40%;

        color: white;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    #dane img{
        width: 50px;
        height: 50px;
        margin-right:10px;
    }
    #dane > div{
        font-size: calc(0.5vw + 1vh);
        display: flex;
        flex-direction: row;
        width: 50%;
        align-items: center;
        margin: 1vh;
        height: 5vh;
    }
        .gold{
            width: 100px;
            height: 3px;
            background-color: #baa881;
            margin-bottom: 3%;
            margin-top: 3%;
        }
    #code{
    width: 40%;

        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

    }
    #code img{
    width: 70%;
        max-width: 400px;
    }
    #code p{
        color: white;

    }
    section a, footer a{
        color: white;
        text-decoration: none;
    }
    #dane div:nth-of-type(2) img, #dane div:nth-of-type(3) img{
    width: 30px;
        height: 30px;
         margin-right:20px;
        margin-left:10px;
    }
    #rodo{
        color: white;
        width: 80%;
    }
    #rodo h3{
        font-family: czcionka1;
        font-size: 2em;
    }
    #rodo li{
        font-size: calc(0.8vh + 0.5vw);
        margin-bottom: 1vh;
    }

    /*stopka*/
}