/* Inicio CSS */
*{
	margin:0;
	padding:0;
	box-sizing:border-box;
}

html, body{
	height:100%;
}

a{
	text-decoration:none;
}

ul{
	list-style-type:none;
}
/* Variáveis */

:root{
	--highlight:#ffd803;
	--title-color:#272343;
	--p-color:#2d334a;
	--primary:#ffffff;
	--secondary:#e3f6f5;
	--tertiary:#bae8e8;
}

/*  Scrollbar personalizada  */

body::-webkit-scrollbar {
  	width:5px;              
}

body::-webkit-scrollbar-track {
  	background:var(--title-color);        
}

body::-webkit-scrollbar-thumb {
  	background-color:var(--highlight);    
}

/* Personalize o estilo dos cards dos projetos*/
.custom-card{
	overflow: hidden;
	max-width: 300px; 
}

.custom-card img{
    max-width: 100%;
    height:auto;
}

.display-flex-projects{
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	align-items:center;
}

/* Backgrounds-colors */

body{
	background-color:var(--primary);
}

.bg-card-white{
	background-color:var(--primary);
}

.bg-card{
	background-color:var(--title-color);
}

.bg-card-secondary{
	background-color:var(--secondary);
}

.bg-card-tertiary{
	background-color:var(--tertiary);
}

/* width para card de texto e borda-modal */

.width{
	width:90%;
}

.borda-modal{
	border:2px solid var(--title-color);
}

/* fonts e cores dos texto e titulos */

.font-style-title{
	font-family: 'Kanit', sans-serif;
	font-weight:500;
}

.font-style-text{
	font-family: 'Rubik', sans-serif;
	font-weight:400;
}

.font-color-title{
	color:var(--title-color);
}

.font-color-p{
	color:var(--p-color);
}

.font-color-cards{
	color:var(--primary);
}

.color-tertiary-card{
	color:var(--tertiary);
}

.font-size-title{
	font-size:25px;
}

.font-size-p{
	font-size:18px;
}

.color-icon{
	color:var(--title-color);
	transition:0.3s ease;
}

.color-icon:hover{
	color:var(--highlight);
}

/* botão personalizado */

.buttonClass{
	color:var(--p-color);
  	border:2px solid var(--title-color);
  	background-color:var(--primary);
  	text-align:center;
  	text-decoration:none;
  	padding:10px;
  	overflow:hidden;
  	transition:0.3s ease;
}

.buttonClass:hover{
	background-color:var(--highlight);
	color:var(--title-color);
	border:2px solid var(--title-color);
}

.buttonClass a:hover, .buttonClass a{
	color:var(--title-color);
}

/* Tamanhos de textos em diferentes telas */

@media (max-width: 1024px){
	.width{
		width:95%;
	}

	.font-size-title{
		font-size:19.5px;
	}

	.font-size-p{
		font-size:15.5px;
	}

	.display-flex-projects{
		flex-direction:column;
	}

}

@media (max-width: 540px){
	.font-size-title{
		font-size:16px;
	}

	.font-size-p{
		font-size:13px;
	}

	.custom-card{
		max-width:200px;
	}

	.section2 h5{
		font-size:12px;
	}

}

@media (max-width: 450px){
	.font-size-title{
		font-size:14px;
	}

	.font-size-p{
		font-size:11px;
	}

	.display-flex-projects{
		flex-direction:column;
	}

	.buttonClass{
		font-size:0.8rem;
	}

}

@media (max-width: 350px){
	.font-size-title{
		font-size:14px;
	}

	.font-size-p{
		font-size:8px;
	}
}