@charset "UTF-8";

@font-face {
  font-family: NexaBold;
  src: url( ./fonts/NexaBold.otf) format( "opentype" );
}

@font-face {
  font-family: NexaLight;
  src: url( ./fonts/NexaLight.otf) format( "opentype" );
}

html {
  font-size:24px;
}

* {
	/* font-family: Arial, Helvetica, sans-serif; */
	font-family: NexaLight, Arial, sans-serif;

	/* font-size: larger; */
	font-size : clamp(1rem, 9vw, 10rem);

	font-weight: normal;
	margin: 0;
	padding: 0;
	color: #2b2b2b;
	/* line-height: 1.6em; */
}


:root {
/* Text color  */
  --main-txt-color: rgba(85, 175, 85, 0.90);

/* Background color  */
  --main-bg-color: rgb(115 173 33 / 43%);

/* Border color  */
  /* --main-border-color: rgba( 5, 185, 5, 0.85); */
  --main-border-color: rgb(115 173 33 / 23%);

/* Font-family  */
  --main-font-family: NexaLight, Arial, sans-serif;
}

.rowLinkLogo {
	border-radius: 10px;
	/* border: 0.05em solid var( --main-border-color ); */
	width: 60%;
	/* height: 3ch; */
	/* padding-left: 1ch; */
	/* font-size: 1em; */
	/* font-style: italic; */
	position: relative;
	left: 20%;

	margin-top: 1em;
	margin-bottom: 1em;

	text-align: center;
	padding-bottom: 1em;
	padding-top: 1em;
}

.rowLink {
	border-radius: 10px;
	border-color: var( --main-border-color );
	border-style: solid;

	width: 60%;
	/* height: 3ch; */
	/* padding-left: 1ch; */
	/* font-size: 1em; */
	/* font-style: italic; */
	position: relative;
	left: 20%;

	display: flex;
	justify-content: center;
	align-items: center;

	margin-top: 1em;
	margin-bottom: 1em;

	text-align: center;
	padding-bottom: 1em;
	padding-top: 1em;
	background-color: var( --main-bg-color );
}

.rowLink:hover {
	background-color: white;
	color: #666666;
}

.iconLogo{
	width: 56px;
	/* height: 56px; */
}


/* ----- Dependendo da resolução da tela, altera o tamanho da fonte. ----- */

@media not all and (pointer), (pointer) {
	p { 
		color: rgb(200,200,200);
	}
}

@media only screen and (min-width: 861px) {
 	* {
		font-size: 0.9em;
		/* font-style: italic; */
	}

	.rowLink{
		width: 68%;
		left: 16%;
	}
}

@media only screen and (min-width: 769px) and (max-width: 860px) {
 	* {
		font-size: 1.0em;
	}

	.rowLink{
		border-radius: 0px;
		width: 100%;
		left: 0%;
		color: orange;
	}
}

@media only screen and (min-width: 321px) and (max-width: 768px) {
 	* {
		font-size: 1.01em;
	}

	.rowLink{
		border-radius: 0px;
		width: 100%;
		left: 0%;
		color: red;
	}
}

@media only screen and (max-width: 320px) {
	* {
		font-size: 1.02em;
	}

	.rowLink{
		border-radius: 0px;
		width: 100%;
		left: 0%;
		color: blue;
	}
}