@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300&family=Ubuntu:wght@300&display=swap');

/*
Colors
black - #040404
Aquua - #54df37
sorta green - #16600d
white - 
 */


html {
	scroll-behavior: smooth;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Lato', sans-serif;

}

body {

	height: 100%;
	/*this is for full layout for the type-out*/
	background-color: black;
}

.nagivationtwo {

	display: none;
}

.nagivation {

	right: 0;
	top: 0;
	position: fixed;
	width: 60px;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: whitesmoke;
	transition: 0.5s;
	overflow: hidden;
	z-index: 1;
	/*^^^ makes it above everthign */

}

.nagivation:hover {

	width: 200px;

}

.nagivation ul {

	position: absolute;
	width: 100%;

}

.nagivation ul li {

	position: relative;
	right: 0;
	width: 100%;
	list-style: none;

}

.nagivation ul li:hover {

	background-color: teal;

}

.nagivation ul li a {

	position: relative;
	display: block;
	width: 100%;
	display: flex;
	text-decoration: none;
}

.nagivation ul li a .icons {

	position: relative;
	font-size: 23px;
	display: block;
	min-width: 60px;
	height: 30%;
	line-height: 100px;
	text-align: center;
	color: #040404;
}


.nagivation ul li a .title {

	position: relative;
	display: block;
	font-size: 20px;
	padding: 0 10px;
	height: 100px;
	line-height: 100px;
	text-align: start;
	white-space: nowrap;
	color: #040404;
}





/* .type is the bottom layer of the auto sentence */
.type {

	margin-right: 60px;
	margin-bottom: 50px;

	/* border: 1px solid;
	border-color: blue; */


	height: 100vh;
	background-size: cover;

}

/* .type-out is the sentence itself which is inside the .container  */
.type-out {

	display: flex;

	position: relative;

	width: 100%;


	/* border: 5px solid;
	border-color: whitesmoke; */



}

.type-out::after {

	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	width: auto;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 16px;
	font-size: 3vw;
	position: relative;
	content: "";
	animation: abomination1 5s linear 1;

	animation-fill-mode: forwards;


	/* border: 1px solid;
	border-color: green; */

	/*this where the text goes so the text inside the box itself*/


}

/* This is the same as the .type but it has the padding and is about .type-out */
.container {

	padding: 200px 100px 200px 100px;
	color: whitesmoke;
	display: grid;
	grid-template-rows: 300px 100px;

	/* border: 1px solid;
	border-color: red; */

	background-color: black;
	height: 100vh;
}

.scroll_more {

	animation: showMee 0s 6s forwards;
	visibility: hidden;

	margin-top: 7%;
	padding: 15px;
	text-align: center;
	font-size: 10px;
	font-size: 2vw;

	/* border: 5px solid;
	border-color: whitesmoke;
	border-radius: 15px; */
}

@keyframes showMee {

	to {
		visibility: visible;
	}

}

@keyframes abomination1 {
	1% {
		content: "H";
	}

	3% {
		content: "Hi";
	}

	5% {
		content: "Hi, ";
	}

	7% {
		content: "Hi, m";
	}

	9% {
		content: "Hi, my";
	}

	11% {
		content: "Hi, my";
	}

	13% {
		content: "Hi, my n";
	}

	15% {
		content: "Hi, my na";
	}

	17% {
		content: "Hi, my nam";
	}

	19% {
		content: "Hi, my name";
	}

	21% {
		content: "Hi, my namee";
	}

	23% {
		content: "Hi, my name";
	}

	25% {
		content: "Hi, my name ";
	}

	27% {
		content: "Hi, my name i";
	}

	29% {
		content: "Hi, my name is";
	}

	31% {
		content: "Hi, my name is ";
	}

	33% {
		content: "Hi, my name is K";
	}

	35% {
		content: "Hi, my name is Ku";
	}

	37% {
		content: "Hi, my name is Kus";
	}

	39% {
		content: "Hi, my name is Kush";
	}

	41% {
		content: "Hi, my name is Kush,";
	}

	43% {
		content: "Hi, my name is Kush, ";
	}

	45% {
		content: "Hi, my name is Kush, a";
	}

	47% {
		content: "Hi, my name is Kush, an";
	}

	49% {
		content: "Hi, my name is Kush, and";
	}

	51% {
		content: "Hi, my name is Kush, and ";
	}

	53% {
		content: "Hi, my name is Kush, and I";
	}

	55% {
		content: "Hi, my name is Kush, and I ";
	}

	57% {
		content: "Hi, my name is Kush, and I a";
	}

	59% {
		content: "Hi, my name is Kush, and I am";
	}

	61% {
		content: "Hi, my name is Kush, and I am ";
	}

	63% {
		content: "Hi, my name is Kush, and I am a";
	}

	65% {
		content: "Hi, my name is Kush, and I am a ";
	}

	67% {
		content: "Hi, my name is Kush, and I am a b";
	}

	69% {
		content: "Hi, my name is Kush, and I am a br";
	}

	71% {
		content: "Hi, my name is Kush, and I am a bro";
	}

	73% {
		content: "Hi, my name is Kush, and I am a brok";
	}

	76% {
		content: "Hi, my name is Kush, and I am a broke";
	}

	78% {
		content: "Hi, my name is Kush, and I am a brok";
	}

	80% {
		content: "Hi, my name is Kush, and I am a bro";
	}

	82% {
		content: "Hi, my name is Kush, and I am a br";
	}

	84% {
		content: "Hi, my name is Kush, and I am a b";
	}

	85% {
		content: "Hi, my name is Kush, and I am a ";
	}

	87% {
		content: "Hi, my name is Kush, and I am a c";
	}

	89% {
		content: "Hi, my name is Kush, and I am a co";
	}

	90% {
		content: "Hi, my name is Kush, and I am a coll";
	}

	91% {
		content: "Hi, my name is Kush, and I am a colle";
	}

	92% {
		content: "Hi, my name is Kush, and I am a colleg";
	}

	93% {
		content: "Hi, my name is Kush, and I am a college";
	}

	94% {
		content: "Hi, my name is Kush, and I am a college ";
	}

	95% {
		content: "Hi, my name is Kush, and I am a college s";
	}

	96% {
		content: "Hi, my name is Kush, and I am a college st";
	}

	97% {
		content: "Hi, my name is Kush, and I am a college stud";
	}

	98% {
		content: "Hi, my name is Kush, and I am a college stude";
	}

	99% {
		content: "Hi, my name is Kush, and I am a college studen";
	}

	100% {
		content: "Hi, my name is Kush, and I am a college student,";

	}

}



/* Hi my name is Kush, and I am a broke college student.

*/

/* Home section of the thing*/

/*The side line*/



.line_leftside {
	position: absolute;
	margin-top: 20px;
	margin-left: 100px;
	/*min, val,max*/
	border-left: 2px solid whitesmoke;
	height: 5200px;
	z-index: 40;
}

@media (max-width: 1280px) {

	.line_leftside {

		margin-left: 20px;
	}
}

.hide {
	position: absolute;
	display: flex;

	opacity: 0;
	visibility: hidden;
	width: 250px;
	height: 100px;
	left: 20px;
	top: -40px;
	border-radius: 20px;

	background-color: whitesmoke;



}

.circle {

	position: absolute;
	width: 20px;
	height: 20px;

	border-top-right-radius: 20px;
	border-bottom-right-radius: 20px;
	background-color: whitesmoke;


}

#circle1 {

	top: 200px;

}

#circle2 {

	top: 500px;
}

#circle3 {

	top: 1450px;
}

#circle4 {

	top: 1700px;
}

#circle5 {

	top: 2900px;
}

#circle6 {

	top: 3500px;
}

.circle:hover .hide {

	display: flex;
	opacity: 100%;
	visibility: visible;
	text-align: center;
	justify-content: center;
	align-items: center;

	transition: .4s;
}


.circle:hover {
	transition: .2s;
	border-radius: 0px;

}

/*Parent of Title[0]*/
.homeTitle {

	position: relative;

	margin-right: 100px;
	margin: 0 auto;
	max-width: 1100px;
	height: 50px;

	/* border: 1px solid;
	border-color: red; */
	color: black;

}

.main_home {

	display: flex;
	position: relative;

	margin-right: 100px;
	margin: 0 auto;
	max-width: 1000px;
	height: 600px;

	/* background-color: white; */
	/* border: 1px solid;
	border-color: red; */
	/* color: black; */


	/* left: 50%;
	transform: translate(-50%, -50%); */
}

/*Children of title[0]*/

#home_title {

	display: flex;
	width: 100%;
	justify-content: center;
	align-items: center;
	text-align: center;
	color: teal;

	font-size: 40px;


}

#home_title::after {

	content: '';
	border-top: 2px solid;
	margin: 0 300px 0 100px;
	flex: 1 0 20px;

	color: whitesmoke;

}

#home_main {

	font-size: 25px;

	position: relative;
	display: flex;
	width: 700px;
	height: 400px;
	color: black;
	text-align: center;
	justify-content: center;
	align-items: center;


	padding-left: 50px;
	padding-right: 50px;

	border-radius: 50px;
	background-color: whitesmoke;
	margin: 50px 0px 150px 150px;
}

#home_movie {

	position: absolute;
	display: flex;
	bottom: 0px;
	left: 150px;



}

#home_music {

	position: absolute;
	display: flex;
	right: 150px;
	bottom: 0px;
}

#home_button {

	width: 440px;
	height: 125px;
	border-style: solid;
	border-color: teal;
	border-radius: 60px;
	color: black;
	background-color: whitesmoke;
	font-size: 22px;


	transition-duration: .4s;
}


#home_button2 {

	width: 240px;
	height: 125px;
	border-radius: 60px;
	border-color: teal;
	border-style: solid;
	color: black;
	background-color: whitesmoke;
	font-size: 22px;


	transition-duration: .4s;
}

#home_button:hover,
#home_button2:hover {

	transition: .3s;
	border: solid teal;
	border-width: 7px;
}

/*Projects sidee*/

/*title*/

.projectTitle {

	overflow: auto;
	margin: 0 auto;
	max-width: 1100px;
	height: 50px;
	margin-top: 500px;

	/* border: 1px solid;
	border-color: red; */
	color: black;

}

#project_title {

	display: flex;
	width: 100%;
	justify-content: center;
	align-items: center;
	text-align: center;
	color: #008080;

	font-size: 40px;
}

#project_title::after {

	content: '';
	border-top: 2px solid;
	margin: 0 300px 0 127px;
	flex: 1 0 20px;

	color: whitesmoke;

}

/*Content so this is the childrens*/

.main_project {

	margin-top: 150px;
	position: relative;

	margin-right: 100px;
	margin: 0 auto;
	max-width: 1000px;
	height: 1000px;

	/* border-style: dashed;
	border-color: red; */

	overflow: auto;

}

.childrens {

	font-size: 22px;
	display: block;
}

#box1 {

	position: relative;

	width: 700px;
	height: 200px;
	color: black;
	text-align: center;
	align-items: center;

	border: solid teal;
	border-radius: 60px;
	background-color: whitesmoke;
	margin: 50px 0px 0px 150px;

}


#box1:hover,
#box2:hover,
#box3:hover {

	transition: .4s;
	border: solid teal;
	border-width: 10px;
}


#box1_title {

	position: relative;
	display: flex;
	top: 50%;
	transform: translateY(-50%);

	text-align: center;
	justify-content: center;
	align-items: center;

	margin-left: 40px;

	width: 200px;
	height: 120px;

	font-size: 25px;
	color: whitesmoke;

	border-radius: 40px;
	background-color: teal;


}

#box1_para {

	position: relative;
	display: flex;
	font-size: 18px;

	width: 400px;
	height: 150px;
	transform: translateY(-65%);

	margin-left: 250px;

	justify-content: center;
	align-items: center;


	color: black;
	text-align: center;


}

#box2 {

	position: relative;

	width: 700px;
	height: 200px;
	color: black;



	border: solid teal;
	/* padding-left: 50px;
	padding-right: 50px; */

	border-radius: 60px;
	background-color: whitesmoke;
	margin: 50px 0px 0px 150px;
}


#box3 {

	position: relative;

	width: 700px;
	height: 200px;
	color: black;
	text-align: center;
	align-items: center;


	border: solid teal;

	/* padding-left: 50px;
	/* padding-right: 50px; */

	border-radius: 60px;
	background-color: whitesmoke;
	margin: 50px 0px 0px 150px;
}


#box4 {

	position: relative;
	display: flex;
	width: 100px;
	height: 70px;
	color: black;

	/* padding-left: 50px;
	padding-right: 50px; */
	align-items: center;
	justify-content: center;

	border-radius: 60px;
	background-color: whitesmoke;
	margin: 0 auto;
	margin-top: 50px;


}

#box4:hover {
	transition-duration: .4s;
	background-color: teal;
}




/*This is for the skills part of the webpage*/

.skillsTitle {

	overflow: auto;
	margin: 0 auto;
	max-width: 1100px;
	height: 50px;
	margin-top: 500px;

	/* border: 1px solid;
	border-color: red; */
	color: black;

}

#skills_title {

	display: flex;
	width: 100%;
	justify-content: center;
	align-items: center;
	text-align: center;
	color: teal;

	font-size: 40px;
}

#skills_title::after {

	content: '';
	border-top: 2px solid;
	margin: 0 300px 0 127px;
	flex: 1 0 20px;

	color: whitesmoke;

}

/*Skills Title^^*/

/*Page Content Title^^*/

.main_skills {

	margin-top: 150px;
	position: relative;

	margin-right: 100px;
	margin: 0 auto;
	max-width: 1000px;
	height: 1000px;

	/* border-style: dashed;
	border-color: red; */

	overflow: auto;

}

.skills_para {

	position: relative;
	display: flex;

	background-color: whitesmoke;
	border-bottom: 9px solid teal;

	border-top-right-radius: 60px;
	border-top-left-radius: 60px;
	margin: 0 auto;
	margin-top: 50px;


	width: 700px;
	height: 350px;
}

.skills_topleft {

	display: flex;

	text-align: right;
	align-items: center;
	justify-content: center;
	border-radius: 60px;

	font-size: 22px;
	top: 0px;
	border: 10px red;
	width: 350px;
	height: 350px;

}

.skills_topright {

	display: flex;

	text-align: center;
	align-items: center;
	justify-content: center;
	border-radius: 60px;

	font-size: 22px;
	top: 0px;
	border: 10px red;
	width: 350px;
	height: 350px;

}

.skills_bottom {

	position: relative;
	display: flex;

	background-color: whitesmoke;
	border-bottom-right-radius: 60px;
	border-bottom-left-radius: 60px;
	margin: 0 auto;


	width: 700px;
	height: 500px;
}



.skills_topicons {

	height: 100px;
	width: 100px;
}

#skills_toptext {
	
}

#skills_toprightinside {

	list-style-type: none;

}

.progressbar {

	position: relative;
	display: flex;
	border-style: solid;
	border-color: teal;
	border-radius: 13px;

	justify-content: left;

	margin-left: 25px;
	margin-right: 25px;

	margin-top: 23px;
	margin-bottom: 20px;

	width: 300px;
	height: 20px;
	list-style: none;
}

.progressbarfillJava {

	border-radius: 13px;
	width: 50%;
	background-color: teal;
	color: teal;

}

.progressbarfillJavascript {

	border-radius: 13px;
	width: 75%;
	background-color: teal;
	color: teal;

}

.progressbarfillassembly {

	border-radius: 13px;
	width: 40%;
	background-color: teal;
	color: teal;

}

.progressbarfillhtml {

	border-radius: 13px;
	width: 90%;
	background-color: teal;
	color: teal;
}

.progressbarfillcss {

	border-radius: 13px;
	width: 90%;
	background-color: teal;
	color: teal;
}

#list {

	list-style: none;
	margin: 17px 0;
}

.skills_iconsleft {

	display: flex;

	text-align: right;
	align-items: center;
	justify-content: center;
	border-radius: 60px;

	font-size: 22px;
	top: 0px;
	width: 350px;
	height: 450px;
}

.skills_iconsright {

	display: flex;

	text-align: center;
	align-items: center;
	justify-content: center;
	border-radius: 60px;

	top: 0px;
	width: 350px;
	height: 450px;
}

.skills_topleft,
.skills_topright {

	display: inline-grid;
}

.skills_iconsleft,
.skills_iconsright {

	display: inline-grid;

}

.skillsimages {

	height: 100px;
	width: 100px;

}

.skills_iconsinside {

	position: relative;
	display: flex;
	font-size: 20px;
	text-align: center;
	justify-content: left;
	align-items: center;

}

.skills_iconsinside2 {

	position: relative;
	display: flex;
	font-size: 20px;
	text-align: center;
	justify-content: left;
	align-items: center;

}

/*Contact Title*/

.contactTitle {

	overflow: auto;
	margin: 0 auto;
	max-width: 1100px;
	height: 50px;
	margin-top: 500px;

	/* border: 1px solid;
	border-color: red; */
	color: black;

}

#contact_title {

	display: flex;
	width: 100%;
	justify-content: center;
	align-items: center;
	text-align: center;
	color: teal;

	font-size: 40px;
}

#contact_title::after {

	content: '';
	border-top: 2px solid;
	margin: 0 300px 0 127px;
	flex: 1 0 20px;

	color: whitesmoke;

}

/*Contact Title End*/

/*Contact section of the website*/

.main_contact {

	margin-top: 150px;
	position: relative;

	margin-right: 100px;
	margin: 0 auto;
	max-width: 1000px;
	height: 900px;

	/* border-style: dashed;
	border-color: red; */

	overflow: auto;

}

.contact_para {

	position: relative;
	display: flex;

	background-color: whitesmoke;

	border-radius: 60px;

	/* border-style: dashed;
	border-color: red; */

	margin: 0 auto;
	margin-top: 50px;

	width: 700px;
	height: 150px;

	justify-content: center;
	text-align: center;
	align-items: center;

}

.contactimages {

	height: 64px;
	height: 64px;
}

.child {

	margin: 0 auto;
	display: flex;
	border: solid;
	border-radius: 35px;

	justify-content: center;
	align-items: center;
}

#gmail {
	width: 110px;
	height: 90px;
}

#gmail:hover {

	background-color: teal;
	transition: .3s;

}

#resume {

	width: 160px;
	height: 90px;

	font-size: 22px;
}

#resume:hover {

	background-color: teal;
	transition: .3s;
}

#github {

	width: 110px;
	height: 90px;
}

#github:hover {

	background-color: teal;
	transition: .3s;
}

.locationimage {

	margin: 0 auto;
	margin-top: 50px;

	width: 550px;
	height: 400px;
	background-color: teal;
	border-radius: 60px;


}

.locationimageinside {

	height: 400px;
	width: 550px;
	border-radius: 60px;
	opacity: .7;
}


#footer {

	display: flex;
	width: 100%;
	height: 150px;
	background-color: whitesmoke;
	justify-content: center;
	align-items: center;
	text-align: center;

}

/*End of index page/ Start of playlist page*/

.playlistTitle {

	overflow: auto;
	margin: 0 auto;
	max-width: 1100px;
	height: 50px;
	margin-top: 50px;

	/* border: 1px solid;
	border-color: red; */
	color: black;

}

#playlist_title {

	display: flex;
	width: 100%;
	justify-content: center;
	align-items: center;
	text-align: center;
	color: #008080;

	font-size: 40px;
}

#playlist_title::after {

	content: '';
	border-top: 2px solid;
	margin: 0 300px 0 127px;
	flex: 1 0 20px;

	color: whitesmoke;

}

.main_playlist {

	margin-top: 150px;
	position: relative;

	margin-right: 100px;
	margin: 0 auto;
	max-width: 1000px;
	height: 900px;

	/* border-style: dashed;
	border-color: red; */

	margin-bottom: 300px;
}

.playlistcontent {

	position: relative;
	display: flex;

	background-color: whitesmoke;

	border-radius: 60px;

	/* border-style: dashed;
	border-color: red; */

	margin: 0 auto;
	margin-top: 50px;

	width: 700px;
	height: 800px;

	justify-content: center;
	text-align: center;
	align-items: center;

}

#spotify {

	width: 600px;
	height: 700px;

	border-radius: 60px;
}