/* Importação de fontes para usar no projeto */
@font-face {
	font-family: "mark-pro-bold";
	font-weight: normal;
	font-style: normal;
	font-display: swap;
	src: url("./fontes/mark-pro-bold.woff") format("woff");
}
@font-face {
	font-family: "mark-pro-regular";
	font-weight: normal;
	font-style: normal;
	font-display: swap;
	src: url("./fontes/mark-pro-regular.woff") format("woff");
}
/* Animações que existem nesse site */
@keyframes rodando {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
/* 
    Esse é um arquivo CSS para normalizar o seu site em todos os navegadores
    como se fosse uma configuração padrão 
    */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	text-decoration: none;
}
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: transparent;
	background-color: var(--cor-cinza-claro);
	scroll-behavior: smooth;
}
body {
	margin: 0;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	background-color: var(--cor-cinza-claro);
	scroll-behavior: smooth;
}
::selection {
	color: var(--cor-branco);
	background-color: var(--cor-preto);
}
a,
img,
svg,
button {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-khtml-user-select: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-text-size-adjust: none;
	-webkit-touch-callout: none;
	-o-user-select: none;
}
a {
	background-color: transparent;
	cursor: pointer;
	color: var(--cor-principal);
}
img {
	border-style: none;
}
button {
	font-family: inherit;
	line-height: 1;
	margin: 0;
	-moz-appearance: none !important;
	-webkit-appearance: button;
	text-transform: none;
	overflow: visible;
	cursor: pointer;
}
button * {
	pointer-events: none;
}
input {
	font-family: inherit;
	line-height: 1;
	-moz-appearance: none !important;
	overflow: visible;
}
textarea {
	font-family: inherit;
	line-height: 1;
	-moz-appearance: none !important;
	overflow: auto;
}
[type="button"] {
	-webkit-appearance: button;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner {
	border-style: none;
}
[hidden] {
	display: none;
	opacity: 0;
	visibility: hidden;
}
/* Personaliza a cor do scroll da página */
html {
	scrollbar-color: var(--cor-cinza-claro) var(--cor-branco);
	scrollbar-width: thin;
}
::-webkit-scrollbar-track {
	background-color: var(--cor-cinza-claro);
	width: 6px;
	height: 6px;
}
::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}
::-webkit-scrollbar-thumb {
	background-color: var(--cor-branco);
	width: 6px;
	height: 6px;
	border-radius: 10px;
}
/* Essas são as variáveis para usar no site e ficar mais escalável a edição das coisas */
:root {
	/* Variáveis de Cores */
	--cor-branco: #ffffff;
	--cor-preto: #000000;
	--cor-principal: #0095ff;
	--cor-cinza-claro: #e3e4ed;

	/* Variáveis de Fontes */
	--regular: "mark-pro-regular";
	--bold: "mark-pro-bold";
}
/* <section class="apresentacao"> */
section.apresentacao {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	width: 100%;
	padding: 20px;
	position: relative;
	overflow: hidden;
}
/* <div class="conteudo"> */
section.apresentacao .conteudo {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 100vh;
	background: linear-gradient(0deg, var(--cor-branco), var(--cor-cinza-claro));
	background: -webkit-linear-gradient(
		0deg,
		var(--cor-branco),
		var(--cor-cinza-claro)
	);
	border-radius: 10px;
	padding: 60px 20px;
	position: relative;
	overflow: hidden;
	z-index: 2;
}
/* <div class="blush"> */
section.apresentacao .conteudo .blush {
	width: 1000px;
	height: 1000px;
	background: radial-gradient(var(--cor-principal) 0%, transparent 50%);
	background: -webkit-radial-gradient(var(--cor-principal) 0%, transparent 50%);
	opacity: 0.3;
	border-radius: 50%;
	position: absolute;
	top: -500px;
	z-index: 3;
	animation: piscandoblush 2s linear infinite;
}

footer {
	padding-top: 50px;
	text-align: center;
	font-family: var(--regular);
	font-size: 0.9rem;
}

/* Animação que faz a linha girar */
@keyframes piscandoblush {
	0% {
		opacity: 0.3;
	}
	50% {
		opacity: 0.1;
	}
	100% {
		opacity: 0.3;
	}
}
/* <div class="foto"> */
section.apresentacao .conteudo .foto {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 4;
}
/* <div class="linha"> */
section.apresentacao .conteudo .foto .linha {
	width: 170px;
	height: 170px;
	border: 2px solid var(--cor-principal);
	border-top: 2px solid transparent;
	border-bottom: 2px solid transparent;
	position: absolute;
	border-radius: 50%;
	animation: rodandolinha 20s linear infinite;
}
/* Animação que faz a linha girar */
@keyframes rodandolinha {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
/* imagem da <div class="foto"> */
section.apresentacao .conteudo .foto img {
	width: 130px;
	max-width: 170px;
	border-radius: 50%;
}
/* <div class="informacao"> */
section.apresentacao .conteudo .informacao {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	width: 100%;
	max-width: 400px;
	z-index: 4;
	margin: 60px 0 10px 0;
}
section.apresentacao .conteudo .informacao h2 {
	font-family: var(--bold);
	font-size: 1.2rem;
	color: var(--cor-principal);
}
section.apresentacao .conteudo .informacao p {
	font-family: var(--regular);
	font-size: 0.8rem;
	color: var(--cor-preto);
	line-height: 1.5;
	margin: 5px 0 0 0;
}
/* <div class="links"> */
section.apresentacao .conteudo .links {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 400px;
	z-index: 4;
}
/* Link da <div class="links"> */
section.apresentacao .conteudo .links a {
	display: flex;
	align-items: center;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.05);
	border-radius: 10px;
	margin: 10px 0 0 0;
	transition: all 0.3s;
}
section.apresentacao .conteudo .links a:hover {
	background-color: rgba(0, 0, 0, 0.1);
}
section.apresentacao .conteudo .links a:hover .icone img {
	transform: scale(1.2);
}
section.apresentacao .conteudo .links a .icone {
	padding: 15px;
	height: 100%;
	background-color: var(--cor-principal);
	border-radius: 10px 0 0 10px;
	width: 60px;
}
section.apresentacao .conteudo .links a .icone img {
	width: 100%;
	max-width: 35px;
	transition: all 0.3s;
}
section.apresentacao .conteudo .links a .texto {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 20px;
}
section.apresentacao .conteudo .links a .texto h3 {
	font-family: var(--bold);
	font-size: 1rem;
	color: var(--cor-preto);
}
section.apresentacao .conteudo .links a .texto p {
	font-family: var(--regular);
	font-size: 0.8rem;
	color: var(--cor-preto);
	opacity: 0.5;
	margin: 5px 0 0 0;
}
/* Link destacado da <div class="links"> */
section.apresentacao .conteudo .links a.destaque {
	padding: 0;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
section.apresentacao .conteudo .links a.destaque .texto {
	padding: 20px;
	align-items: center;
	text-align: center;
}
section.apresentacao .conteudo .links a.destaque:hover h4 {
	background-color: var(--cor-branco);
	color: var(--cor-principal);
}
section.apresentacao .conteudo .links a.destaque h4 {
	font-family: var(--bold);
	font-size: 0.8rem;
	color: var(--cor-branco);
	letter-spacing: 10px;
	background-color: var(--cor-principal);
	width: 100%;
	padding: 10px;
	border-radius: 10px 10px 0 0;
	transition: all 0.3s;
}
/* Responsivo */
@media screen and (max-width: 1000px) {
	/* <section class="apresentacao"> */
	section.apresentacao {
		padding: 10px;
	}
	/* <div class="conteudo"> */
	section.apresentacao .conteudo {
		padding: 50px 20px;
	}
	/* <div class="linha"> */
	section.apresentacao .conteudo .foto .linha {
		width: 170px;
		height: 170px;
	}
	/* imagem da <div class="foto"> */
	section.apresentacao .conteudo .foto img {
		max-width: 150px;
	}
	/* Link da <div class="links"> */
	section.apresentacao .conteudo .links a .icone img {
		max-width: 30px;
	}
	section.apresentacao .conteudo .links a .texto {
		padding: 15px;
	}
}