@charset "UTF-8";

:root{
	--bright: #b96058;/*8c625a;/*82605a; */
	--neutral: #7d3e42;/*813a3e;/*6d534e;*/
	--darkbrw: #391f40;/*46333a;/*574049;423138;452f38;381840;*/
	--pale: #eca68d;/*b9a8a2;/*a9968f; /*ab9187; /*#8d7874;*/
	--yellow: #efd8a1;
	--orange: #ffa8a1;
	--shadow: 0 5px 5px #2e1f40cc;
	
	--gap: 24px;
	--headerboxheight: 100px;	
	--logosize: 90px;
	--mainwidth: 80%;
	--minmainwidth: 250px;	
	--mailfontsize: 0.9em;
	--aboutmelineheight: 1.5em;
	--aboutmereadablelines: 4;
}

@font-face{
		font-family: 'Pixel Slab';
		src: url('font/Pixel Slab.ttf');	
	}
@font-face{
		font-family: 'Sharp Pastries';
		src: url('font/Sharp Pastries.ttf');		
	}
@font-face{
		font-family: 'Pixel Touch';
		src: url('font/Pixel Touch.ttf');		
	}
@font-face{
		font-family: 'Soft Pastries';
		src: url('font/Soft Pastries.ttf');		
	}

   /* Custom scrollbar for Webkit browsers (Chrome, Safari, Edge) */
    ::-webkit-scrollbar {
      width: 4px; /* Width of the scrollbar */
    }

    ::-webkit-scrollbar-track {
      background: var(--bright); /* Background of the scrollbar track */
      border-radius: 6px; /* Rounded corners */
    }

    ::-webkit-scrollbar-thumb {
      background: var(--pale); /* Color of the scrollbar handle */
      border-radius: 6px; /* Rounded corners */
    }

    ::-webkit-scrollbar-thumb:hover {
      background: var(--darkbrw); /* Darker color on hover */
    }



/*formatação de página*/
* {
    margin: 0px;
    padding: 0px;
	box-sizing: border-box;
	image-rendering: pixelated;	
}

body {	
    background-color: var(--bright);
	font-family: Soft Pastries;
	color: var(--pale);		
} 


/*configuração do grid*/
.homepage {
	height:100vh;
}

.homepageGrid {	
	display: grid;	
	--borderleft: max(300px, 20%); /*defina o range de tamanho da coluna da esquerda aqui*/
	--borderright: max(200px, 15%); /*defina o range tamanho da coluna da esquerda aqui*/
	--remain: calc((100% - var(--borderleft) - var(--borderright)) - 2*var(--gap));
	grid-template-columns: var(--borderleft) var(--remain) var(--borderright);		
	column-gap: var(--gap);	/*var gap*/
}

/*barras laterais*/

.sideGrid{
	/*por enqt não tem utilidade, mas pode servir pra parâmetros em comum às duas colunas*/
	/*estarei usando no @media*/
}

.left {	
	padding: 16px 12px;	
	background-color: var(--darkbrw);	
	overflow: auto;	
}

.right {		
	padding: var(--gap); 
	padding-left:0;	
	
	display: flex;
	flex-direction: column;	
	align-items: center;
	justify-content: space-between;
	overflow: hidden;
}


/*menu da esquerda (ToS)*/
.tos {
	font-family: 'Soft Pastries';  /*trocar pra fonte tech qnd tiver*/
	font-size: 0.9em; 	
	line-height: 2em;
	
}

.tos p{	
	font-weight: normal;
	margin-bottom: 1em;	
}

.tos summary{
	font-weight: bold;
	margin-top: 0.4em; 
	margin-bottom: 1em;
}

.tos summary:hover {
	color: var(--yellow);
}


/*menu da direita (buttons and friends)*/
.ornament {
	width: 100%;
}

.sideMenu{	
	background-color: var(--neutral);
	height: calc(100% - 2*var(--gap));	
	width:100%;
	
	display:flex;
	flex-direction: column;
	align-items: center;		
}

.sMenuTitle{
	background-color: var(--bright);	
	width: calc(100% - 2*var(--gap));
	margin: calc(0.8*var(--gap));
	padding: 4px;
	text-align: center;
	color: var(--darkbrw);
}

.sideMenu > p {margin-bottom: 4px;}

.sMenubutton {	
	width: calc(100% - 2*var(--gap));
	max-width: 176px;
	transition: transform 0.3s;
	
	line-height: 0; /*remove o gap abaixo da imagem dentro link*/
}

.sMenubutton:hover {	
	transform: scale(1.02);
	box-shadow: var(--shadow);
}

.kofiimg {
	max-width: 192px;
}

.imgbtn{
	width:100%;	
}

.friends > .sMenubutton {
	width: 50%;
	max-width: 88px;
}

.friends{	
	width: 100%;
	display:flex;
	/* flex-direction: column; */
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	overflow: auto;
	/* gap: 6px;	 */
	padding: 1px var(--gap); /*padding 1px para evitar Overflow quando o botão aumenta no Hover*/
	margin-bottom: calc(0.6*var(--gap));
}

/*Center Grid--------------------------------------------------------------*/

.centerGrid{
	/*por enqt não tem utilidade, mas pode servir pra parâmetros relativo a coluna central*/
	/*estarei usando no @media*/
	/* width: var(--remain); */
	
}

/*Header*/
header {		
	margin-top: var(--gap); 
	text-align: center;	
	color: var(--yellow);	
	min-width: var(--minmainwidth);
}

.headerimg {
	height: var(--headerboxheight); /*box size*/	
	background-color: var(--neutral);
	border-radius: 6px 6px 0 0;
}

#ovelhartlogo {
	width: var(--logosize);
	border-radius: 50%; /*torna o container redondo*/
	border: calc(var(--logosize) / 23) solid var(--yellow);
	margin-top: calc(0.5*(var(--headerboxheight) - var(--logosize)));
}

.headerh1{	
	margin-bottom: 10px;
	line-height: 0.8em;
}

.headerh2 {
	background-color: var(--neutral);	
	padding: 8px;
	border-radius: 0 0 6px 6px;
}

/*Main*/

main {
	margin: auto;
	width: var(--mainwidth);
	min-width: var(--minmainwidth);
}

.aboutme {
    margin: calc(0.75*var(--gap)) auto;    
	padding: calc(var(--aboutmelineheight) * 0.33) 4%;
	width: 70%; 
	background-color: var(--neutral);  		
   	border-radius: 12px 0 12px 0;
    line-height: var(--aboutmelineheight);
}

.scrollable {
	/*torna 3 linhas de 1.5 em scrollaveis*/
	margin-top: 5px;
	overflow: auto; 
	height: calc(var(--aboutmelineheight) * var(--aboutmereadablelines));
}

.card{
	text-align: center;
	background: var(--neutral);
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: calc(0.5*var(--gap));
}

.cardButton {
	width: calc(100% - 4*var(--gap));
	background-color: var(--darkbrw);
	padding: 10px 12px 8px;
	margin-top: var(--gap);
	
	transition: all 0.3s;
	
	text-decoration: none;	
	color: var(--bright);	
	text-align: center; 

	display: flex;	
	flex-wrap: wrap; /*como definir o tamanho mínimo pra forçar o wrap?*/
	align-items: center;
	justify-content: center;
}

.cardButton:hover{
	background-color: #2e1f40;
	box-shadow: var(--shadow);
	transform: translateY(-4px) scaleX(1.01);	
}



.btnIcon {
	width: 48px;
	height: 48px;	
}

.btnText{	
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

/*Footer*/
footer {
	margin: auto;
	width: var(--mainwidth);
	min-width: var(--minmainwidth);
	
	text-align: center;
	background: var(--neutral);
	color: var(--pale);
	font-size: 1.1rem;
	/* padding-bottom: calc(0.5*var(--gap)); */
	padding-top: calc(0.5*var(--gap));
}

.mailme {
	color: var(--orange);
	text-decoration: none;
	font-family: 'Pixel Touch';
	font-size: var(--mailfontsize);	
	font-weight: normal;
	line-height: 3em;
}

.mailme:hover {
	color: var(--yellow);
	text-decoration: underline;
}

.mailicon {
	height: calc(var(--mailfontsize) - 0.1em);
}

/*Formatações de Texto geral*/
/*incluir apenas formatações de fonte*/
h1
{	
    font-size: 2rem; 
	font-family: 'Pixel Slab';  	
    font-variant: small-caps; 
	font-weight: normal;	
}

h2
{	
    font-size: 0.65rem; 
	font-family: 'Sharp Pastries';  
	font-weight: normal;	
}

h3{
	font-size: 1.1rem;
	font-family: 'Pixel Slab';
	font-weight: normal;	
}



/*------color pickers----------*/
.colorpickers{
	position: fixed;
	bottom: 4px;
	right: var(--gap);
	display: flex;
	gap: 4px;
}

.colorslot{
	cursor: pointer;
	border: 1px solid white;	
	block-size: 12px;
	inline-size: 16px;
}

@media (max-width: 1100px){

	.homepageGrid{	
		display: flex;	
		flex-direction: column;
		justify-content: center;
		align-items: center;			
		height: 100%;
		gap: 0;		
	}
	
	:root { --mainwidth: 100%; }
	.centerGrid	{ width: 100%; order: 1; margin-bottom: var(--gap);	}	
	/*minmainwidth +margin:auto aqui resolve o problema das Sidegrid não escalarem junto com a main e saírem do enquadro a partir de certo tamanho*/
	.sideGrid{ width: 100%;	order: 2; min-width: var(--minmainwidth); margin: auto;}
	.left{ max-height: 90vh; padding-left: var(--gap); } /*% da viewheight como espaço de leitura máxima permite ler quase em full screen, mas ter uma borda pra scrollar fora*/
	.right { padding: 0; }
	
	header { margin-top: 0; }
	.headerimg{ position: sticky; top:0; z-index: 10; border-radius: 0;}
	.headerh2 {border-radius: 0;}
	.aboutme { width: 90%;}
	.cardButton { flex-direction: row; flex-wrap: nowrap;}
	.ornament{ display: none; }
	.sMenubutton{ width: initial; }
	.friends { gap:8px; padding-bottom: var(--gap);}	
}	

@media (max-width: 300px){
	:root { --headerboxheight: 75px; }
	html{ font-size: 75%; }
	.btnIcon  { transform: scale(0.8); }	
	#ovelhartlogo  { transform: scale(0.6); }	
	.sMenuTitle {margin: calc(0.5*var(--gap));}
	
}
@media (max-width: 251px){
	:root { --aboutmereadablelines: 6; }
	.cardButton { flex-direction: column; flex-wrap: nowrap; padding: 8px;}
	.btnText > p {display: none;}
	.friends { gap:2px; }	
}

/*Mistérios Fantasmagóricos Não Solucionados aka Canto do Surto*/
/*Quando corrigi a introdução das fontes no documento a fonte do e-mail no footer e apenas ela, reduziu absurdamente de tamanho. O que seu sei até agora: Sempre que ela não consegue carregar a source da fonte ela puxa uma fonte de mesmo nome no meu computador. Essa fonte no meu computador está maior por algum motivo para a font Pixel Touch mesmo eu intalando diretamente a partir do mesmo arquivo. 
/*Existe alguma forma de expandir meu conteúdo da CenterGrid pra ser o tamanho total da view (100vh) no caso de orientações retrato? Tentei o código abaixo, mas o css não está estruturado pra se adaptar ao novo tamanho. Terei que fazer tudo de novo?*/
@media (orientation: portrait) {
	/* .centerGrid { height: 100vh; } */
	/* footer {height:10%;}	 */
	/* main {height:60%;}	 */
	/* header {height:30%}	 */
/* } */