@font-face {
	font-family: SpaceGrotesk;
	src: url("SpaceGrotesk-VariableFont_wght.ttf");
}



html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	top: 0;
	font-family: 'SpaceGrotesk', sans-serif;
	color: black;

}


.scroll-progress {
position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 7px;
  z-index: 90999;
	background: black;
}

.scroll-bar {
  height: 100%;
  width: 0%;
  background: #ADFF2F;
  transition: width 0.1s ease-out;
}

.header {
	
	/*background-color: white;*/
	z-index: 100;
	width: 100%;
	padding-top: 0.2%;
	padding-bottom: 0.2%;
	padding-left: 5%;
	height: 50px;
	font-weight: 300;
}


.content {
	padding: 20%;
}


.sticky {
	position: fixed;
	top: 0;
	width: 100%;
	/*border-top: 1px solid black;*/
	/*background-color: white;*/
	

}

.sticky h1{
	color: black;

}

.sticky a{
	color: black;
	
}

.sticky + .content {
	padding-top: 5%;
}


.main{
	margin-bottom:-10%;
}



h1 a{

	font-family: SpaceGrotesk;
	font-weight: 800;
	float: left;
	font-size: 0.8em;
	letter-spacing: 0.05em; 
	color: black;
  } 



h1 a:hover {
	color: black;
	padding:12%;
	border-radius: 12px;
	background-color: #ADFF2F;
}

ul {
	list-style-type: none;
	
}

.header ul{ 
	/*display: inline;*/
	margin-left:-4.5%;
}

.header li{
	/*padding-left: 2%;*/
	margin-left:2%;
	margin-top:5%;

}

.header img{
	position: fixed;
	top:8%;
	 transform: translateY(-50%);
  display: flex;
  flex-direction: column; /* uma em cima da outra */
  align-items: flex-end;  /* alinhadas à direita */
  gap: 10px;              /* espaço entre elas */
}


li {
	font-size: 1.8em;
	font-weight: 400;
	float: left;
	cursor: pointer;
	color: black;
	display: inline;

}


li a{
	    color: black;
	  z-index: 10; /* menor que o menu */

}

li a:hover {
	color: black;
	border-radius: 2px;
	background-color: #ADFF2F;
	
}


/*h7:after{
	content: "";
	display: block;
	width:30%;
	height: 1px;
	background: #000;
	position: absolute;
	left:56%;
	top:4.5%;
}*/


h7 a:hover {
color: black;
	padding:2%;
	border-radius:2px;
	background-color: #ADFF2F;
}


/*home*/
#home {
	height: 920px;
	background-size: 100% ;
	/*  background: #e7e7e7; /* Fallback */
 /* animation: color 6s infinite linear;
	background-image: url(''), url(''),url('assets/elements.png');
    background-position: 0;
    background-repeat: no-repeat, repeat, no-repeat;
    background-size: auto, contain, cover;
    background-origin: content-box, padding-box, border-box;*/
	background-image: url("assets/bg.png");
 background-color: white;

}

/*@keyframes color {
	0%   { background: #e0e721; }
	20%  { background: #e7e7e7; }
	40%  { background: #efbdf7; }
	60%  { background: #e64900; }
	80%  { background: #0c3af5; }
	100% { background: #e0e721; }
}*/

.containerphoto{
/*position: fixed; /* fixa na tela */
	position: relative;
 right: 12%;
  top: 4%;             /* posiciona verticalmente */
  /*transform: translateY(-50%);*/
  display: flex;
  flex-direction: column; /* uma em cima da outra */
  align-items: flex-end;  /* alinhadas à direita */
  gap: 10px;     /* espaço entre elas */
	  z-index: 1; /* menor que o menu */
	  pointer-events: none;
}

.containerphoto img {
 width: 12vw;  /* 20% da largura do ecrã */
  height: auto;
	
}



#home p{
	position:absolute;
	font-family: SpaceGrotesk;
	font-weight: 400;
	float: left;
	line-height: 1.2em;
	font-size: 1.5em;
	color: black;
	text-align: left;
	width: 28%;
	margin-top:3%;
	margin-left:30%;
}


/*ABOUT*/

#about {
	height: 920px;
	background-image: url("assets/bg.png");
 background-color: white;
	background-size: 100% ;
}

#about-info {
	display: grid;
	grid-template-columns: repeat(4,2fr);
	grid-gap: 2%;
	grid-auto-rows: 297px;
	margin-left: 5%;
	margin-right: 0%;
	margin-bottom: 12%;
	margin-top: 0%;
	width: 100%;
}


.columns h5{
	font-family: SpaceGrotesk;
	font-weight: 400;
	float: left;
	line-height: 1.3em;
	font-size: 1.2em;
	color: black;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: left;
	width:80%;
}


.columns {
	margin-top: 47%;
			max-width: 38ch;
	
}


.columns img {
	margin-top: 10%;
	width: 96%;
}


.columns p {

	font-weight: 100;
	font-size: 1em;
	
}

.columns ul {
width:30%;
padding-right: -80%;
}

.columns li {
color: black;
font-style: normal;
}

.columns h5{
	
	padding-bottom: 16%;
}

.columns p a{
	text-decoration: underline;
}

.columns a{
	color: black ;
	font-style: normal;
	
}

.columns a:hover {
color: black;
	border-radius:2px;
	background-color: #ADFF2F;

}


.columns h3 {
	font-family: SpaceGrotesk;
	font-weight: 300;
	float: left;
	font-size: 0.8em;
	color: black;
	display: flex;
	flex-direction: column;
	text-align: left;
	width: 100%;
	margin-top: 15%;
	line-height: 0.05em;
}

.columns h4 {
	margin-bottom: -3%;
	line-height: 1.2em;

}

#contact-links{
	margin-left: -10%;
		width:20%;
}

#contact-links a{
	font-weight: 600;
	font-size: 0.6em;

}

/*WORKKKKKK*/
#work {
	height: auto;
	padding-top: 2%;
	margin-top: 5%;
padding-bottom: 20%;;
	background-image: url("assets/bg.png");
 background-color: white;
	background-size: 100% ;
	background-repeat: repeat;
	

}

/*work*/
#portfolio-list {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	grid-gap: 0.5%;
	/*grid-auto-rows: 497px;*/
	/*margin-left: 5%;
	margin-right: 5%;*/
	width: 100%;
}


.task img {
  display: flex;
  flex-direction: column; /* empilha verticalmente */
  gap: 10px;   /* espaçamento entre as imagens */
	width: 67%;
	margin-left:36%;
	margin-top:-2%;
}

/*.task img:hover {
	transform: scale(1.1);
	z-index: 5000;
	/*padding-left: 2%;*/
/*	filter: none;*/



.task {
	/*border: 1px solid black;*/
	margin-bottom: -15%;
	/*background-color: #e7e7e7;*/
	/*background: #eae3d9;*/

}


.task h2 {
	font-family: SpaceGrotesk;
	font-size: 0.8em;
	max-width: 16ch;
	float: left;
	color: black;
	margin-top:-16%;
	margin-left: 5%;
	/*background-color: white;*/
	width: 98%;
	z-index: 2000;
		font-weight: 300;


}

.task h4 {

	font-size: 0.8em;
	font-family: SpaceGrotesk;
	font-weight: 300;
	float: left;
	clear: left;
	max-width: 13ch;
	margin-top: -13.4%;
	margin-left: 5%;
	width: 100%;
	z-index: 2000;
	position: relative;

}


.task h3 {
	font-family: SpaceGrotesk;
	font-size: 1.2em;
	font-weight: 400;
    line-height: 1.3em;
	float: left;
	margin-left: 5%;
	margin-top: -40%;
	max-width: 27ch;

}



.task h6 {
	display: block;
	font-family: SpaceGrotesk;
	margin-top: 16.5%;
	font-weight: 800;
	float: left;
	margin-left: 5%;
	/*border: 1px solid black;*/
	font-size: 1em;

}

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

a:hover {
color: black;

}


.modal {
	display: none;
	position: fixed;
	z-index: 1;
	padding-top: 100px;
	left: 25%;
	top: 20%;
	width: 50%;
	height: 50%;
	overflow: auto;
	background: white;
	border: none;
	border-radius: 15px;
}


.modal-content {

	margin: auto;
	padding: 20px;
	border: none;
	width: 80%;
}

/*BOTTOM LINK*/

#bottom {
	height: 200px;
	margin-top: -10%;
	padding-top:-60%;
	background-image: url("assets/bg.png");
 background-color: white;
	background-size: 100% ;
}

.back-to-top {
  padding: 10px 15px;
  color: black;
  text-decoration: none;
  border-radius: 2px;
  font-size: 3em;
  z-index: 10000;
	display: flex;
  justify-content: center;


}

.back-to-top:hover {
	color: black;
	text-decoration: underline;
}




/*MOBILE / TABLET*/



@media only screen and (max-width: 768px) {
	h1 {
		/*font-size: 3em;
		text-align: center;
		margin-top: 23%;
		margin-left: -33%;*/
	}

	#portfolio-list {
		/*grid-auto-rows: 380px;*/
		border: none;
		grid-template-columns: repeat(1, 2fr);
		grid-gap: 10px;
		/*margin-left: 15%;*/
	}

	.header {
	/*display: flex;*/
	width:100%;
	/*	display: block;*/
		
	}
	
	.header h1{
		float:left;
		top:-1em;
	}

	
	.header ul{
		width:100%;
	left:30%;
		margin-left:520%;
		padding-top:210%;
		display: inline;
	}
	
	h5 {
		width: 100%;
		padding-bottom: 5%;
		margin-top: -16%;
		line-height: 55px;
		font-size:4em;
	}

	.task {
		/*margin-left: 12%;*/
		/*margin-top: 2%;*/
		width: 100%;
		/*padding-bottom: -20%;*/
	}

	
	.task h2{
		font-size: 1.8em;
		max-width: 16ch;
		font-weight: 500;
	}

	.task h4 {
		margin-top: 4%;
		margin-left: 1%;
		


	}

	.task h3 {
		clear: left;
		max-width: 32ch;
		margin-left: 13%;
		margin-top: -3%;
	}

	.task h6 {
		clear: left;
		margin-right: 15%;
		margin-top: -2%;
	}

	.task img {
		width: 100%;

	}
	
	.sticky {
		position: fixed;
		bottom: 0;
		width: 100%;
		border-top: 1px solid black;
		margin-left: -3.4%;
	}

	

	#home {
		height: 400px;
	}

	

	/*.arrow-divider {
		margin-top: 500%;
	}*/

	/*.modal {
		width: 10%;
		margin-left: -15%;
		z-index: 1000;
	}*/
	
	h5
	{padding-top:10%;}

	#about {
		height: 1000px;
		width: auto;
		 
}

	#about-info {
		grid-auto-rows: 300px;
		border: none;
		grid-template-columns: repeat(1);
	}


	.columns {}

	.columns img {
		width: 70%;
		position: center;

	}

	
	.columns h2 {
		max-width: 12ch;
	}

	.columns p {
		max-width: 32ch;

	}
	
	.columns h4{
		max-width: 22ch;
	}

	.text {
		margin-top: 5em;
	}

	.columns ul {

	}



}