@media only screen and (max-width: 1700px) {

	.start-astro { width: 300px; }
	.start-meteor { width: 180px }

}



@media only screen and (max-width: 1350px) {

	.start-astro { width: 260px; left: 5% }
	.start-meteor { width: 140px }

}


@media only screen and (max-width: 1200px) {

	h2 { font-size: 50px;  }
	.section2 .txt-color { font-size: 30px;  }

}


@media only screen and (max-width: 1100px) {
	.section-flex .kol { width: 50%; flex: 0 0 50%;}
	.start-astro { width: 220px; bottom: 50px; left: 50px }
	.lot {  width: 80%; margin-left: 10%; }
}

@media only screen and (max-width: 1000px) {

	.section2 .center { width: 800px; }
	 h2 {     font-size: 40px; }
	 h3 { font-size: 30px; margin-bottom: 20px; }
	 .txt { font-size: 18px }
	 .center { width: 94% }
	 .section-flex { padding: 100px 0; }

	 .droga-desk { display: none; }
	.droga-tablet { display: block; }
	.lot {  width: 100%; margin-left: 0; }
	.rocket, .rocket span{ width: 100px; height: 100px }

}

@media only screen and (max-width: 900px) {
.section2 .center { width: 94% }
.section-flex .kol-empty { width: 40%; flex: 0 0 40%;}
.section-flex .kol-txt { width: 60%; flex: 0 0 60%;}


.start .title { max-width: 60%; }
.start-astro { width: 180px;  left: 20px; }
.start-meteor {  width: 120px;  top: 50px;  }
.front-center .tytul-dopisek { font-size: 20px; }
.front-center .tytul-dopisek span { font-size: 26px }

.btn { font-size: 22px; }


}


@media only screen and (max-width: 700px) {
.section2 .center { width: 94% }
.section-flex .kol-empty { width: 30%; flex: 0 0 30%;}
.section-flex .kol-txt { width: 70%; flex: 0 0 70%;}
.title, .title-inner { max-height: 35vh }
.title img { height: 100%; }
.lot {  width: 80%; margin-left: 10%; }
.start-astro { width: 140px; bottom: 100px;  }
.start-meteor { width: 100px; }
}




@media only screen and (max-width: 600px) {
.section2 .center { width: 94% }
.section-flex .kol-empty { width: 20%; flex: 0 0 20%;}
.section-flex .kol-txt { width: 80%; flex: 0 0 80%;}
.rocket, .rocket span{ width: 70px; height: 70px }
h3 { font-size: 28px; margin-bottom: 15px; }
.txt { font-size: 18px }
.front-center .tytul-dopisek { font-size: 18px; }
.front-center .tytul-dopisek span { font-size: 22px; white-space: nowrap; }
.start-scroll { width: 35px; height: 35px; }
.scroll-arrow img { width: 16px;  }
.scroll-arrow { width: 16px; height: 16px; right: 9px; top: 8px; }
.droga-tablet { display: none; }
	.droga-mobile { display: block; }
	.lot {  width: 100%; margin-left: 0%; }
	.start-astro { bottom: 50px;  }
	.start .title img { width: 328px; display: block; height: 220px; margin: auto;}
	.start .title { max-width: 100% }
}



@media only screen and (max-width: 500px) {

		
	.rocket, .rocket span{ width: 60px; height: 60px }
	.start-meteor { width: 100px; top: 30px;  }
	  .start-astro { width: 140px;  bottom: 50px;  }
	.btn { font-size: 19px; padding: 15px 40px; }

	.center { width: 90% }
}


@media only screen and (max-width: 400px) {
	  .start .title img {   width: 292px;   display: block;   height: 175px; }
}






@media only screen and (max-width: 1350px) {
    .scoreHeader{ font-size:55px; }
    .scoreTxt{ margin-bottom:55px; }
    .scoreCountHeader{ font-size:45px; }
    .scoreCount{ font-size:100px; }
    .scoreBtn{ font-size:20px; padding:13px 15px; }
}

@media only screen and (max-width: 1100px) {

    .scoreTable{ width:92%; }
    #scoreboardContainer{ width:92% }
    .scoreTableFinal{ width:100%; }
}

@media only screen and (max-width: 970px) {
    
    .scoreBtn{ font-size:20px; padding:13px 15px; width:48%; }
    #gameArea {
        width: 100vmin;
        height: 100vmin;
    }
    #gameArea{  }
    #hud{ top:45px;  }
    #board{ align-items:flex-start; }
    #gameAreaOuter{padding-top:100px;}

    .scoreForm{ width:100%; }

    .scoreOneMoreBottom{ margin-top:50px; }

    .copy{ 
      left: 5px;
      bottom: -18px;
      transform: unset;
      }
}


@media only screen and (max-width: 800px) {
    .scoreHeader{ margin-top: 20px; font-size:48px; }
    .scoreTxt{ font-size:18px; margin-bottom:45px; }
    .scoreCountHeader{ font-size:40px; }
    .scoreCount{ font-size:90px; }
    .scoreBtn{ font-size:20px; padding:13px 15px; width:90%; margin-left:5%; margin-bottom:25px; }
    .scoreBtnFlex{ margin-top:60px; flex-direction:column-reverse; }
    #startBtn { width: 65%; padding: 14px; font-size:25px; }

    .score-header{ font-size:35px; }
    .score-name{ font-size:20px; }
    .score-points{ font-size:25px; }
    .score-row{ margin:20px 0; padding-bottom:12px; }
    .score-header2{ margin-top:65px; font-size:30px; }

    .scoreTable{ margin-top: 40px;}

    .countDown{ font-size:17px; }
}


@media only screen and (max-width: 500px) {
    .scoreHeader{ margin-top: 20px; font-size:44px; }
    .scoreTxt{ font-size:18px; margin-bottom:45px; }
    .scoreCountHeader{ font-size:37px; }
    .scoreCount{ font-size:85px; }
    .scoreBtn{ font-size:17px; padding:13px 12px; width:100%; margin-left:0%; margin-bottom:25px; }
    .scoreBtnFlex{ margin-top:60px; flex-direction:column-reverse; }

    #healthBar{ width:140px; }
    #time{ left:170px; }

    #score{ font-size:30px; background-size:20px; padding:7px 30px 5px 0; top:0px; }

    .scoreOneMoreBottom{ margin-top:40px; }

    .inputContainer{ margin-bottom:25px; }

    .score-header{ font-size:30px; margin-top:35px; }
    .score-name{ font-size:16px; }
    .score-points{ font-size:19px; }
    .score-row{ padding-bottom:8px; }
    .score-header2 { margin-top: 55px; font-size: 26px;}

}


@media only screen and (max-width: 400px) {
    .scoreHeader{ margin-top: 10px; font-size:38px; }
    .scoreTxt{ font-size:17px; margin-bottom:40px; }
    .scoreCountHeader{ font-size:30px; margin-bottom:5px; }
    .scoreCount{ font-size:70px; }
    .scoreBtnFlex{ margin-top:50px; flex-direction:column-reverse; }
}