@charset "utf-8";
/* CSS Document */

body{
		margin: 0;
		font-family: 'Roboto', sans-serif;
	}
	#container, 
	#gameTitle
	{
		display: flex;
  		justify-content: center;
	}
	#container{
		width: 100vw;
		height: 100vh;
		/*background-color: aquamarine;*/
		background-image: url(../imgs/background7.png);
		background-repeat: repeat-x;
		
		
	}
	#gameWrapper{
		display: block;
		width: 100vw;
		height: 100vh;
		/*background-color:green;*/
		/*background-image: url(../imgs/Frame.png), url(../imgs/Frame-2.png);*/
		/*background-repeat: no-repeat;*/
  		/*background-attachment: fixed;*/
  		/*background-position: top left, top right; */
		/*background-size: 20%;*/
	}
	#gameTitle, 
	#gameControls
	{
		width: calc(100vw - 20px);
		height: 60px;
		background-color: #BE1622;
		margin: 10px;
		align-items: center;
		border-radius: 10px;
		
	}
	#gameTitle h1{
		font-size: 16px;
		padding: 10px;
		color: white;
	}
	#gameControls{
		display: flex;
		justify-content: space-around;
		color: white;
		
	}
	#gameControls i, 
	#gameControls p {
		display: inline;
		
		
	}
	#gameControls p{
		color: white;
	}
	#gameControls i{
		font-size: 25px;
	}
	.btSolucoes{
		
		padding: 10px;
		text-decoration: none;
		background-color: honeydew;
		border: 1px solid;
		color: #4D673A;
		border-radius: 5px;
		margin-top: 15px;
		position: relative;
	}
	.forCenter{
		width: 100%;
	  	flex-direction: column;
	 	display: flex;
	 	justify-content: center;
	    align-items: center;
	}
	#gameAction{
		height: calc(100vh - 160px);
		width: calc(100vw - 20px);
		margin: 0px 10px 0px 10px;
		/*background-color: darkgreen;*/
		overflow: hidden;
		color: #4D673A;
	}
	#gameSectionWrapper{
		/*width: 400%;*/
		height: auto;
		display: inline-flex;
		position: relative;
	
	}
	.gameSec{
		width: 100%;
		height: 100%;
		/*background-color: darkorange;*/
		padding: 10px;
		
		
	}
	.gameSecSplit{
		min-height: 25vh;
	}
	.gameSecSplit p {
		line-height: 20px;
	}
	.disableClick{
		color: rgba(245, 240, 243, 0.14);
		pointer-events: none;
	}
	
	.countryTitleFlag{
		max-width: 30px;
		padding: 10px;
	}
	
	.respostaCerta i, .respostaCerta-2 i{
		color: green;
		display: none;
	}
	.respostaErrada i,
	.respostaErrada-2 i,
	.respostaErrada-3 i,
	.respostaErradaNext i,
	.respostaErradaPrev i{
		color: red;
		display: none;
	}
	

	/*general styles*/
	#gameTitle,
	.fa-solid,
	.respostaCerta,
	.respostaErrada,
	.respostaErradaNext,
	.respostaErradaPrev
	{
		cursor:pointer;
		user-select: none;
		-webkit-touch-callout: none; /* iOS Safari */
    	-webkit-user-select: none; /* Safari */
	}
	
	/*ui*/
	.space{
		display:inline-block;
		width: 30px;
		height: 10px;
		border: 1px solid black;
		border-radius: 5px;
		padding: 3px;
		margin: 0px 3px;
		position: relative;
		top: 3px;
		
	}
	.space2{
		display:inline-block;
		width: 100px;
		height: 10px;
		border: 1px solid black;
		border-radius: 5px;
		padding: 3px;
		margin: 0px 3px;
		position: relative;
		top: 3px;
		
	}
	.spaceX{
		display:inline-block;
		width: auto;
		height: auto;
		border: 1px solid black;
		border-radius: 5px;
		padding: 3px;
		margin: 3px;
		cursor: move;
	}
	.tg1, .tg2, .tg3, .tg4, .tg5, .tg6, .tg7, .tg8, .tg9, .tg10{
		display:none;
		text-decoration: underline;
	}
	.invisible{
		display: none;
	}
	/*dots navigation*/
	.dots {
     /* Center the content */
     	align-items: center;
        display: flex;
        justify-content: center;

      /* Reset styles */
        list-style-type: none;
        margin: 0;
        padding: 0;
     }

    .dots li {
     /* Rounded border */
		border-radius: 9999px;
		height: 15px;
		width: 15px;

		/* Active dot */
		/*background-color: rgba(0, 0, 0, 0.3);*/

		/* Inactive dot */
		/*background-color: transparent;*/
		border: 1px solid rgba(0, 0, 0, 0.8);

		/* OPTIONAL: Spacing between dots */
		margin: 0 10px;
	}
	.dotsActive, .dotsActive-2, .dotsActive-3{
		background-color:black;
	}

p{
	font-size: 14px;
		
}
p, h1, h2, h3, h4, h5{
	-webkit-user-select: none;  
	-moz-user-select: none;    
	-ms-user-select: none;      
	user-select: none;
	font-family: 'Roboto', sans-serif;
}