@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;600&display=swap');
:root {
	--bg-global: 229,229,229;
  --cor-global: 0,78,152;

  --SVG-AZUL: invert(22%) sepia(99%) saturate(7500%) hue-rotate(226deg) brightness(108%) contrast(101%);
  --SVG-VERDE: invert(17%) sepia(60%) saturate(4975%) hue-rotate(85deg) brightness(91%) contrast(102%);
  --SVG-VERMELHO: invert(27%) sepia(38%) saturate(5723%) hue-rotate(357deg) brightness(91%) contrast(99%);
}

body {
	font-family: 'Poppins',sans-serif;
	background-color: rgba(var(--bg-global),1.0);
}

/*---CONTAINER---*/
/*-----------------------------------------------------------*/
.container-wrapper {
	display: grid;
	margin-bottom: 2em;
	height: 100%;
}

/*---NAVBAR---*/
/*-----------------------------------------------------------*/
.grid-nav {
	grid-area: nav;
}

#ico-logo {
	margin: 1em;
	width: 4em;
	height: 4em;
	border-radius: 50%;
	padding: 0.25em;
}
#ico-dark, 
#ico-light,
#ico-config {
	margin: 1em;
	width: 2em;
}


/*---MODAL CONFIG---*/
/*-----------------------------------------------------------*/
.circulo {
	padding: 0.5em;
	width: 3.5em;

}
.svg-azul {
	filter: var(--SVG-AZUL);
}
.svg-vermelho {
	filter: var(--SVG-VERMELHO);
}
.svg-verde {
	filter: var(--SVG-VERDE);
}

.modal {
	position: absolute;
	top: 20px;
	right: 60px;
	width: 250px;
	height: 250px;
	z-index: 2;
	border-radius: 25px;
	background-color: rgba(var(--bg-global),1.0);
	border: 3px solid rgba(var(--cor-global),1.0);
	display: flex;

}

.modal-ln1 {
	display: flex;
	align-items: center;
	justify-content: center;
}
.modal-ln2 {
	display: flex;
	align-items: center;
	justify-content: center;
}
.modal-ln3 {
	display: flex;
	align-items: center;
	justify-content: center;	
}

.modal-ln2 p {
	color: rgba(var(--cor-global),1.0);
	font-weight: bold;
	letter-spacing: 3px;
}

/*---- ANIMACAO DO LOGO, PORQUE NAO? ----------*/
.gira:hover {
	animation: girando 1.5s linear infinite;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}
@keyframes girando {
	0% {
		transform: rotate(0);
	}
	100% {
		transform: rotate(360deg);
	}
}
/*---ARTICLE---*/
/*-----------------------------------------------------------*/
.grid-article {
	grid-area: article;
	
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 70px;
}
.input-article {
	grid-column: 1/-1;
	text-align: center;
}
.input-article textarea, .input-aside textarea {
	margin: 1em;
	padding: 1em;
	width: 70%;
	min-height: 500px;
	height: auto;
	resize: none;
	background-color: transparent;
	border: none;
	outline: none;
	text-transform: lowercase;
	overflow: hidden;
	color: rgba(var(--cor-global),1.0);
	font-weight: bold;
	font-size: 22px;
}

/*---ASIDE---*/
/*-----------------------------------------------------------*/
.grid-aside {
	grid-area: aside;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr 70px;
	background-color: rgba(var(--cor-global),0.3);
	text-align: center;
	box-shadow: 0px 24px 32px -8px #00000014;
  border-radius: 10px;
	margin: 0 2em;
	max-width: 450px;
	transition: 0.25s box-shadow;
	position: relative;
}
.input-aside {
	grid-row: 1/2;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
/*--------------------------------------*/
.aside-imagem-container {
	position: absolute;
	display: flex;
	flex-direction: column;
	color: rgba(var(--cor-global),1.0);
	text-align: center;
	top:  25px;


}
.aside-imagem-container  h5 {
	padding: 0.75em;
	font-size: min(2vw, 28px);
	font-weight: bold;
	letter-spacing: 2px;
}
.aside-imagem-container  p {
	font-size: min(1.25vw, 24px);

}
.asside-imagem {
	margin:	auto;
	width: min(33vw, 450px);
}
/*--------------------------------------*/
.grid-aside:hover {
	box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}
/*--BOTOES---*/
.div-botoes {
	display: flex;
	justify-content: center;
	align-items: center;
	text-transform: uppercase;
}
.btn {
	font-family: "Poppins",sans-serif;
	border-radius: 25px;
	padding: .75em;
	transition: 0.25s transform;
	transition: 0.25s box-shadow;
}
.btn:hover {
	/*transform: scale(1.1);*/
	box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}
.btn-1 {
	background-color: rgba(var(--cor-global),1.0);
	border:  2px solid rgba(var(--cor-global),1.0);
	color: #f2f2f2;
}
.btn-2 {
	background-color: rgba(var(--cor-global),0.1);
	border:  2px solid rgba(var(--cor-global),1.0);
	color: rgba(var(--cor-global),1.0);
}
.btn-3 {
	background-color: rgba(var(--cor-global),0.1);
	border:  2px solid rgba(var(--cor-global),1.0);
	color: rgba(var(--cor-global),1.0);
}



/*MEDIA QUERIES*/
/*----------------------------------------------------------------------*/
/* DESKTOP  */
@media only screen and (min-width: 769px) {
  .container-wrapper {
    grid-template-columns: 0.75fr 0.75fr 1fr;
    grid-template-rows: 6em 1fr 1fr;
    grid-template-areas:
    "nav     nav     nav"
		"article article aside"
		"article article aside"
  }
  .btn {
  	width: min(30vw, 200px);
  }
  .div-btn-1 {
  	justify-content: flex-end;
  	margin: 1em;
  }
  .div-btn-2 {
  	justify-content: flex-start;
  	margin: 1em;
  }

}

/* TABLET */
@media only screen and (min-width: 481px) and (max-width:768px) {
  .container-wrapper {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 6em 2fr 1fr;
    grid-template-areas:
    "nav     nav "
		"article aside"
		"article aside"
  }
  .grid-article {
  		margin-left: 10px;
  }
  .grid-article .input-article textarea, .grid-aside, .input-aside textarea {
  	margin: 0 10px; 
  	font-size: 18px;
  }
  .aside-imagem-container h5 {
  	margin: 0 15px;
  	font-size: 20px;
  }
  .aside-imagem-container p {
  	font-size: 16px;
  }
  .btn {
  	width: 125px;
  	/*margin: 0.5em;*/
  }

  .asside-imagem {
		margin:	auto;
		width: 45vw;
		/*width: min(45vw, 500px);*/
	}
}

/* CELPHONE */
@media only screen and (max-width: 480px) {
	  .container-wrapper {
	    grid-template-columns: 1fr;
	    grid-template-rows: 6em 1fr 1fr;
	    grid-template-areas:
	    "nav"
			"article"
			"aside";

			min-height: 100vh;


	  }
	  .grid-article {
			display: grid;
			grid-template-columns: 1fr;
			grid-template-rows: 1fr 70px 70px;
		}
		.input-article {
		grid-row: 1 / 2;
	 }

    .grid-aside {
    	margin-top: 50px;
    }
		.aside-imagem-container {
			text-align: center;
		}
		.aside-imagem-container  h5 {
			font-size: 1.5em;
		}
		.aside-imagem-container  p {
			font-size: 1.25em;
		}
		.asside-imagem {
			width: 100%;
		}
	  .asside-imagem {
	  	margin-top: 80px;
		/*width: min(45vw, 500px);*/
	}

/*--------------------------------------*/
		.input-article textarea, .input-aside textarea {
				min-height: 400px;
				font-size: 18px;
			}

			.aside-imagem-container {
				padding: 0px 15px;
			}

	  .btn {
	  	width: 300px;
	  	/*margin: 0.5em;*/
	  }

	  .btn-2 {
	  	margin-bottom: 20px;
	  } 
}