/*------------FONTS-------------*/

.archivo-<uniquifier> {
  font-family: "Archivo", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

// <uniquifier>: Use a unique and descriptive class name

.newsreader-<uniquifier> {
  font-family: "Newsreader", serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

/*------------MAINPAGE SETUP DOUBLE SCROLL-------------*/

body{


}





.mainpage{
	background-color: #c2c2c2;
	width: 100%;
	height: 100%;
	display: grid;
	grid-template-columns: 50vw, 50vw;
	grid-template-rows: 100vh;
	overflow-y: hidden;
	overflow-x: hidden;


}

.graphic{
	width: 50vw;
	margin-top: 31px;
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 1;
	grid-row-end: 2;
	background-color: #c2c2c2;
	padding: 0;
	overflow-y: scroll;
	/*border: 1px solid blue;*/

}

.art{
	width: 50vw;
	margin-top: 31px;
	grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 1;
	grid-row-end: 2;
	background-color:  #595959;
	overflow-y: scroll;
	padding: 0;
	/*border: 1px solid blue;*/

}


/*-------------PROJETS MAINPAGE GRAPHIC-----------------*/


.pg{

	width: 92%;
	object-fit: contain;
	border-bottom: 1px solid black;
	margin: auto;
	margin-bottom: 10px;
	display: flex;


}

.pg:hover{

	cursor: crosshair;
}

.projetgraph{
	width: 100%;

}

.projetgraph img{
	width: 100%;

}

.projetgraph p{
	padding-top: 3px;
	padding-bottom: 3px;
	font-family: "Archivo", sans-serif;

}


/*-------------PROJETS MAINPAGE ART-----------------*/


.pa{

	width: 92%;
	object-fit: contain;
	border-bottom: 1px solid black;
	margin: auto;
	margin-bottom: 10px;
	display: flex;

}

.pa:hover{

	cursor: crosshair;
}

.pa a{
	color: black;
	
}

.projetart{
	width: 100%;

}

.projetart img{
	width: 100%;

}

.projetart p{
	padding-top: 3px;
	padding-bottom: 3px;
	font-family: "Archivo", sans-serif;

}

img{
	border-radius: 20px;
}

/*-------------SCROLLBAR DESIGN------------*/


::-webkit-scrollbar {
  width: 20px;
}

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

::-webkit-scrollbar-thumb {
  background-color: red;
}

::-webkit-scrollbar-thumb {
  background-color: red;
  border-radius: 20px;
}

::-webkit-scrollbar-thumb {
  background-color: black;
  border-radius: 20px;
  border: 6px solid transparent;
  background-clip: content-box;
}



/*--------------HEADER---------------*/

.header1{
	width: 50vw;
	height: 30px;
	/*border: 1px solid blue;*/
	background-color: #c2c2c2;
	display: flex;
	justify-content: flex-start;
	position: fixed;
	left: 0px;
	
}

.header2{
	width: 50vw;
	height: 31px;
	/*border: 1px solid blue;*/
	background-color: #595959;
	display: flex;
	justify-content: flex-start;
	position: fixed;
	right: 0px;
	
}


h3{

	margin-top: 8px;
	font-family: "Archivo", sans-serif;
}

.hg{

	position: fixed;
	left: 18vw;
}

.ha{

	position: fixed;
	right: 22vw;

}

/*-------------FOOTER-----------------*/

footer{
	position: fixed;
	width: 90%;
	height: 30px;
	bottom: 20px;
	left: 70px;

	display: flex;
	justify-content: flex-start;
	gap: 30px;

}

footer h4{
	font-family: "Newsreader", serif;
	color: white;
	padding: 7px 15px 15px;
	background-color: #db53b0;
	border-radius: 15px;

}

footer h5{
	font-family: "Newsreader", serif;
	color: white;
	padding: 7px 15px 15px;
	background-color: #db53b0;
	border-radius: 15px;
}

footer h5 a{
	font-family: "Newsreader", serif;
	color: white;
	font-style: italic;
	
}

footer h6{
	font-family: "Newsreader", serif;
	color: white;
	padding: 7px 15px 15px;
	background-color: #db53b0;
	border-radius: 15px;
}

footer h6 a{
	font-family: "Newsreader", serif;
	color: white;
	font-style: italic;
	
}

footer a {
color: white;
text-decoration: none;
}