* {
    padding: 0;
    margin: 0;
    font-family: tahoma, arial;
}

header {
    background: url('tlo.JPG') center;
    background-size: cover;
    /* cover ma tę wadę, ze nie widać części zdjecia, ale to nie jest wada, tylko odwieczne prawa fizyki :). Natomiast plus jest taki ze zachowuje proporcje i wypełnia cały ekran.*/
    height: 100vh;
    /* wysokość jak w oknie przeglądarki */
    width: 100vw;
    /* szerokość jak w oknie przeglądarki */
    display: flex;
    /*jak wyświetlane są elementy w kontenerze */
    align-items: center;
    /*wycentruj nam*/
    justify-content: center;
    /*ustaw nam w środku */
    flex-direction: column;
    /*ułuż pod sobą od góry w pionie*/
    -webkit-box-shadow: 3px 3px 30px 5px rgba(204, 204, 204, 0);
    -moz-box-shadow: 3px 3px 30px 5px rgba(204, 204, 204, 0);
    box-shadow: 3px 3px 30px 5px rgba(204, 204, 204, 0);
}

h1,
h2 {
    text-align: center;
    color: #ddd;
}

h1 {
    font-size: 40px;
    margin-bottom: 20px;
}

h2 {
    font-size: 26px;
}

button {
    position: absolute;
    bottom: 22%;
    width: 260px;
    left: 50%;
    margin-left: -130px;
    /*przesuwamy w lewo o połowę wielkości przycisku */
    box-sizing: border-box;
    /*Box-sizing jest domyślnie w button na border-box w chrome, ale więć nie trzeba dodawać, ale w starych przeglądarkach moze być inczej więc na wszelki wypadek można dodać ;)*/
    padding: 20px;
    border: 3px solid darkred;
    border-radius: 5px;
    font-size: 20px;
    text-decoration: none;
    background-color: brown;
    color: #ddd;
}

button:hover {
    background-color: darkred;
    box-shadow: 2px;
    cursor: pointer;
}

a {
    color: floralwhite;

}