/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

@import "../assets/fonts/Fira_Code/fira_code.css";

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	background-color: white transparent;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	padding-left: 1.5em;
	font-size: 1vw; /* Mantido para telas maiores */
	quotes: none;
	color: #aaa;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* end of reset */



body {
	font: normal normal 400;
	font-size: 1.5vw;
	font-family: 'Fira Code';
	margin-top: 1em;
	margin-left: 1em;
}

p {
	position: relative;
	margin-bottom: 0.7em;
	margin-right: 0;
	width: 90%;
	text-align: justify;
}

code {
	font: normal normal;
	font-size: 90%;
	font-family: Monaco,Menlo,monospace,sans-serif;
	color: #aaa;
}

p code {
	position: absolute;
	text-align: right;
	right: 0%;
}


ul {
	position: relative;
	width: 90%;
	margin-bottom: 1.5em;
	text-align: justify;
}

/*uncomment to get dashes in the list*/
/*li:before {
	content: "-";
	position: relative;
	left: -0.25em;
}*/

li {
	/*second line indent*/
	padding-left: 1.25em;
	/*color: #777;*/
}

li ul {
	position: relative;
	left: 0;
	width: 100%;
	margin-top: 0.25em;
}

h1,h2,h3,h4 {
	font-family: 'Fira Code';
	width: 80%;
}

h1 {
	margin-top: 10px;
	font-weight: bold;
	font-size: 3vw;
	text-align: left;
	line-height: 1em;
	position: relative;
}

h1+p {
	/*subtitle*/
	font-style: italic;
	font-size: 110%;
}

h2 {
	font-size: 1.1em;
	/*color: #50cacd;*/
	margin-top: 3em;
	margin-bottom: 0.8em;
	position: relative;
	text-align: left;
	width: 100%;
}

h3 {
	font-size: 1em;
	line-height: 2em;
	position: relative;
	top: 1.7em;
	text-align: right;
	width: 20%;
}

a {
	color: inherit;
	text-decoration:none
}

a:hover {
	color:#39f
}

#webaddress {
	margin-top: 1em;
	position: relative;
	left: 25%;
	color: #bc412b;
	font-family: 'Fira Code';
	font-size: 100%;
}

#webaddress a {
	text-decoration: none;
}

em {
	font-weight: bold;
}

strong {

	font-weight: normal;
}

#address {
	display: none;
}

/* Estilos para o layout de duas colunas em telas maiores (desktop) */
.left,.right {
	top: 0;
	bottom: 0;
	display: inline-block;
	vertical-align: top; /* Garante alinhamento superior */
	overflow-x: hidden;
}

.left {
	padding-top: 20px;
	bottom: 10px;
	left: 0;
	width: 30%;
	font-size: 1.1vw;
}

.left > *:not(.header) {
	width: 88%;
	margin-left: 1vw;
}

.left .header > * {
	width: 100%;
	text-align: center;
}

.left h4 {
	font-weight: bold;
}

p,h3,ul,.reach_me{
	left: 10px;
}

.right {
	padding-top: 20px;
	right: 0;
	width: 65%;
	border-width: 2px;
	border-left-style: solid;
	margin: 0;
	margin-bottom: 20px;
	padding-left: 2%;
	top: 6vw;
}

.lang img {
	display: inline;
	width: 3vw;
	margin: 4vw 0.5vw 0 0.5vw;
}

#photo {
	display: inline;
	border: 0.5vw;
	border-radius: 50%;	
	border-color: white;
	border-style: solid;
	width: 15vw;
}

.reach_me {
	margin: 2vh 0 2vh 0;
	position: relative;
	font-weight: normal;
}

.reach_me > * {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
}

.reach_me i {
	font-size: 1.3em;
	margin: 0 10px 0 0;
}

.reach_me a{
	text-decoration: none;
}

h2:before {
	content: "~ ";
	color: #80c990;
}

.right h1{
	color: #000;
	left: 0;
}

/* --- Media Queries para responsividade --- */

/* Para telas de TABLET (entre 769px e 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    body {
        font-size: 18px; /* Ajusta o tamanho da fonte base para tablets */
        margin-left: 1.5em;
        margin-right: 1.5em;
    }

    /* Mantém o layout de duas colunas, mas ajusta larguras */
    .left {
        width: 35%; /* Aumenta um pouco a coluna esquerda */
        font-size: 1.2em; /* Ajusta o tamanho da fonte na coluna esquerda */
        padding-top: 15px;
    }

    .left > *:not(.header) {
        width: 90%; /* Ajusta a largura interna */
        margin-left: 0.5em; /* Pequena margem para o conteúdo */
    }

    #photo {
        width: 18vw; /* Ajusta o tamanho da foto para tablets */
        border: 0.3vw;
    }

    .lang img {
        width: 3.5vw; /* Ajusta as imagens de linguagem */
        margin: 3vw 0.4vw 0 0.4vw;
    }

    .right {
        width: 60%; /* Ajusta a coluna direita */
        padding-left: 2.5%;
        padding-top: 15px;
        top: 3vw; /* Reduz o deslocamento vertical para tablets */
    }

    h1 {
        font-size: 2.5em; /* Ajusta o tamanho do h1 */
    }

    h1 + p {
        font-size: 105%; /* Ajusta o subtítulo */
    }

    h2 {
        font-size: 1.em; /* Ajusta o tamanho do h2 */
        margin-top: 2em;
        margin-bottom: 0.6em;
    }

    h3 {
        font-size: 0.9em;
        top: 1em;
    }

    blockquote {
        font-size: 1em; /* Ajusta o tamanho da fonte para blockquote */
    }

    .reach_me i {
        font-size: 2em; /* Ajusta o tamanho do ícone de contato */
		display: flex;
    }

    #webaddress {
        left: 15%; /* Ajusta o posicionamento do endereço web */
    }
}


/* Para telas menores que 768px (tablets e celulares) */
@media (max-width: 768px) {
	body {
		font-size: 16px; /* Ajuste para um tamanho de fonte fixo em telas pequenas */
		margin: 0.5em; /* Margens menores */
	}

	h1 {
		font-size: 2em; /* Tamanho de fonte fixo para h1 em telas menores */
		text-align: center; /* Centraliza o título principal */
		width: 100%;
	}

	h1 + p {
		font-size: 1em; /* Ajuste do subtítulo */
		text-align: center;
		width: 100%;
	}

	h2 {
		font-size: 1.2em;
		margin-top: 1.5em; /* Margem menor para h2 */
		margin-bottom: 0.5em;
		text-align: left;
		width: 100%;
	}

	h3 {
		font-size: 0.9em;
		top: 0.5em; /* Ajuste da posição de h3 */
		width: 100%;
		text-align: left; /* Alinha h3 à esquerda em telas pequenas */
	}

	blockquote {
		font-size: 1em; /* Tamanho de fonte fixo para blockquote */
	}

	/* Colunas empilhadas */
	.left, .right {
		display: block; /* Transforma em blocos para empilhar */
		width: 95%; /* Ocupa quase toda a largura */
		margin: 0 auto; /* Centraliza */
		padding: 0; /* Remove padding lateral */
		border: none; /* Remove borda entre as colunas */
		top: auto; /* Remove o deslocamento vertical */
		padding-bottom: 1em; /* Adiciona espaço entre as seções */
	}

	.right {
		border-top-style: solid; /* Adiciona uma borda superior para separar */
		border-width: 2px;
		border-color: #ccc; /* Cor da borda */
		padding-top: 1em; /* Espaço após a borda */
	}

	.left > *:not(.header) {
		width: 95%; /* Ajusta a largura do conteúdo da coluna esquerda */
		margin-left: 0; /* Remove margem esquerda */
		left: auto; /* Remove o deslocamento 'left' */
		text-align: center; /* Centraliza o conteúdo na coluna esquerda */
	}

	p, ul, .reach_me {
		width: 95%; /* Ajusta a largura para melhor leitura */
		margin-left: auto; /* Centraliza */
		margin-right: auto;
		left: auto; /* Remove o deslocamento 'left' */
		text-align: left; /* Mantém o texto justificado ou alinha à esquerda */
	}

	.left .header > * {
		width: 95%;
		margin: 0 auto;
	}

	#photo {
		width: 100px; /* Tamanho fixo para a foto */
		height: 100px;
		margin-bottom: 1em; /* Espaço abaixo da foto */
	}

	.lang img {
		width: 30px; /* Tamanho fixo para as imagens de linguagem */
		margin: 1em 0.5em 0 0.5em;
	}

	.reach_me {
		margin-top: 1.5em;
		text-align: center; /* Centraliza o conteúdo de contato */
	}
	.reach_me > * {
		justify-content: center; /* Centraliza ícones e texto dentro do flexbox */
	}

	.reach_me i {
		font-size: 1.5em; /* Ajuste do tamanho do ícone */
		display: flex;
	}

	#webaddress {
		left: auto; /* Remove o deslocamento 'left' */
		text-align: center; /* Centraliza o endereço web */
		margin-top: 0.5em;
	}

	p code {
		position: static; /* Remove o posicionamento absoluto */
		display: block; /* Transforma em bloco para ocupar a linha */
		text-align: left; /* Alinha à esquerda */
		margin-top: 0.5em; /* Espaço acima do código */
		width: 100%;
	}
}

/* Para telas muito grandes (desktops) */
@media (min-width: 1600px) {
	body {
		font-size: 18px; /* Aumenta o tamanho da fonte para telas grandes */
	}

	h1 {
		font-size: 4em;
	}

	blockquote {
		font-size: 1.2em;
	}

	#photo {
		width: 100px; /* Aumenta a foto */
		height: 100px;
	}
	.lang img {
		width: 50px; /* Aumenta as imagens de linguagem */
	}
}