@import url('https://fonts.googleapis.com/css2?family=Bellota+Text:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');


@import url('https://fonts.googleapis.com/css2?family=Bellota+Text:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Shadows+Into+Light+Two&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Beth+Ellen&family=Delius+Swash+Caps&family=Gochi+Hand&family=Qwitcher+Grypen:wght@400;700&family=Sofia&display=swap');


@import url('https://fonts.googleapis.com/css2?family=Cal+Sans&display=swap');


* {box-sizing:border-box;}


body {
	background-color: 	white;
	font-family: 		Bellota Text,  Arial, Verdana, sans-serif; 
	margin:				0px;
}

body a {
	text-decoration: 	none;
	color:				white;
}

body a:hover {
	text-decoration: underline solid 2px;
	text-underline-offset: 0.3em;
}

#logo {
	position:			absolute;
	top:				100px;
	left:				30px;
	z-index:			100;
	background-image:	url("images/newicon.png");
	background-size:	cover;
	width:				100px;
	height:				100px;
	opacity:			0.0;
	cursor: 			pointer;
}

#title {
	position:			absolute;
	top:				103px;
	left:				130px;
	height:				100px;
	z-index:			100;
	font-family: 		Cal Sans, Bellota Text, Shadows Into Light Two,  Arial, Verdana, sans-serif; 
	color:				white;
	padding-left:		25px;
	padding-top:		10px;
	font-size:			25px;
	text-shadow: 		2px 2px 5px black;
	opacity:			0.0;
}

/* drop down menu for small screens ----------------------------- */
button {
	font-family:		Bellota Text,  Arial, Verdana, sans-serif; 
}

#menubuttonwrapper {
	width:				100%;
	height:				60px;
	position:			absolute;
	top:				5px;
	padding-right:		20px;
	text-align:			right;
	z-index:			101;
	border:				solid 0px red;
	display:			none;
}
#dropdownmenubutton {
	width:				60px;
	height:				60px;
	background-image: 	url("images/menuicon.png");
	background-size: 	cover;
	border: 			none;
	cursor: 			pointer;
	background-color: 	transparent;
}

/* from W3 Schools */


/* The container <div> - needed to position the dropdown content */
.dropdown {

	position: 			relative;
	display: 			inline-block;
  
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
	
	top: 				70px;
	width:				200px;
	display: 			none;
	position: 			absolute;
	background-color: 	#f1f1f1;
	min-width: 			160px;
	box-shadow: 		0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 			102;
}

/* Links inside the dropdown */
.dropdown-content a {
	color: 				black;
	padding: 			12px 16px;
	text-decoration: 	none;
	display: 			block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
	background-color: 	#c6d9ec;
	text-decoration:	none;}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}



.textBorder_black {
	border: 			1px solid white;
	padding:			10px 20px 10px 20px;
	border-radius:		10px;
}


/* ------------------------------------------------------------- */

#wrapper {
	position:			relative;
	background-color: 	white;
	position: 			relative;
	
}

#nav_bg {
	position: 			absolute;
	top:				0px;
	left:				0px;
	width:				100%;
	height:				70px;
	padding-top:		30px;
	text-align:			center;
	background-color: 	#8cb3d9; 
	z-index:			50;
	opacity:			1;
	border-top: 		0px solid #1d4062;
	/*border-bottom: 		7px solid white;  #ffc266; */
}
#nav_container {
	position: 			absolute;
	top:				0px;
	left:				0px;
	width:				100%;
	height:				70px;
	padding-top:		30px;
	text-align:			center;
	z-index:			50;
	opacity:			1.0;
	border-bottom: 		5px solid white;
}

nav {
	font-family:		Cal Sans, Arial;
	width:				450px;
	margin: 			auto;
	padding:			auto;
	font-size:			13px;
	color:				orange; /* #cccc00; */
	border: 			solid 0px white;


}

nav ul {
	list-style-type: 	none;
	display: 			flex;
	flex-direction: 	row;
	margin: 			auto;
	padding-left: 		0;
	padding-right: 		0;
	
}
nav li {
	padding: 			5px 10px 5px 10px;
	/* margin:				0; */
	/* padding: 0.5em 1 em 0.5em 1em; */
	
	text-align:			center;
}
nav a {
	text-decoration: 	none;
	color:				black; /* #ffffb3; */
}

nav a:link {
	color: 				white; /* #ffffb3; */
}
nav a:visited {
	color: 				white; /* #ffffb3; */
}

nav a:hover {
	color: 			 	#ffff66; 
	text-decoration: 	underline solid 5px #ff5c33;
	text-underline-offset: 1.35em; 
	
}	


#contactButton {
	border:				0;
	font-family: 		Cal Sans, Bellota Text,  Arial, Verdana, sans-serif;
	background:			#ffcc00; /* #cccc00; */
	font-size:			11px;
	color:				#333300;
	border-radius:		10px;
	width:				125px;
	cursor:				pointer;
}
#contactButton:hover {
	background:			#ffff66;
}

/* ---------------------- kp info -------------------------- */

#aboutmediv {
	position:			relative;
	margin-top:			40px;
	background-color: 	#76a6d6;
	text-align:			center;
	width:				100%;
	z-index:			10;
	opacity:			1;

	align-items: 		center;
	font-size:			16px;
	color: 				lightblue;
	
	border: 			0px solid red;
	padding-bottom:		10px;
	opacity:			0;
}


#aboutmetitle_wrapper {
	display: flex;
	position:			relative;
	border:				solid 0px red;
	width:				250px; 
	height:				60px;
	top:				-30px;
	left:				20%;
	z-index:			20;
}
#aboutme_circle {
	position:			relative;
	border:				solid 0px #264d73;
	width:				60px; 
	height:				60px;
	border-radius: 		50%;
	background: 		#4080bf;
	z-index:			10;
	display:			grid;
	padding-left:		15px;
	text-align:			center;
	align-items: 		center;
	color:				#cccc00;
	transition:			background-color 0.5s linear;
	box-shadow:			0px 0px 0px 20px rgba(121, 166, 210,.5);
	animation: 			pulse 2s infinite;
}

#aboutme_circle:hover {
	background: 		#66ffff;	
}

#aboutme_title {
	position: 			relative;
	float: 				left;
	border:				solid 0px #264d73;
	width:				190px; 
	height:				40px;
	top:				30px;

	text-align:			left;
	align-items: 		center;
	padding-left:		30px;
	padding-top:		10px;
	color:				black;
	font-size:			15px;
	font-family: 		Cal Sans, Bellota Text,  Arial, Verdana, sans-serif; 
	/* text-shadow: 		1px 1px 2px black; */
}

#aboutme_content {
	
	position:			relative;
	border:				solid 1px #76a6d6;
	width:				50%; 

	left:				25%;
	top:				0px;
	z-index:			9;
	text-align:			center;
	color:				black;
	font-size:			14px;
	
}

#moreaboutme_content {
	
	position:			relative;
	border:				solid 1px #76a6d6;
	width:				50%; 
	background-color:	#76a6d6;
	left:				25%;
	top:				0px;
	z-index:			9;
	text-align:			center;
	color:				black;
	font-size:			14px;
	
}

#moreaboutme_content_img {
	margin:				auto;
	width:				200px;
	height:				200px;
	border-radius:		50%;
	border:				10px solid #adc2eb;
	padding:			10px;
	background:			url('images/coralimg.jpg');
	background-size: 	200px;
	transition: 		all 1s ease-in-out;
	cursor:				pointer;
}


#moreaboutme_content_img:hover {
	background-size:	180%;
}
/* css for images in About Me section */

.leftAboutMeImage{
	float: left;
	margin-right: 20px;
	margin-bottom: 10px;
	margin-top: 10px;
	width: 35%;
	max-width: 325px;
	min-width: 200px;
	border-radius: 20px 20px;
	border: solid 0px #dddcb1;
}
.rightAboutMeImage{
	float: right;
	margin-left: 20px;
	margin-bottom: 10px;
	margin-top: 10px;
	width: 35%;
	max-width: 325px;
	min-width: 200px;
	border-radius: 20px 20px;
	border: solid 0px #dddcb1;
}
.leftVertAboutMeImage{
	float: left;
	margin-right: 20px;
	margin-bottom: 10px;
	margin-top: 10px;
	width: 25%;
	max-width: 225px;
	min-width: 135px;
	border-radius: 20px 20px;
	border: solid 0px #dddcb1;
}
.rightVertAboutMeImage{
	float: right;
	margin-left: 20px;
	margin-bottom: 10px;
	margin-top: 10px;
	width: 25%;
	max-width: 225px;
	min-width: 135px;
	border-radius: 20px 20px;
	border: solid 0px #dddcb1;
}



#footerdiv {
	position:			relative;
	padding:			15px;
	top:				0px;
	background-color: 	#17334f;
	text-align:			center;
	line-height:		8px;
	height:				100px;
	width:				100%;
	z-index:			5;
	opacity:			0.0;
	text-align:			center;
	align-items: 		center;
	font-size:			12px;
	color: 				lightblue;
}

#footerdiv img {
	width:				20px;
	height:				20px;
	margin-left:		10px;
	margin-right:		10px;
}
#footerdiv a {
	text-decoration: 	none;
}

#footerdiv a:link {
	color: 				#ffffcc;
}
#footerdiv a:hover {
	color: 				white;
	text-decoration: 	underline;
	text-underline-offset: 0.3em; 
}
#footerdiv a:visited {
	color: 				#ffffcc;
}
	


#homehero {
	position: 			absolute;
	top:				0px;
	left:				0px;	
	background-color: 	white;
	height: 			350px;
	width:				100%;
	background-image: 	linear-gradient(to bottom, rgb(0, 26, 51, 0.7), rgb(0, 53, 102, 0.2), rgb(255, 255, 255, 0), rgb(255, 255, 255, 0), rgb(255, 255, 255, 0)), url("images/indexbg.jpg");
	background-size: 	2000px;
	background-position:	center 0px;
	background-repeat: 	no-repeat;
	background-attachment: fixed;
	z-index:			1;
	
}
#herocurve {
	position: 			absolute;
	top:				-90px;
	left:				0px;
	
	width: 				100%;
	height: 			60px;

	background-image:	url("images/herocurve.png");
	background-size: 	100% 100%;
	background-repeat: 	no-repeat;
	z-index:			5
}
#content {
	position: 			absolute;
	top:				-30px;
	left:				0px;
	width: 				100%;

	background-color:	white;
	background-size: 	100%;
	background-repeat: 	no-repeat;
	z-index:			6;
	border: 			solid 0px green;
	padding:			auto;
}
#content_wrapper{
	position: 			relative;
	display: 			flex;
	flex-wrap: 			nowrap;
	
	
	/* ************** width:				785px; */
	max-width:			1000px;
	min-height:			500px;
	background-color:	white;
	background-size: 	100%;
	background-repeat: 	no-repeat;
	z-index:			7;
	margin: 			0 auto;
	border: 			solid 0px red;
}
#left_content {
	
	position: 			relative;
	max-width: 			40%; /* 60%; */

	background-color:	white;
	background-size: 	100%;
	background-repeat: 	no-repeat;
	z-index:			7;
	margin: 			0 auto;
	border: 			solid 0x blue;
	padding-top:		50px;
	padding-left: 		20px;
	padding-right: 		30px;
	text-align: 		justify;
	opacity:			0;
}

#right_content {

	position: 			relative;
	float: 				left;
	width: 				50%;
	max-width:			450px;
	min-width:			400px;				
	height: 			100%;
	background-color:	white;
	background-size: 	100%;
	background-repeat: 	no-repeat;
	z-index:			7;
	margin: 			0 auto;
	border: 			solid 0px purple;
	opacity:			0;
}

#msgdisplay_circle {

	position:			absolute;
	border:				solid 0px #264d73;
	width:				200px; 
	height:				200px;
	top:				165px;
	left:				172px;
	border-radius: 		50%;
	background: 		rgb(255, 165, 0);
	/* background-image: 	linear-gradient(to bottom, rgb(0, 0, 153, 0.4), rgb(0, 0, 153, 0.2)); */
	z-index:			12;
	text-align:			center;
	margin: 			auto;
	display: 			grid;
	align-items: 		center;
	font-size: 			18px;
	box-shadow:			0px 0px 0px 20px rgba(255, 165, 0,.4);
}


#prog_circle {
	position:			absolute;
	border:				solid 0px #264d73;
	width:				160px; 
	height:				160px;
	top:				210px;
	left:				15px;
	border-radius: 		50%;
	background: 		#244f7a; /* #264d73; */
	/* background-image: 	linear-gradient(to bottom, rgb(82, 82, 122, 0.8), rgb(38, 77, 115, 0.5)), url("images/codingbg.png"); */
	background-size:	cover;
	z-index:			9;
	display: 			grid;
	text-align:			center;
	align-items: 		center;
	color:				#ffffb3;
	transition:			background-color 0.5s linear; 
	box-shadow:			0px 0px 0px 20px rgba(38, 77, 115,.3);
}	

#prog_circle:hover {
	background-color:	 #b38600;
	cursor: 			pointer;
	
}

#hobbies_circle {
	position:			absolute;
	border:				solid 0px #264d73;
	width:				140px; 
	height:				140px;
	top:				340px;
	left:				113px;
	border-radius: 		50%;
	background: 		#009900;
	/* background-image: 	url("images/hobbiesbg.jpg"); */
	/* background-image: 	linear-gradient(to bottom, rgb(38, 77, 115, 0.6), rgb(38, 77, 115, 0.3)), url("images/hobbiesbg.jpg"); */
	background-size:	cover;
	z-index:			10;
	text-align:			center;
	display: 			grid;
	align-items: 		center;
	color:				#ffffb3;
	transition:			background-color 0.5s linear; 
	box-shadow:			0px 0px 0px 20px rgba(0, 153, 0,.3);
}	

#hobbies_circle:hover {
	background-color:	#ff704d;
	cursor: 			pointer;
}

#kp_circle {
	position:			absolute;
	border:				solid 0px #264d73;
	width:				110px; 
	height:				110px;
	top:				58px;
	left:				193px;
	border-radius: 		50%;
	background: 		white;
	background-image: 	linear-gradient(to bottom, rgb(230, 77, 0, 0.0), rgb(230, 77, 0, 0.0), rgb(230, 77, 0, 0.3)), url("images/kplogobw.png");
	background-size:	cover;
	z-index:			11;
	cursor: 			pointer;
	/* animation: 			pulse 2s infinite; */
	box-shadow:			0px 0px 0px 20px rgba(255, 92, 51,.4);
}

#kp_circle:hover {
	box-shadow:			0px 0px 0px 20px rgba(230, 230, 0,.5);
}
#facebook_circle {
	position:			absolute;
	border:				solid 0px #264d73;
	width:				80px; 
	height:				80px;
	top:				103px;
	left:				300px;
	border-radius: 		50%;
	background: 		#cc33ff;
	z-index:			9;
	text-align:			center;
	display: 			grid;
	align-items: 		center;
	padding-left:		23px;
	color:				#cccc00;
	transition:			background-color 0.5s linear;
	box-shadow:			0px 0px 0px 20px rgba(204, 51, 255,.3);
}

#facebook_circle:hover {
	background-color:	#999900;
	cursor: 			pointer;
}

#linkedin_circle {
	position:			absolute;
	border:				solid 0px #ff3385;
	width:				50px; 
	height:				50px;
	top:				34px;
	left:				306px;
	border-radius: 		50%;
	background: 		rgb(255, 0, 102);
	z-index:			9;
	text-align:			center;
	display: 			grid;
	align-items: 		center;
	padding-left:		13px;
	color:				#cccc00;
	transition:			background-color 0.5s linear;
	box-shadow:			0px 0px 0px 20px rgba(255, 0, 102,.3);	
}

#linkedin_circle:hover {
	background-color:	#ff9900;
	cursor: 			pointer;
}



#quicklinkssection {
	position:			relative;
	margin-top:			0px;
	background-color: 	#b3cde5;
	text-align:			center;
	width:				100%;
	z-index:			10;
	align-items: 		center;
	font-size:			16px;
	color: 				black;
	background-size:	1200px;
	border: 			1px solid #b3cde5;
	padding-bottom:		0px;
	opacity:			0;
}

#quicklinkspanel {

	position: 			relative;
	display: 			flex;
	flex-wrap: 			wrap;
	max-width:			685px;
	width:				80%;
	background-repeat: 	no-repeat;
	z-index:			7;
	margin: 			0 auto;
	border: 			solid 0px red;
	margin-bottom:		20px;
	align-items:		center;
}

.quicklinkwrapper_orange {

	border: 			solid 0px blue;
	top: 				0px;
	width:				150px;
	height:				250px;
	margin: 			10px 10px 10px 10px;
	border-top-left-radius: 50px;
	border-bottom-right-radius: 50px;
	background: 		white;
	cursor:				pointer;
}
.quicklinkwrapper_orange:hover {
	/* box-shadow: 		-4px 4px 0px 4px rgba(255, 194, 102, 0.8); */
	box-shadow: 		0px 0px 0px 10px rgba(255, 194, 102, 0.8);
}

.quicklinkwrapper_green {
	border: 			solid 0px blue;
	top: 				0px;
	width:				150px;
	height:				250px;
	margin: 			10px 10px 10px 10px;
	border-top-left-radius: 50px;
	border-bottom-right-radius: 50px;
	background: 		white;
	cursor:				pointer;
}
.quicklinkimg_green {
	border: solid 0px green;
	width:	150px;
	height: 140px;
	padding-top:	20px;
	border-top-left-radius: 50px;
	background-color: #ccffcc;
	
}
.quicklinkwrapper_green:hover {
	box-shadow: 		0px 0px 0px 10px rgba(179, 255, 179, 0.8);
}
.quicklinkwrapper_pink {

	border: 			solid 0px blue;
	top: 				0px;
	width:				150px;
	height:				250px;
	margin: 			10px 10px 10px 10px;
	border-top-left-radius: 50px;
	border-bottom-right-radius: 50px;
	background: 		white;
	cursor:				pointer;
}
.quicklinkwrapper_pink:hover {
	box-shadow: 		0px 0px 0px 10px rgba(255, 128, 193, 0.5);
}
.quicklinkwrapper_blue {

	border: 			solid 0px blue;
	top: 				0px;
	width:				150px;
	height:				250px;
	margin: 			10px 10px 10px 10px;
	border-top-left-radius: 50px;
	border-bottom-right-radius: 50px;
	background: 		white;
	cursor:				pointer;
}
.quicklinkwrapper_blue:hover {
	box-shadow: 		0px 0px 0px 10px rgba(122, 167, 209, 0.7);
}

.quicklinkimg {
	border: solid 0px green;
	width:	150px;
	height: 140px;
	padding-top:	20px;
	border-top-left-radius: 50px;
	
	
}

.quicklinkimg_orange {
	border: solid 0px green;
	width:	150px;
	height: 140px;
	padding-top:	20px;
	border-top-left-radius: 50px;
	background-color: #ffebcc;
	
}

.quicklinkimg_pink {
	border: solid 0px green;
	width:	150px;
	height: 140px;
	padding-top:	20px;
	border-top-left-radius: 50px;
	background-color: #ffcce6;
	
}
.quicklinkimg_blue {
	border: solid 0px green;
	width:	150px;
	height: 140px;
	padding-top:	20px;
	border-top-left-radius: 50px;
	background-color:	#cce6ff;
	
}

.quicklinkimg img {
	border-top-left-radius: 50px
}
.quicklinktext {
	border: solid 0px purple;
	width:	150px;
	height:	110px;
	border-bottom-right-radius: 50px;
	text-align:	left;
	padding: 10px;
	background-color:		#c6d9ec;
}

#mainlinkspanel {
	border: 			1px solid blue;
	width:				500px;
	top:				0;
	left:				0;
	padding:			20px;
	padding-left:		50px;
	margin-top:			10px;
	margin-bottom:		10px;
	text-align:			left;
	background-color:	#ffcc33;
	border-top-right-radius:	100px;
	/* border-bottom-left-radius:	100px; */
}



/* CSS code for pulsing icon ******************* */

/* pulse logo *****************************   red: 255,4,0 */
@keyframes pulse {
   0%
  {
    box-shadow: 0px 0px 0px 20px rgba(64, 128, 191,.3), 0 0 0 50px rgba(64, 128, 191,.3), 0 0 0 0 rgba(64, 128, 191,1);
  }
    40%
  {
    box-shadow: 0px 0px 0px 20px rgba(64, 128, 191,.3),0 0 0 0 rgba(64, 128, 191,0), 0 0 0 40px rgba(64, 128, 191,0);
  }
    80%
  {
    box-shadow: 0px 0px 0px 20px rgba(64, 128, 191,.3),0 0 0 0px rgba(64, 128, 191,0), 0 0 0 30px rgba(64, 128, 191,0);
  }
    100%
  {
    box-shadow: 0px 0px 0px 20px rgba(64, 128, 191,.3),0 0 0 20px rgba(64, 128, 191,.4), 0 0 0 60px rgba(64, 128, 191,0);
  }
}


#pulseicon {
	float: left;
	animation: pulse 2s infinite;
	border: solid 5px #dddcb1;
	border-radius: 50%;
	width: 80px;
	margin-right: 20px;
	margin-bottom: 10px;
}

/* end of pulsing icon CSS codes **************************** */


@media only screen and (max-width: 860px) {	
	#quicklinkspanel {
		max-width:	350px;
	}
}

/* ******************************** */
@media only screen and (max-width: 700px) {
	#content {
		display: 		flex;
		flex-wrap: 		wrap;

	}
	#content_wrapper{
		display: 		flex;
		flex-wrap: 		wrap;
		margin: 		auto;
	}
	#left_content {
		max-width: 		90%;
		padding-top: 	20px;
		text-align: 	left;
	}
	#right_content {
		height:			500px;
		margin-bottom:	20px;		
	}
	
	#aboutme_content, #moreaboutme_content {
		width:			80%;
		left:			10%;
	}
	
}
@media only screen and (max-width: 600px) {
	#menubuttonwrapper { /*  display the hamburger menu when the screen is <= 600px */
		display: 		inline; 
		top:			15px;
	}
	#dropdownmenubutton {
		width:			40px;
		height:			40px;
	}
	nav {
		display: 		none;
	}
	#content {
		display: 		flex;
		flex-wrap: 		wrap;

	}
	#content_wrapper{
		display: 		flex;
		flex-wrap: 		wrap;
		margin: 		auto;
	}
	#left_content {
		width: 			100%;
		padding-top: 	20px;
		text-align: 	left;
	}
	#right_content {
		height:			500px;
	}
	#right_content {
		margin-bottom:	20px;
	}
	
	
}

@media only screen and (max-width: 500px) {
	
	#right_content {
		margin-bottom:	20px;
	}
}

@media only screen and (max-width: 450px) {	
	/* re-arrange the circles to fit them on smaller screen */
	#hobbies_circle {
		top:				405px;
		left:				150px;
		width:				100px;
		height:				100px;
	}
	#facebook_circle {
		top:			92px;
		left:			238px;
	}
	#linkedin_circle {
		top:			22px;
		left:			248px;		
	}
	#msgdisplay_circle {
		top:			155px;
		left:			112px;
	}
	#prog_circle{
		width:			130px;
		height:			130px;
		top:			320px;
		left:			45px;
	}
	#kp_circle {
		top:			46px;
		left:			134px;;
	}
	#right_content {
		margin-bottom:	30px;
	}
	
	#quicklinkssection {
		display:		none;
	}
	
	#content {
		width:			100%;
	}
	#left_content {
		width:			100%;
	}
	#right_content {
		top:			30px;
		width:			100%;
		min-width:		300px;
		margin-bottom:	50px;
	}

}

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

	#left_content {
		width: 				325px;
		max-width: 			350px;
		min-width:			275px;
		margin-left:		10px;
	}
	
	#title {
		font-size:			20px;
	}

}