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

@font-face {
 font-family: "LexendSemibold";
 src: url("Lexend-SemiBold.ttf");
}

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

b{
font-family:LexendSemibold;
}


body, html, #container {
  height: 100vh;
  width: 100vw;
  padding:0;
  margin:0;
  background-color:rgb(0,0,0,1);
}

@media screen and (min-width: 1000px) {


	#left{
		
		display: block;
		width:50vw;
		background-color: white;
		height:100%;
		float:left;

	}

	#right{
		
		display: block;
		width:50vw;
		height:100%;
		float:right;
		overflow-y: auto;

	}
	
	#gradient_bottom{
		width:50vw;
		height:6vh;
		position:absolute;
		float:right;
		bottom:0;
		background: linear-gradient(0, rgba(0,0,0,.75) 0%, rgba(0,0,0,0) 100%);
}

	#gradient_top{
			width:50vw;
			height:6vh;
			position:absolute;
			float:right;
			top:0;
			background: linear-gradient(0, rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 100%);
	}

}




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

/* Track */
::-webkit-scrollbar-track {
  background: black;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: white;
  border-radius:5px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: rgb(255,255,255,0.75);
}

#right h1{
	
	margin-top:2.5vw;
	margin-left:2.5vw;
	display:block;
	font-size:30px;
	font-family:LexendSemibold;
	color:black;
	color:white;
}

#project{
	
	display:block;
	margin:auto;
	min-height:25vh;
	margin-top:2.5vw;
	box-sizing: border-box;
	background-color:white;
	overflow: auto;
	border-radius:10px;
	display: flex;
	overflow-x: hidden;
	
	width:45vw;
}

#button{

		background-color: black;
		color:white;
		
		position:relative;
		
		padding:0.5vh;
		margin-bottom:1vh;
		
		font-family: LexendSemibold;
		font-size:15px;
		
		border-radius: 10px;
		border: 2px solid rgb(0,0,0,0);
		transition-duration:0.1s;

}

a{		text-decoration:none; }

#button:hover{
	
	background-color:white;
	border: 2px solid black;
	color:black;
	
	transition-duration:0.1s;
	
}


#button_icon{
	display:inline-block;
	height:25px; 
	margin-right:5px;
	margin-bottom:5px;
	filter: brightness(100%);	
	vertical-align:middle;
}

#button:hover #button_icon{
	filter: brightness(0%);	
}



#illustration{
	display:block;
	min-height:25vh;
	width:25%;
	float:left;
	background-size: cover;
	box-shadow: inset 0px 0px 20px rgba(0,0,0,0.6);
	border-radius: 10px 0 0 10px ;

}


#info{

	display:block;
	margin:auto;
	width:45vw;
	min-height:25vh;
	background-color:white;
	margin-top:2.5vw;
	box-sizing: border-box;
	display: flex;
	text-align: justify;

}


#photo{
	display:block;
	min-height:25vh;
	width:25%;
	background-color:black;
	float:left;
	background-size: cover;
	box-shadow: inset 0px 0px 20px rgba(0,0,0,0.6);
}

#desc{
	display:block;
	min-height:25vh;
	width:34vw;
	box-sizing: border-box;
	padding-left:2.5vh;
	padding-right:2.5vh;
	float:right;
	background-color:white;
	text-align: justify;

}

#project #desc{
		padding-top:2.5vh;
}

#project #desc h1{
		font-size:20px;
}

#project #desc h2{
		font-size:15px;
}

#desc h1{
	margin: 0;
	display:block;
	font-size:30px;
	font-family:LexendSemibold;
	color:black;
	background-color:white;
}

#desc h2{
	margin: 0;
	display:block;
	margin-top: none;
	font-size:20px;
	font-family:LexendDeca;
	color:black;
	background-color:white;
	font-weight:normal;
}

#desc p{

	font-family:Lexend;

}

@media screen and (max-width: 1000px) {


	#left{
		
		display: block;
		width:100vw;
		background-color: white;
		background-color:red;
		overflow: hidden;

	}

	#right{
		
		display: block;
		width:100vw;
		height:100%;


	}
	
	::-webkit-scrollbar {
		width: 0px;
	}
	
	#gradient_bottom{
		width:0;
		height:0;
		position:absolute;
		float:right;
		bottom:0;
		background: linear-gradient(0, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 100%);
}

	#gradient_top{
			width:0;
			height:0;
			position:absolute;
			float:right;
			top:0;
			background: linear-gradient(0, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 100%);
	}
	
	#info{

		display:block;
		margin:auto;
		width:100vw;
		background-color:white;
		box-sizing: border-box;
		display: flex;
	}
	
	
	#photo{
		display:block;
		width:25vw;
		background-color:black;
		float:left;
		background-size: cover;
		box-shadow: inset 0px 0px 20px rgba(0,0,0,0.6);

	}

	#desc{
		display:block;
		width:75vw;
		box-sizing: border-box;
		padding-left:2.5vh;
		padding-right:2.5vh;
		float:right;
		background-color:white;

	}

	
	#project{
	
		display:block;
		margin:auto;
		margin-top:2.5vh;
		box-sizing: border-box;
		background-color:white;
		overflow: auto;
		display: flex;
		overflow-x: hidden;
		border-radius: 0px;

		width:100vw;
	}
	
	#illustration{
		border-radius: 0px;	
	}
	
	

}