:root {
	--primary: rgba(157,0,255,1);
	--secondary: #fff;
}

html {
	scroll-behavior: smooth;
}

* {
	margin: 0;
	padding: 0;
	font-family: Arial, Helvetica, sans-serif;
	box-sizing: border-box;
}

body {
	 /* //background: #080808;   */
	color: var(--secondary);
	 /* //background: #452c63;  */
	background: radial-gradient(circle at bottom center, var(--primary) 0%, rgba(36,36,36,1) 85%);
	display: flex;
	flex-direction: column;
}

#header {
	width: 100%;
	/* height: 100vh; */
	/* background-image: url("img/pfp.jpg");
	background-size: cover;  */

}

.container {
	padding: 10px 10%;
}

nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	/* background-color: aqua; */
}

nav ul li {
	display: inline-block;
	list-style: none;
	margin: 10px 20px;

}

nav ul li a {
	text-decoration: none;
	color: var(--secondary);
	font-size: 18px;
	position: relative;
}

nav ul li a::after {
	content: '';
	width: 0;
	height: 3px;
	background: var(--primary);
	position: absolute;
	left: 0;
	bottom: -6px;
	transition: 0.3s; 
	/* 17:11 */
}

nav ul li a:hover::after {
	width: 100%;
}

.header-text {
	margin-top: 20%;
	font-size: 30px;
	display:flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
}

.header-text-col-1 {
	/* align-self: flex-start; */
	/* background-color: aquamarine; */
	text-align: center;
}

.header-text-col-pic {
	padding-top: 5%;
	/* align-self: flex-end; */
	/* background-color: aqua; */
}

.adjustScreen {
	display: none;
}

.fullScreen {
	display: block;
}

.pb {
	width:500px;
	height:500px;
	object-fit: cover;
	border-radius:50%;
	
}

.header-text-col-1 h1 {
	font-size: 60px;
	margin-top: 20px;
}

.header-text-col-1 h1 span {
	color: var(--primary);
}

/* -----------about------------- */

#about {
	padding: 80px 0;
	color: #ababab;

}

.row {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;

}

/* #aboutPfp {
	height: 500px;
	width: 400px;
} */

.about-col-1 {
	flex-basis: 35%;
}

.about-col-1 img {
	width: 100%;
	border-radius: 15px;
}

.about-col-2 {
	flex-basis: 60%;
}

.about-col-2 p {
	font-size: 22px;
}

.sub-title {
	font-size: 60px;
	font-weight: 600;
	color: #fff;
}

.tab-titles {
	display: flex;
	margin: 20px 0 40px;

}

.tab-links, .tab-linksP {
	margin-right: 50px;
	font-size: 25px;
	font-weight: 500;
	cursor: pointer;
	position: relative;
}

/* -----------about/projects------------- */

.tab-links::after, .tab-linksP::after {
	content: '';
	width: 0;
	height: 3px;
	background: var(--secondary);
	position: absolute;
	left: 0;
	bottom: -8px;
	transition: 0.5s;
}

.tab-links.active-link::after, .tab-linksP.active-link::after {
	width: 100%;
}

.tab-contents ul li, .tab-contentsP ul li {
	list-style: none;
	margin: 10px 0;
	font-size: 20px

}

.tab-contents ul li span, .tab-contentsP ul li span {
	color: var(--secondary);
	font-size: 22px;
}

.tab-contents ul li, .tab-contentsP ul li {
	padding-top: 10px;
}

.tab-contents, .tab-contentsP{
	display: none;
}

.tab-contents.active-tab, .tab-contentsP.active-tab{
	display: block;

}

/* -----------more project------------- */

.projectLink a{
	color:white;
	font-size: 20px;
}

/* ------contact------ */

.contact-left {
	flex-basis: 50%;
}

.contact-left p {
	margin-top: 30px;
	font-size: 20px;
}

.contact-left p i {
	margin-right: 15px;
	/* font-size: 25px; */
}

.social-icons {
	margin-top: 30px;

}

.social-icons a, .email {
	text-decoration: none;
	font-size: 30px;
	margin-right: 15px;
	color: var(--secondary);
	display: inline-block;
	transition: transform 0.5s;
}

.social-icons a:hover, .email:hover {
	color: var(--primary);
	transform: translateY(-5px);
}

.contact-right {
	flex-basis: 50%;
}

.contact-right p {
	margin-top: 30px;
	font-size: 20px;
}

.contact-right a i {
	margin-right: 10px;
}

.btn.btn2 {
	display: flex;
	border: 1px solid var(--secondary);
	border-radius: 25px;
	color: var(--secondary);
	width: 200px;
	height: 50px;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	transition: ease 0.5s;
}

.btn.btn2:hover{
	color: #000;
	background-color: #fff;
}

/* ------css for small screen----- */

@media only screen and (max-width: 600px) {
	#header {
		/* width: 100%; */
		height: 85vh;
	}

	.adjustScreen {
		display: block;
	}

	.fullScreen {
		display: none;
	}

	.header-text {
		margin-top: 20%;
		font-size: 20px;
		display: flex;
		flex-direction: column;
	}

	.header-text-col-1 {
		text-align: left;
	}

	.header-text h1 {
		font-size: 30px;
	}
	
	nav {
		background-color: #3a3a3a;
		width: 100%;
		height: 50px;
		position: fixed;
		left: 0;
		top: 0;
	}

	nav ul{
		width: 100%;
		display: flex;
		justify-content: space-evenly;

	}

	.pb {
		/* width:300px;
		height:300px; */
		/* object-fit: cover; */
		border-radius: 40%;
		max-width: 100%;
		max-height: 100%;
	}

	.header-text-col-pic {
		margin-top: 20px;
		
	}
	
	.header-text-col-1 h1 {
		font-size: 40px;
		/* margin-top: 20px; */
	}

	.sub-title {
		font-size: 40px;
	}

	.about-col-1, .about-col-2 {
		flex-basis: 100%;
	}

	.about-col-1 {
		margin-bottom: 30px;
	}

	.about-col-2 {
		font-size: 16px;
	}

	.tab-links {
		font-size: 16px;
		margin-right: 20px;
	}

	.contact-left, .contact-right {
		flex-basis: 100%;

	}

}