body{
	--mainblue: rgb(0, 132, 255);
	--secondaryblue: #005ca3;
	--maingrey: rgb(214, 214, 214);
	--secondarygrey: #8f8f8f;
}

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	list-style: none;
	text-decoration: none;
	scroll-behavior: smooth;
	font-family: 'Mulish', sans-serif;
}

p {
	line-height: 1.4;
}

.blue{
	color: var(--mainblue);
}

.section{
	min-height: 100vh;
	padding: 100px;
}

#header{
	background: url("background.jpg");
	background-size: cover;
	position: relative;
}

#header h1{
	width: 300px;
	font-size: 80px;
	color: var(--maingrey);
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	text-align: left;
}

#header a{
	color: var(--secondaryblue);
	border: 3px solid var(--mainblue);
	border-radius: 3px;
	font-size: 30px;
	padding: 20px;
	background-color: rgba(255, 255, 255, 0.658);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: background-color 0.2s, padding 0.2s , font-size 0.2s;
}

#header a:hover{
	background-color: rgba(255, 255, 255, 0.8);
	padding: 30px;
	font-size: 40px;
}

nav{
	background-color: var(--secondaryblue);
	display: flex;
	padding: 10px 100px;
	justify-content: space-between;
	align-items: center;
	position: sticky;
	top: 0;
	border-bottom: 5px solid var(--maingrey);
	z-index: 10;
}

nav h2{
	color: white;
	font-size: 35px;
}

nav ul{
	display: flex;
	margin-left: 100px;
}

nav li{
	padding: 5px;
	margin-right: 20px;
}

nav li a{
	color: white;
	font-size: 24px;
}

.un::after {
	content: '';
		width: 0px;
	height: 5px;
	display: block;
	background: var(--mainblue);
	transition: 300ms;
}

.un:hover{
	color: var(--mainblue);
}

.un:hover::after {
		width: 100%;
}

a,p{
	font-family: 'Montserrat', sans-serif;
}

.section h1{
	font-size: 64px;
	text-align: center;
	margin-bottom: 30px;
}

.aboutleft{
	width: 50%;
	display: inline-block;
	padding: 40px;
	font-size: 24px;
	text-align: center;
}

.aboutleft img{
	border-radius: 50%;
	width: 400px;
	background-color: var(--mainblue);
	margin-bottom: 20px;
}

.aboutleft p{
	text-align: left;
}

.aboutright{
	width: 45%;
	display: inline-block;
	padding: 40px;
	vertical-align: top;
}

.hobby{
	width: 100%;
	height: 30%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 5px solid var(--mainblue);
}

.hobby i{
	font-size: 120px;
	color: var(--maingrey);
	margin-right: 30px;
}

#projects{
	background-color: #f2f2f2;
}

.myprojects{
	width: 90%;
	margin: auto; 
	text-align: center;
}

.project{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 20px;
}

.projectText{
	flex: 1;
	margin: auto 40px;
}

.projectText h2{
	color: var(--mainblue);
	font-size: 36px;
	margin-bottom: 10px;
	border-bottom: 2px solid var(--secondarygrey);
}

.projectText p{
	font-size: 20px;
}

.screen{
	width: 400px;
	position: relative;
}

.screen img{
	width: 100%;
}

.screenimg{
	background-size: cover;
	background-position: center;
	position: absolute;
	width: 305px;
	height: 195px;
	top: 8px;
	left: 48px;
	border-radius: 3px;
	display: flex;
	justify-content: center;
	align-items: center;
}


.screenimg i{
	font-size: 80px;
	color: var(--mainblue);
	opacity: 0;
	transition: opacity .2s linear, transform .2s linear;
	transform: translateX(-10px);
}

.screen:hover i{
	opacity: 1;
	transform: translateX(0px);
}

#tier{
	background-image: url("tierlist.png");
}

#coding{
	 background-image: url("fakecoding.png");
}

#applezon{
	background-image: url("applezon.png");
}

.skillscale{
	display: flex;
	flex-direction: column;
	width: 80%;
	margin: auto;
}

.levels{
	display: flex;
	justify-content: space-between;
}

.level{
	font-size: 30px;
}

.graph{
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	width: 100%;
	height: 600px;
	margin-top: 50px;
	position: relative;
}

.bar{
	height: 60px;
	display: flex;
	justify-content: flex-end;
	padding-right: 40px;
	color: white;
	font-size: 40px;
	opacity: 0.78;
}

.bar.beg{
	width: 33%;
}

.bar.int{
	width: 66%
}

.bar.exp{
	width: 100%;
}

.bar.first{
	background-color: red;
}

.bar.second{
	background-color: violet;
}

.bar.third{
	background-color: #e3e637;
}

.bar.fourth{
	background-color: orange;
}

.bar.fifth{
	background-color: blue;
}

.bar.sixth{
	background-color: #3A6B8F;
}

.bar.seventh{
	background-color: green;
}

.marker{
	position: absolute;
	width: 4px;
	height: 100%;
	background-color: var(--secondaryblue);
	z-index: -1;
}

.marker.second{
	left: 33%;
}

.marker.third{
	left: 66%;
}

.marker.fourth{
	left: 100%;
}

footer{
	height: 120px;
	background-color: var(--mainblue);
	color: white;
	text-align: center;
}

footer ul{
	display: flex;
	justify-content: center;
	margin: auto;
}

footer li{
	padding: 24px;
}

footer a{
	color: white;
}

/* this line is to separate main css from media query */

/* /////////////////////////////////////////////////////////////////////// */


@media(max-width: 900px){
	.section{
		padding: 30px;
	}

	#header{
		text-align: center;
	}

	#header h1{
		font-size: 40px;
		width: auto;
		transform: none;
		position: static;
		text-align: center;
	}

	nav{
		flex-direction: column;
		padding: 10px 0;
	}

	nav ul{
		margin: 0;
	}

	nav li a{
		font-size: 20px;
	}

	.aboutleft, .aboutright{
		width: 100%;
		padding: 0;
		font-size: 16px;
	}

	#about img{
		width: 100%;
	}

	.hobby{
		flex-direction: column;
		text-align: center;
		height: auto;
		margin-top: 20px;
	}

	.hobby i{
		margin: 0;
	}

	.project{
		flex-direction: column;
		margin: 0;
	}

	#project{
		overflow: hidden;
	}

	.projectText{
		margin: 0;
	}

	.reverse{
		flex-direction: column-reverse;
	}

	.level{
		font-size: 16px;
	}

	.bar{
		font-size: 20px;
		padding-right: 10px;
	}

	footer h1{
		font-size: 20px;
	}

	footer a{
		font-size: 15p
	}
}