/*-------------------------*/


/*-------------------------*/

img {
	max-width: 100%;
	max-height: 100%;
	z-index: inherit;
}

span {
	--corTexto: initial;
	color: var(--corTexto);
}

.botao {
	--texto: #212529;
	--fundo: transparent;
	--borda: transparent;
	--bordaraio: .25rem;
	display: inline-block;
	font-weight: bold;
	color: var(--texto);
	text-align: center;
	vertical-align: middle;
	user-select: none;
	background-color: var(--fundo);
	border: 1px solid var(--borda);
	padding: .5rem 1rem;
	font-size: 1rem;
	line-height: 1.5;
	border-radius: var(--bordaraio);
	font-family: sans-serif;
	text-decoration: none;
	transition: all .1s;
	position: relative;
}

.botao:hover::after {
	content: "";
	border-radius: inherit;
	opacity: 0.275;
	background-color: #000;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}


.flex {
	display: flex;
}

/* coisas Flexbox */
ul.flex>li {
	display: inline-block;
	margin: 0 auto 0 auto;
}

.noselect {
	user-select: none;
}

/* Inibe o usuário de selecionar */
img.noselect, .noselect img {
	-webkit-user-drag: none;
	-khtml-user-drag: none;
	-moz-user-drag: none;
	-o-user-drag: none;
	user-drag: none;
}

/* Telas pequenas */

@media (max-width: 1200px) {
	html, body {
		padding: 0;
		margin: 0;
		min-height: 95%;
		width: 100%;
		background: rgba(0, 0, 0, 87.5);
		font-size: 100%;
		color: white;
		position: relative;
		overflow: visible;
	}

	body {
		height: 100%;
	}

	main {
		margin: 0 auto 0 auto;
		width: 100%;
		height: 100%;
	}

	main h1 {
		margin: 2rem auto 1rem;
		auto;
		text-align: center;
		max-width: max-content;
		font-size: 3.5rem;
		padding: 0.5rem;
		border-radius: 1.5rem;
		transition: box-shadow .5s;
	}

	main h1:hover {
		box-shadow: 0px 0px 5px 0px rgba(255, 255, 255, 1);
		cursor: pointer;
	}

	main nav {
		display: flex;
		width: 80%;
		height: 2.5rem;
		margin: 1rem auto calc(100vh - 8rem) auto;
	}

	main nav a {
		display: inline-block;
		margin: 0 auto 0 auto;
		font-family: sans-serif;
		color: white;
		text-decoration: none;
		font-size: 2rem;
		transition: font-size .5s;
	}

	main nav a:hover {
		font-size: 2.25rem;
		text-decoration: underline;
		text-decoration-color: #222;
	}

	div#seletor {
		display: none;
	}

	span.artigo {
		display: none;
	}


	main section {
		display: block;
		position: relative;
		margin: 0 auto 0 auto;
		padding: 0.5rem;
		max-width: 80%;
		background: transparent;
	}

	main section article.artigo {
		display: block;
		min-height: 50vh;
		position: relative;
		margin: 0 auto 0 auto;
	}

	main section article#principal {
		display: none;
	}

	main section article.artigo div.img-artigo {
		display: none;
	}

	main section article.artigo a.local {
		display: none;
	}

	main section article.artigo hr {
		height: 1px;
		margin: 0;
		border: none;
		border-bottom: solid 1px #222;
	}

	main section article.artigo p {
		text-align: justify;
		font-family: sans-serif;
		text-indent: 2rem;
	}

	main section article.artigo a {
		position: absolute;
		bottom: 5%;
		right: 0;
	}

	main section article.artigo a.botao {
		--fundo: #111;
		--borda: #444;
		--texto: white;
		--bordaraio: 1.75rem;
		float: right;
	}

	footer {
		display: block;
		height: 1rem;
		padding: 1rem 1rem 1rem 0;
		background: rgba(20, 20, 20, 0.5);
		text-align: right;
		font-family: sans-serif;
		font-weight: 500;
		color: rgb(40, 40, 40);
	}
}

/* Telas de celulares */

@media (max-device-width: 600px) {
	html, body {
		padding: 0;
		margin: 0;
		height: 95%;
		width: 100%;
		background: rgba(0, 0, 0, 87.5);
		font-size: 100%;
		color: white;
		overflow: hidden;
	}

	body {
		height: 105%;
	}

	main {
		margin: 0 auto 0 auto;
		width: 100%;
		height: 100%;
	}

	main h1 {
		margin: 2rem auto 1rem;
		auto;
		text-align: center;
		max-width: 18rem;
		font-size: 2.5rem;
		padding: 0.5rem;
		border-radius: 1.5rem;
	}

	main h1:hover {
		box-shadow: 0px 0px 5px 0px rgba(255, 255, 255, 1);
	}

	main nav {
		display: none;
	}

	main div#seletor {
		width: 95%;
		height: 40%;
		display: flex;
		margin: 0 auto 0 auto;
	}

	main div#seletor div.dropcontainer {
		display: inline-block;
		width: 75px;
		height: 75px;
		padding: 0;
		margin: 0 auto 0 auto;
		border-radius: 100%;
	}

	main div#seletor div.drop {
		margin: 0;
		padding: 0;
		border-radius: 100%;
		width: 70px;
		height: 70px;
		border: solid 2px #333;
		opacity: 0;
		transition: opacity 0.2s;
	}

	main div#seletor div#drag {
		--center: calc(50% - 35px);
		display: block;
		border-radius: 100%;
		position: absolute;
		left: var(--center);
		bottom: 35px;
		width: 70px;
		height: 70px;
		background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(34, 34, 34, 1) 100%);
		border: solid 2px #333;
		margin: 0;
		padding: 0;
	}

	span.artigo {
		display: block;
		opacity: 1;
		position: absolute;
		bottom: 10px;
		left: 0;
		text-align: center;
		width: 100%;
	}


	main section {
		display: block;
		position: relative;
		margin: 0 auto 0 auto;
		padding: 0.5rem;
		height: 45%;
		max-width: 80%;
		background: transparent;
	}

	main section article.artigo {
		display: none;
		opacity: 0;
		margin: 0 auto 0 auto;
	}

	main section article#principal {
		display: none;
	}

	main section article.artigo a.local {
		display: none;
	}

	main section article.artigo div.img-artigo {
		display: none;
	}

	main section article.artigo hr {
		height: 1px;
		margin: 0;
		border: none;
		border-bottom: solid 1px #222;
	}

	main section article.artigo p {
		text-align: justify;
		font-family: sans-serif;
		text-indent: 2rem;
	}

	main section article.artigo a.botao {
		--fundo: #111;
		--borda: #444;
		--texto: white;
		position: absolute;
		bottom: 25%;
		right: 0;
	}

	footer {
		display: none;
	}
}

/* Telas grandes */

@media (min-width: 1201px) {
	html, body {
		padding: 0;
		margin: 0;
		min-height: 100%;
		width: 100%;
		background: linear-gradient(#191a1d, #18191c);
		font-size: 100%;
		color: white;
		box-sizing: border-box;
		transition: all 0.5s;
	}

	body {
		background: transparent;
	}

	main {
		margin: 0 auto 0 auto;
		width: 100%;
		min-height: 100%;
	}

	main header {
		height: 4rem;
		padding-top: 1rem;
		width: 100%;
		position: relative;
	}

	main header h1 {
		display: inline-block;
		font-family: monospace;
		margin: 0rem 3rem 2rem 3rem;
		min-width: 35rem;
		font-size: 6rem;
		font-weight: 900;
		cursor: pointer;
		z-index: 2;
	}

	main header nav {
		display: inline-block;
		float: right;
		height: 4rem;
		padding-left: 1.25rem;
		border-bottom: solid 2px #777;
	}

	main header nav a {
		display: inline-block;
		text-align: left;
		height: 2rem;
		margin: .5rem 1rem 0 0;
		border-right: solid 1px #222;
		font-size: 1.75rem;
		font-family: monospace;
		text-transform: uppercase;
		text-decoration: none;
		color: #888;
		border-radius: 2rem;
		transition: all .25s;
	}

	main header nav a:hover {
		color: #ddd;
		transform: scale(1.075);
	}

	main section {
		margin-top: 10rem;
	}

	main section article {
		min-height: 100vh;
		width: 60%;
		padding-left: 20%;
		padding-right: 20%;
		background: linear-gradient(transparent 0% 80%, #121416 100%);
		position: relative;
	}

	main section article:first-child {
		min-height: calc(100vh - 15rem);
	}

	main section article#principal h1 {
		font-size: 9vw;
		text-align: center;
		margin: calc(50vh - 15rem) auto 0 auto;
		font-family: sans-serif;
		user-select: none;
	}

	main section article#principal ul.flex>li {
		width: 15%;
		max-height: auto;
		position: relative;
	}

	main section article#principal ul#conhecimentos li {
		transform: scale(0.75);
		transition: transform .375s;
	}

	main section article#principal ul#conhecimentos li:hover {
		transform: scale(1);
	}

	main section article#principal ul#conhecimentos li img {
		width: 100%;
	}

	main section article#principal ul#conhecimentos li::before {
		content: attr(titulo);
		position: absolute;
		left: 0;
		right: 0;
		bottom: -2rem;
		font-family: monospace;
		font-weight: bolder;
		font-size: 2rem;
		text-align: center;
		transition: all 0.2s;
		transform: translateY(-1rem) scale(0.75);
		opacity: 0;
	}

	main section article#principal ul#conhecimentos li:hover::before {
		transform: initial;
		opacity: 1;
	}

	main section article#principal ul#conhecimentos li::after {
		content: attr(subtitulo);
		position: absolute;
		left: -25%;
		right: 0;
		bottom: -60%;
		font-family: monospace;
		font-size: 1rem;
		text-align: center;
		transition: all 0.2s;
		transform: translateY(-1rem) scale(0.75);
		opacity: 0;
		width: 150%;
	}

	main section article#principal ul#conhecimentos li:hover::after {
		transform: initial;
		opacity: 1;
	}

	main section article h2 {
		font-size: 5vw;
		font-family: fantasy, monospace;
	}

	main section article p {
		font-family: sans-serif;
		text-align: justify;
		text-indent: 5vw;
		font-size: 2.5rem;
		margin-left: 10%;
	}

	main section article.artigotextual p {
		font-size: 2rem;
	}

	main section article.artigotextual ul {
		margin: 0 0 5% 25%;
		font-size: 1.5rem;
	}

	main section article.artigotextual ul li {
		margin-top: 0.25rem;
	}

	main section article hr {
		display: none;
	}

	main section article.artigo a.local {
		position: absolute;
		top: -4rem;
		left: 1rem;
		font-size: 3rem;
		font-family: monospace;
		text-decoration: none;
		color: rgba(60, 60, 60, 0.5);
		font-weight: bolder;
	}

	main section article .botao {
		--fundo: RoyalBlue;
		--borda: #444;
		--texto: white;
		--bordaraio: 1.75rem;
		float: right;
		font-size: 2rem;
	}

	main section article div.img-artigo {
		height: 50vh;
		position: absolute;
		left: 0;
		bottom: 0;
		z-index: -1;
	}

	main section article div.img-artigo .before {
		position: absolute;
		display: inline;
		width: 100%;
		height: 100%;
		background: linear-gradient(#191a1d 2%, transparent 20% 100%)
	}

	main section article div.img-artigo .after {
		position: absolute;
		left: 0;
		display: inline;
		width: 100%;
		height: 100%;
		background: linear-gradient(270deg, #191a1d 2%, transparent 20% 100%)
	}

	div#seletor {
		display: none;
	}

	body footer {
		display: block;
		padding: 1rem 20% 1rem 20%;
		text-align: right;
		background-color: #111315;
		color: #888;
		font-family: monospace;
		font-size: 1.25rem;
		text-shadow: #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px;
	}
}

/*-------------------------*/
/*  Scrollbar customizada  */

html {
	scroll-behavior: smooth
}

::-webkit-scrollbar {
	/* a barra */
	width: 10px;
	background: transparent;
	background-color: #191a1d;
}

::-webkit-scrollbar-button {
	/* as setas direcionais */
	opacity: 0;
	background: transparent;
}

::-webkit-scrollbar-thumb {
	/* o slider */
	width: 5px;
	background: #333;
	border-radius: 1rem;
	transition: all .2s;
}

:hover::-webkit-scrollbar-thumb {
	/* o slider "normalmente" */
	background: #222;
	border-radius: 1rem;
}

::-webkit-scrollbar-track {
	/* container do slider */
	background: rgba(15, 15, 15, 0.5);
	border-radius: 1rem;
}

::-webkit-scrollbar-track-piece {
	background: transparent;
}

::-webkit-scrollbar-track-corner {
	background: transparent;
}