/*Declaring some customized variables for the site color scheme*/
/*NoTE: classes and pseudo classes are weighted the same, while  html elements are not weighted thesame(psuedo elements has less specificity)*/
/*Generic styles starts here*/
:root{
	--black:#171321;
	 --dkblue: #0d314b;
    --plum: #4b0d49;
    --hotmag: #ff17e4;
    --magenta: #e310cb;
    --aqua: #86fbfb;
    --white: #f7f8fa;
    --font-size: 1.3rem;
    --mono: 'Oxygen Mono', monospace;
    --sans: 'Oxygen', sans-serif;
    --orange:#FF7400;
    --lightpink:#FF0DFF;
}
html{
	box-sizing:border-box;
}
*,*::before,*::after{
	box-sizing: inherit;
}
body{
	padding:0;
	margin:0;
	font-family:var(--sans);
	background-color:var(--black);
	color:var(--white);
	font-size:var(font-size);
}
section{
overflow:hidden;
}
h1,h2,h3{
margin:0;
}
a{
	color:var(--orange);
}
a:hover{
	color:#ff0;
	text-decoration:none;
	transition:color 0.6s ease-out;
}
img{
	width:100%;
}
/*end of some basic styles*/

/*background color divs*/
span.fa-code{
margin-right:1rem;
}
.section-bg{
	/* background-color:#3f3f3f; */
	max-width: 100%;
}
.gradient{
 background:linear-gradient(90deg,rgba(255,23,228,1) 0%, rgba(134,251,1) 100%);
 height:6px;
}
.nav.gradient{
 height:0.1rem;	
}
.section-dkblue{
	background-color:var(--dkblue);
	max-width:100%;
}

/*site-intro styles*/
#intro-section{
	padding:4rem 1rem 10rem 1rem;
	max-width:900px;
	margin:0 auto;
}
#intro-section p{
	font-size:1rem;
	line-height:1.5;
}
#intro-section .name{
	font-family:var(--mono);

}
.name span{
	font-family:var(--sans);
	font-size:4rem;
	color:var(--aqua);
	display:block;
}
#intro-section h2{
	font-size:3rem;
	font-weight:normal;
}

/*site-contact section styles*/
#contact-section{
	max-width:400px;
	margin:0 auto;
	text-align:center;
	padding:3rem 0;
}
#contact-section p:last-of-type{
	margin-top:3rem;
}
#contact-section h2{
	font-family:Arial,sans-serif;
	font-weight:normal;
	color:var(--white);
}



/*site navigation styles*/
#nav-section nav{
font-family:var(--mono);
font-size:80%;
padding:1rem;
}
#nav-section nav h1 a {
	font-family:var(--sans);
}
#nav-section ul{
	/*the first three styles are very essential*/
	list-style:none;
	padding:0;
	margin:0;
	display:flex;
	flex-flow:row wrap;
	justify-content:center;/*for horinzontal axis*/
	gap:2rem;
}
#nav-section nav ul li a{
text-decoration:none;
color:var(--white);	
display:block;
}
#nav-section nav ul li a:hover,#nav-section nav [class*='fa-']:hover{
color:var(--magenta);
}

#nav-section ul li:first-child{
	flex-basis:100%;
	text-align: center;
}
/*For fontawesome icon*/
#nav-section nav [class*='fa-']{
	/*border:2px solid white;*/
	font-size:150%;
	color:var(--aqua);
}

/*to target the first child with class attribute and change the color*/
#nav-section ul li:first-child [class*='fa-']{
font-size:1.5rem;
} 
#contact-section p a.button,#nav-section nav ul li a.button{
 background-color:var(--hotmag);
 padding:0.5rem;
 border-radius:5px;
 text-decoration:none;
 font-family:var(--mono);
 color:#fff;
}
#contact-section p a.button:hover,#nav-section nav ul li a.button:hover{
	color:var(--white);
	background-color:var(--magenta);
}

/*Footer styles*/
#footer-section{
	text-align: center;
	background-color:rgb(0,0,0,0.5);
	height:100%;
    padding:2rem 0;	

/*	border:2px solid red;
*/}
#footer-section ul{
	list-style:none;
	padding:0;
	text-align: center;
	display:flex;
	justify-content:center;
	gap:2rem;
	font-size:3rem;
}


/*Projects section styles*/
#project-section{
	padding:4rem 1rem;
	max-width:900px;
	margin:auto;
}
#project-section h2{
	font-size:1.5rem;
	margin-bottom:calc(2.5rem * 1.5);
}
#project-section h3{
	color:var(--aqua);
}
#project-section h4{
	font-size:1rem;
	font-family:var(--mono);
	margin:0; /*bc headers have margins by default*/
}
.blackbox{
	background-color:var(--black);
	padding:1rem;
	border-radius:10px;
	color:var(--white);
	font-size:1rem;
	line-height:1.5;
}
#project-section ul{
	list-style-type:none;
	padding:0;
	margin:0;
	display:flex;
	flex-flow:row wrap;
	justify-content:flex-start;/*this is the value for flexbo*/
	gap:1rem;
	font-size:1rem;
	max-height:400px;

}

#project-section img{
	margin:2rem 0 4rem 0;
	border-left:1px solid var(--aqua);
	border-top:1px solid var(--aqua);
	border-bottom:1px solid var(--aqua);
	border-radius:25px;
	padding:0.5rem;
	min-height:180px;
}
#project-section .reverse img{
border-right:1px solid var(--aqua);	
border-left:none;
}
#project-section .image-header{
	align-items:inherit;
	justify-content: inherit;
	height:auto;
}
#project-section .image-photo img{
	/*border:2px solid red;*/
	display:block;
	width:50%;
}
article{
margin-bottom:2rem;
}
/*making our navabar responsive*/
/* @media(min-width: 500px){
	
} */




@media(min-width:810px){
	/*#project-section{
		max-width:1000px;
		margin:0 auto
	}*/
	article{
		display:grid;
		grid-template-columns:repeat(12,1fr);
		gap:1rem;
		margin-bottom:4rem;
	}
	#project-section img{
     grid-column:1/6;
     grid-row:1/6;  
	 min-height:180px;
	}
	.text{
		grid-column:5/11;
		order:2;
		text-align:right;
		grid-row:1/2;
	}
	#project-section ul{
		justify-content:flex-end;
	}

	#project-section .reverse .text{
	 grid-column:1/7;
	 order:2;	
	 text-align:left;
	}
	#project-section .reverse img{
	 grid-column:6/11;
	 grid-row:1/2;	
	}
	#project-section .reverse ul{
	 justify-content:flex-start;
	}
	#project-section .image-photo img{
	/*border:2px solid red;*/
	display:block;
	width:500%;
}
	#nav-section nav{
		max-width:1200;/*no more than 1200pixels wide*/
		margin:0 auto;
	}
	#nav-section ul li:first-child{
		flex-basis:auto;
		text-align: left;
		margin-right:auto;
/*		margin-left:5rem;
*/}
}