body {
    font-family: "Kanit", sans-serif; font-weight: 200; margin: 0; padding: 0; font-size: 16px; color: #111111; background-color: #ffffff;
}

.songs {
    max-width: 1400px;
    margin: auto;
}
.songs .linia { overflow: hidden; }

.song {
    border: 1px solid #ddd;
    margin: 10px;
    padding: 10px;
    width: calc((100% / 2) - 20px);
    text-align: center;
    box-sizing: border-box;
    cursor: default;
    float: left;
}
.song img { width: 100%; }
.song .skrot { font-size: 1.2em; }
.song .wiecej { font-size: 2em; margin-top: 20px; display: block; }

a { color: rgb(0, 102, 204); text-decoration: dotted; }

.przemowienie {
    max-width: 1900px; margin: 20px auto; font-size: 1.7em;
}

.pierwszaNag { width: 100%; max-height: 500px; overflow: hidden; position: relative; }
.pierwszaNag img { width: 100%; }
.pierwszaNag h1 {
    color: #fff; font-weight: 600; font-size: 5em; position: absolute; top: 0px; left: 500px;
    text-transform: uppercase; display: block; width: 550px;
}
.pierwszaNag h2 {
    color: #fff; font-weight: 600; font-size: 3.5em; position: absolute; bottom: 20px; right: 100px;
    text-transform: uppercase; display: block; width: 400px; line-height: 1.3em;
}
.pierwszaNag .logo { color: #fff; position: absolute; top: 94px; left: 20px; display: block; width: 500px; text-align: center; }
.pierwszaNag .logo img { width: 300px; }

nav { width: 70%; margin: 80px auto; font-size: 2em; }
nav div { width: calc(94% / 2); display: inline-block; text-align: center; border-bottom: 2px solid #900; text-decoration: none; }
nav div a { display: block; width: 100%; }

h3 { width: 100%; text-align: center; font-size: 3em; color: #4b0000; }

h4 { font-size: 3em; margin: 5px; }

.songinfo { width: 100%; max-width: 1300px; margin: 30px auto; }
.songinfo h4 { text-align: center; width: 100%; }
.songinfo h5 { font-size: 1.7em; text-align: center; width: 100%; margin: 0px; }
.songinfo iframe { margin: 30px auto; width: 533px; height: 300px; }
.songinfo .youtube { width: 100%; text-align: center; }
.songinfo .youtube_link { width: 100%; text-align: center; font-size: 2em; }
.songinfo .long_desc { font-size: 1.6em; margin-top: 40px; border-top: 2px dotted #999; }
.songinfo .short_desc { font-size: 1.6em; margin-top: 40px; border-top: 2px dotted #999; }
.songinfo .song_slowa { font-size: 1.6em; margin-top: 40px; }
.songinfo .song_slowa_nag { font-size: 1.8em; margin-top: 40px; font-weight: 600; padding-left: 40px; border-top: 2px dotted #999; }
.songinfo .song_autorzy { font-size: 1.6em; margin-top: 40px; border-top: 2px dotted #999; }

footer { height: 100px; background-color: #333; color: #fff; text-align: center; padding: 20px 0px; }
footer a { color: #fff;}

@media all and (max-width: 2000px) {
    .przemowienie { max-width: 1400px; font-size: 1.6em; }
}

@media all and (max-width: 1800px) {
    nav { font-size: 1.8em; }
}

@media all and (max-width: 1700px) {
    .pierwszaNag h1 { left: 425px; }
    .pierwszaNag h2 { right: 40px; }
    .pierwszaNag .logo { width: 400px; }
}

@media all and (max-width: 1500px) {
    .pierwszaNag h1 { left: 295px; font-size: 4em; top: 47px; }
    .pierwszaNag h2 { width: 285px; font-size: 2.5em; }
    .pierwszaNag .logo { width: 250px; top: 120px; }
    .pierwszaNag .logo img { width: 250px; }
    .przemowienie { max-width: 1000px; font-size: 1.5em; }
    nav { font-size: 1.6em; }
    .songinfo .short_desc { padding: 0px 20px; }
    .songinfo .long_desc { padding: 0px 20px; }
    .songinfo .song_slowa { padding: 0px 20px; }
    .songinfo .song_autorzy { padding: 0px 20px; }
}

@media all and (max-width: 1300px) {
    nav { font-size: 1.4em; }
}

@media all and (max-width: 1200px) {
    .pierwszaNag h1 { font-size: 4em; line-height: 1.2em; top: 0px; }
    .pierwszaNag h2 { line-height: 1.2em; right: 0px; bottom: 0px; }
    .pierwszaNag .logo { top: 47px; }
    .przemowienie { max-width: 800px; font-size: 1.5em; }
    
}

@media all and (max-width: 970px) {
    .przemowienie { max-width: 600px; font-size: 1.4em; }
    nav div { font-size: 1.5em; margin-top: 25px; display: block; width: 100%; }
    .song { width: 96%; margin: 20px 2%; }
}

@media all and (max-width: 800px) {
    .pierwszaNag h1 { left: 0px; font-size: 2.5em; width: 100%; box-sizing: border-box; top: 40px; text-align: center; }
    .pierwszaNag h2 { right: 20px; bottom: 65px; font-size: 2em; width: 250px; box-sizing: border-box; text-align: right; }
    .przemowienie { max-width: 550px; font-size: 1.3em; }
    .pierwszaNag .logo { top: auto; bottom: 10px; }
}

@media all and (max-width: 640px) {
    .przemowienie { max-width: 500px; font-size: 1.2em; }
    nav div { font-size: 1.3em; margin-top: 25px; display: block; width: 100%; }
    .songinfo .short_desc { font-size: 1.2em; }
    .songinfo .long_desc { font-size: 1.2em; }
}

@media all and (max-width: 600px) {
    .pierwszaNag h1 { text-align: center; padding: 0px; top: 0px; }
    .pierwszaNag h2 { right: auto; left: 0px; text-align: center; box-sizing: border-box; padding: 0px; width: 100%; bottom: auto; top: 110px; font-size: 1.7em; }
    .pierwszaNag .logo { left: 0px; width: 100%; text-align: center; }
    .pierwszaNag .logo img { width: 150px; }    
    h3 { font-size: 2em; }
    h4 { font-size: 2em; }
    .songinfo iframe { width: 450px; }
}

@media all and (max-width: 560px) {
    nav div { font-size: 1.2em; margin-top: 25px; display: block; width: 100%; }
}

@media all and (max-width: 510px) {
    .pierwszaNag h1 { font-size: 2em; }
    .pierwszaNag h2 { font-size: 1em; }
    .przemowienie { max-width: 430px; font-size: 1.1em; }   
    nav div { font-size: 1.1em; margin-top: 25px; display: block; width: 100%; }
    .songinfo iframe { width: 400px; }
}