/* TOO SMALL */
@media only screen 
  and (min-width: 10px) 
  and (max-width: 550px) 
 {
 
	#indicator{ background-color: red;}
	
	
 }


/* SMALL */
@media only screen 
  and (min-width: 550px) 
  and (max-width: 800px) 
 {
 
	#indicator{ background-color: orange;}
	
	
 }


/* MEDIUM */
@media only screen 
  and (min-width: 800px) 
  and (max-width: 900px) 
 {
 
	#indicator{ background-color: green;}
	
	
 }


/* LARGE */
@media only screen 
  and (min-width: 900px) 
  and (max-width: 1500px) 
 {
 
	#indicator{ background-color: blue;}
 	
 }


/* X-LARGE */
@media only screen 
  and (min-width: 1500px) 
  and (max-width: 5800px) 
 {
 
	#indicator{ background-color: purple;}
	
	
 }



/* busiess */
@media only screen 
  and (max-height: 740px) 
 {
 
	#indicator{ background-color: black;}
	
	#cards{
		margin-bottom: 18vmin;
		margin-top: 18vmin;
		width: 516px;
	}
	.card {
		min-height: unset;
		min-width: unset;
		max-height: 110px;
		height: 110px;
		max-width: 110px;
		width: 110px;
	}
	#splash-image-1, #splash-image-2{
		background-size: auto 140%;
		background-position: 50% 65%;
	}
 }

#highscores-modal {
  background-color: rgba(255,255,255,0.9);
  mix-blend-mode: screen;
  padding: 30px;
  text-align: center;
  font-family: 'regular';
  letter-spacing: -0.02em;
  border-color: rgba(0, 0, 0, 0.3);
  border-style: double;
  border-width: 3px;
}

/* busiess */
@media only screen 
  and (max-height: 600px) 
 {
 
	#indicator{ background-color: yellow;}
	
	#cards{
		margin-bottom: 20px;
		margin-top: 0px;
		width: 403px;
	}
	.card {
		min-height: unset;
		min-width: unset;
		max-height: 80px;
		height: 80px;
		max-width: 80px;
		width: 80px;
	}
	#splash-image-1, #splash-image-2{
		background-size: auto 170%;
		background-position: 50% 60%;
	}
	
 }



/* busiess */
@media only screen 
  and (max-height: 480px) 
 {
 
	#indicator{ background-color: teal;}
	#scoreboard-row{
		display: none;
	}
	#cards{
		margin-bottom: 20px;
		margin-top: 0px;
		width: 330px;
	}
	.card {
		min-height: unset;
		min-width: unset;
		max-height: 60px;
		height: 60px;
		max-width: 60px;
		width: 60px;
	}
	#splash-image-1, #splash-image-2{
		background-size: auto 170%;
		background-position: 50% 60%;
	}
	#scoreboard-titletext{
		font-size: 18px;
	}
	#scoreboard-title {
		margin: none;
		height: unset;
		
	}
 }






 #indicator { display: none; }/**/