/* variables */

:root {

	--callout-shadow-color-inner: rgba(255,255,255,0.25);
	--callout-shadow-color-outer: rgba(255,255,255,0.25);

	--tooltip-shadow-width: 3px;
	--tooltip-background-color: #110000;

	--callout-shadow-width: 10px;
	--callout-background-color: rgba(98,14,14,0.75);
	--callout-background-color: rgba(102,12,11,0.75);
	--callout-background-color: rgba(11,11,33,0.85);

	--tooltip-background-color-blue: #000033;
	--tooltip-background-color-green: #003300;
	--tooltip-background-color-red: #330000;

	--sky-grad-top: rgba(6,6,6,0.5);
	--sky-grad-mid: rgba(10,22,74,0.5);
	--sky-grad-low: rgba(28,102,182,0.5);

}



		body {

			padding:0;
			margin:0;
			border:0;

			background: rgb(95, 54, 44);
			font-family: arial, helvetica, sans-serif;

			color: white;

			background: linear-gradient(
				to bottom,
				rgb(3,3,3) 0%,
				rgb(14,51,91) 60vh,
				rgb(102,12,11) 60vh,
				rgb(102,12,11) 100vh,
				rgb(22,0,22) calc(100vh + 90px),
				rgb(22,0,22) 100%
			);

			overflow-x: hidden;
			overflow-y: auto;

		}

		a {
			color: white;
		}
		a:hover {
			color: CornflowerBlue;
		}

#content {
	left: 0;
	right: 0;
	overflow-x: hidden;
	padding: 1em;
	width: 100vw;
	width: calc(100vw - 3em); /* WTF??? */

/* this might be updated, possibly with a brightness control bar
	background: rgb(71,79,70);
	background: rgb(102,182,28);
	background: rgb(10, 22, 11);
	background: rgb(33, 22, 11);
	background: rgb(31, 59, 21);
	background: #0D3a32;

	background: rgb(66,0,45);
	background: #0c0402;
	background: #2e2b26;
	background: #121112;
	background: #1d1e23;
	background: #0D3a32;
	background: rgb(33,4,6);

	background: #1d1e1c;
	background: rgb(10, 22, 11);
	background: rgb(22, 22, 22);
	background: rgb(22, 0, 22);
*/
	background: rgb(22, 0, 22);
}


/* star map */

		.star {
			position: absolute;
		}

		.star_container {
			padding:0;
			margin:0;
			border:0;

			overflow: hidden;
			position: absolute;

			top: 0;
			left: 0;
			right: 0;
			height: 60vh;
		}

		#earth {
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
		}
		#earth > img {
			width: 200px;
			height: 200px;
			max-height: 200px;
			max-width: 200px;
			height: min(50vh, 200px);
			width: min(50vh, 200px);
		}

		#star_map_rotating_bg_image {
			position: absolute;
			opacity: 0;
			transition: opacity ease 1s;
		}


		#star_map_bg_blur_layer {
			backdrop-filter: blur(15px); /* Apply blur effect to background */
			-webkit-backdrop-filter: blur(15px);
		}



		#star_map_sky_color_gradient {
			background: linear-gradient(to bottom, rgba(6,6,6,0.5), rgba(10,22,74,0.5), rgba(28,102,182,0.5));
			background: linear-gradient(to bottom, var(--sky-grad-top), var(--sky-grad-mid), var(--sky-grad-low));
		}


		#star_map_bright_star_container {
		}


		/* https://svs.gsfc.nasa.gov/4851/ */
		#star_map_bg_container {
			background-color: black;
		}


/* ground */

		#rock_container {
			width: 100vw;
			top: 60vh;
			height: 40vh;

			background: linear-gradient(180deg, rgba(222, 111, 91, 1) 0%, rgba(195, 77, 65, 1) 9%, rgba(171, 59, 44, 1) 19%, rgba(173, 40, 23, 1) 26%, rgba(205, 87, 71, 1) 34%, rgba(190, 54, 32, 1) 43%, rgba(173, 40, 23, 1) 55%, rgba(143, 32, 21, 1) 63%, rgba(128, 22, 14, 1) 70%, rgba(102, 12, 11, 1) 77%, rgba(171, 59, 44, 1) 87%, rgba(173, 40, 23, 1) 100%);

			background:
				linear-gradient(10deg, rgba(171,59,44, 0) 20%, rgba(171,59,44,.1) 20%, rgba(171,59,44,.1) 40%, rgba(171,59,44,.2) 40%, rgba(171,59,44,.2) 60%, rgba(171,59,44,.4) 60%, rgba(171,59,44,.4) 80%, rgba(171,59,44,.6) 80%),
				linear-gradient(-2deg, rgba(190, 54, 32, 0) 20%, rgba(190, 54, 32,.1) 20%, rgba(190, 54, 32,.1) 40%, rgba(190, 54, 32,.2) 40%, rgba(190, 54, 32,.2) 60%, rgba(190, 54, 32,.4) 60%, rgba(190, 54, 32,.4) 80%, rgba(190, 54, 32,.6) 80%),
				linear-gradient(180deg, rgba(222, 111, 91, .3) 0%, rgba(195, 77, 65, .4) 9%, rgba(171, 59, 44, .9) 19%, rgba(173, 40, 23, .7) 26%, rgba(205, 87, 71, .9) 34%, rgba(190, 54, 32, .6) 43%, rgba(173, 40, 23, 1) 55%, rgba(143, 32, 21, .8) 63%, rgba(128, 22, 14, .6) 70%, rgba(102, 12, 11, .8) 77%, rgba(171, 59, 44, .9) 87%, rgba(173, 40, 23, 1) 100%)
			;
		}

		/*
		 * Shadows on the ground to give it a bit of a more 3d look.
		 */
		#shadow_container {
			background-image: url('../img/ground_shadows.svg');
			top: 70vh;
			position: absolute;
			width: 100%;
			height: 15vh;
			opacity: 0.5;
			background-position: -20px center;
		}


/* tooltip / callout */

/*
 *
 * TOOLTIP
 *
 */
.tooltip_box {

	position: absolute;
	z-index: 100;

	visibility: hidden;
	opacity: 0;
	height: 0;

	font-size: 0.8em;

	-webkit-transform: translateY(-25px) scaleX(0);
	-khtml-transform: translateY(-25px) scaleX(0);
	-ms-transform: translateY(-25px) scaleX(0);
	transform: translateY(-25px) scaleX(0);

	transition: all 0.5s cubic-bezier(0,.72,.21,1);
    transition-property: transform, opacity, width, height, background-color, border-color, box-shadow;

	background-color: #111111;
	background-color: var(--tooltip-background-color);

	border-radius: 3px;
	padding:4px;

	-webkit-box-shadow: 0 0px 5px 0 rgba(255,255,255,0.25), 0 0px 5px 0 rgba(255,255,255,0.25);
	-moz-box-shadow: 0 0px 5px 0 rgba(255,255,255,0.25), 0 0px 5px 0 rgba(255,255,255,0.25);
	box-shadow: 0 0px 5px 0 rgba(255,255,255,0.25), 0 0px 5px 0 rgba(255,255,255,0.25);

	-webkit-box-shadow: 0 0px var(--tooltip-shadow-width) 0 var(--callout-shadow-color-inner), 0 0px var(--tooltip-shadow-width) 0 var(--callout-shadow-color-outer);
	-moz-box-shadow: 0 0px var(--tooltip-shadow-width) 0 var(--callout-shadow-color-inner), 0 0px var(--tooltip-shadow-width) 0 var(--callout-shadow-color-outer);
	box-shadow: 0 0px var(--tooltip-shadow-width) 0 var(--callout-shadow-color-inner), 0 0px var(--tooltip-shadow-width) 0 var(--callout-shadow-color-outer);

	filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10,MakeShadow=true,ShadowOpacity=0.20);
	-ms-filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10,MakeShadow=true,ShadowOpacity=0.20);
	margin: 0px;

	text-align: center;
	white-space: nowrap;
	pointer-events: none;

}

/* ::before top border is used as a shadow, or border, for the down arrow in ::after */
.tooltip_box::before {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	left: calc(50% - 4px);
	transform: translateX(-50%) ;
	border-width: 9px;
	border-style: solid;
	border-color: #ffffff transparent transparent transparent;
	border-top-width: 9px; /* Increase the border width to include the top border of the triangle */
	border-top-style: solid; /* Set the border style for the top border of the triangle */
	border-top-color: #ffffff;
	border-top-color: var(--callout-shadow-color-inner);
	pointer-events: none;
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
}

/* down arrow of tool tip, just the top border of a square. */
.tooltip_box::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	left: calc(50% - 4px);
	transform: translateX(-50%) ;
	border-width: 8px;
	border-style: solid;
	border-color: #111111 transparent transparent transparent;
	border-top-width: 8px; /* Increase the border width to include the top border of the triangle */
	border-top-style: solid; /* Set the border style for the top border of the triangle */
	border-top-color: #111111;
	border-top-color: var(--tooltip-background-color);
	pointer-events: none;
}


/*
 *
 * CALLOUT
 *
 */
.callout_box {

	position: absolute;
	z-index: 100;

	visibility: hidden;
	opacity: 0;
	height: 0;

	pointer-events: none;

	transition: all 0.5s cubic-bezier(0,.72,.21,1);
    transition-property: transform, opacity, width, height, background-color, border-color, box-shadow;

	display: inline-block;
	margin: 10px;
	padding: 30px;
	padding-top: 10px;
	padding-bottom: 10px;
	border-radius:8px;
	border: solid 1px gray;


	background-color: rgba(28,42,43,0.5);
	background-color: var(--callout-background-color);


	filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10,MakeShadow=true,ShadowOpacity=0.20);
	-ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=10,MakeShadow=true,ShadowOpacity=0.20)";
	zoom: 1;

	backdrop-filter: blur(10px);

	color: inherit;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;

	-ms-box-shadow:0 2px 10px rgba(255,255,255,.2);
	-ms-box-shadow:0 2px var(--callout-shadow-width) var(--callout-shadow-color-inner);

	-o-box-shadow:0 2px 10px rgba(255,255,255,.2);
	-o-box-shadow:0 2px var(--callout-shadow-width) var(--callout-shadow-color-inner);

	box-shadow:0 2px 10px rgba(255,255,255,.2);
	box-shadow:0 2px var(--callout-shadow-width) var(--callout-shadow-color-inner);

	-webkit-box-shadow: 0px 2px 10px 1px rgba(255,255,255,0.2);
	-webkit-box-shadow: 0px 2px var(--callout-shadow-width) 1px var(--callout-shadow-color-inner);

	-moz-box-shadow: 0px 2px 10px 1px rgba(255,255,255,0.2);
	-moz-box-shadow: 0px 2px var(--callout-shadow-width) 1px var(--callout-shadow-color-inner);

	box-shadow: 0px 2px 10px 1px rgba(255,255,255,0.2);
	box-shadow: 0px 2px var(--callout-shadow-width) 1px var(--callout-shadow-color-inner);

	max-width: 500px;
}

/* Make the callout 100% width if it's on a phone or somebody just likes a browser with a really small window */
@media (max-width: 400px) {
	.callout_box {
		left: 0;
		right: 0;
		margin-left: 0;
		margin-right: 0;
		border-left: none;
		border-right: none;
		border-radius: 0;
		width: 100%;
		width: 100vw;
		padding: 1em;
		width: calc(100% - (100% - 100vw) - 3em);
	}
}


/* waves */

/*
 * The heavens are in a box
 */
#sky_container {
	width: 100vw;
	height: 60vh;
	overflow: hidden;
}



/*
 * Header, or top of content, waves
 */
#header_wave_container {
	height: 100px;
	width: 100vw;
	overflow: hidden;
}
div.page_header_wave {
	padding: 0;
	margin: 0;
	overflow: hidden;
	position: absolute;
	width: 100%;
	width: 100vw;
	left: 0;
	right: 0;
}
.page_header_lvl_1 {
	stroke: white;
	stroke-width: 1;
	fill: #ad2817;
}
.page_header_lvl_2 {
	stroke: white;
	stroke-width: 1;
	fill: rgb(142, 31, 19);
	background-color: rgb(142, 31, 19);
}
.page_header_lvl_3 {
	stroke: white;
	stroke-width: 1;
	fill: rgb(112, 21, 15);
	background-color: rgb(112, 21, 15);
}
.page_header_lvl_4 {
	stroke: white;
	stroke-width: 1;
	fill: rgb(81, 11, 11);
	background-color: rgb(81, 11, 11);
}


/*
 * Footer waves
 */
#footer_wave_container {
	height: 100px;
	width: 100vw;
	overflow: hidden;
}
div.page_footer_wave {
	padding: 0;
	margin: 0;
	overflow: hidden;
	position: absolute;
	width: 100vw;
	left:0;
	right: 0;
	border: 0;
}

.page_footer_lvl_1 {
	stroke: white;
	stroke-width: 1;
	transition: background-color .5s;
	fill: rgb(74, 140, 152);
	fill: rgb(16, 11, 25);
	background-color: rgb(74, 140, 152);
}
.page_footer_lvl_2 {
	stroke: white;
	stroke-width: 1;
	transition: background-color .5s;
	fill: rgb(101, 178, 184);
	fill: rgb(10, 24, 45);
	background-color: rgb(101, 178, 184);
}
.page_footer_lvl_3 {
	stroke: white;
	stroke-width: 1;
	transition: background-color .5s;
	fill: rgb(161, 215, 217);
	fill: rgb(6, 38, 65);
	background-color: rgb(161, 215, 217);
}
.page_footer_lvl_4 {
	stroke: white;
	stroke-width: 1;
	transition: background-color .5s;
	fill: rgb(199, 229, 229);
	fill:  rgb(11, 72, 107);
	background-color: rgb(199, 229, 229);
}


/*
 * The javascript-generated mountains on the horizon
 */
#background_mountain_container {
	position: absolute;
	z-index: 2;
	top: 55vh;
	top: calc(60vh - 50px);
	width: 100vw;
	overflow: hidden;
	height:100px;
}


/* name, toc, fuji, signature */

/*
 * A box to put my name in as the page title
 */
#name_box {
	padding-left: 0.5em;
	position: absolute;
	z-index:10;
	top:35vh;
	font-family: "Bakbak One", sans-serif;
	font-weight: 500;
	font-style: normal;
	font-size: 45pt;
	transition: font-size ease .5s;
	color: white;
	white-space: nowrap;
}
@media (max-width: 570px) { #name_box {font-size: 40pt;top:38vh;}}
@media (max-width: 520px) { #name_box {font-size: 35pt;top:40vh;}}
@media (max-width: 470px) { #name_box {font-size: 30pt;top:42vh;}}
@media (max-width: 420px) { #name_box {font-size: 25pt;top:44vh;}}
@media (max-width: 370px) { #name_box {font-size: 20pt;top:46vh;}}
@media (max-width: 320px) { #name_box {font-size: 15pt;top:48vh;}}


/*
 * Need to put a little TOC (table of contents) box so people know there's more below first screen.
 * Even though the cool part about the site is that there's more below the top part, I think many people won't like it.
 */
#toc_box {
	font-size: 11pt;
	font-weight: 400;
	color: white;
	text-shadow:
		-1px -1px 0 rgba(56,13,13,.5),
		 1px -1px 0 rgba(56,13,13,.5),
		-1px  1px 0 rgba(56,13,13,.5),
		 1px  1px 0 rgba(56,13,13,.5)
	;
}
/* Normally TOC box links should be, like, you know, white */
#toc_box > ul > li > a, #toc_box > ul > li > a:active {
	color: white;
	text-decoration: none;
}
/* Yellow probably the best color here */
#toc_box > ul > li > a:hover {
	color: yellow;
	text-decoration: underline;
}

/* Hide the TOC box if the height is less than 450................ */
@media (max-height: 449px) {
	#toc_box { display:none;}
}

/*
 * Background martian red Mount Fuji centered behind my name/title
 * width is 3.7440323172970987881013587954462 * height
 */
#red_fuji {
	position:absolute;
	z-index: 1;

	top: 32vh;
	left: 290px;
	transform: translateX(-50%);
	height: 32vh;
	width: 112.3209695vh;

	transition: left ease .5s;
}
@media (max-width: 570px) { #red_fuji {left:270px;top:34vh;height:28vh;width:104.83290488431876606683804627249vh;} }
@media (max-width: 520px) { #red_fuji {left:230px;top:36vh;height:26vh;width:97.344840249724568490635328681601vh;} }
@media (max-width: 470px) { #red_fuji {left:210px;top:38vh;height:24vh;width:89.856775615130370914432611090709vh;} }
@media (max-width: 420px) { #red_fuji {left:170px;top:40vh;height:22vh;width:82.368710980536173338229893499816vh;} }
@media (max-width: 370px) { #red_fuji {left:140px;top:42vh;height:20vh;width:74.880646345941975762027175908924vh;} }
@media (max-width: 320px) { #red_fuji {left:110px;top:44vh;height:18vh;width:67.392581711347778185824458318032vh} }


/*
 * SVG which displays my name, like a signature but not really, my signature is uglier.
 */
#signature {
	width:380px;
}
@media (max-width: 380px) { #signature {width:100%} }


/* content sections */

h2 { font-family:"Bakbak One";font-size:2em;font-variant:small-caps;transition:font-size ease .5s; }
@media (max-width: 410px) { h2 { font-size: 1.9em; } }
@media (max-width: 395px) { h2 { font-size: 1.8em; } }
@media (max-width: 380px) { h2 { font-size: 1.7em; } }
@media (max-width: 360px) { h2 { font-size: 1.6em; } }

#content_section_about {
	border-left: 5px solid white;
	padding-left: 1em;
}
#content_section_about h2 { color: White; }

#content_section_background {
	border-left: 5px solid orange;
    padding-left: 1em;
}
#content_section_background h2 { color: Orange; }

#content_section_programming {
	border-left: 5px solid SteelBlue;
    padding-left: 1em;
}
#content_section_programming h2 { color: SteelBlue; }


#content_section_contact {
	border-left: 5px solid green;
    padding-left: 1em;
}
#content_section_contact h2 { color: Green; }


/* Initially hidden experience details text for a particular language or ... technology */
.experience_details {
	position: absolute;
	visibility: hidden;
	overflow: hidden;
	width: 0;
	height: 0;
}

/* Going to try to put a logo in the upper-right of the callout box for displaying experience */
.experience_logo {
	float: right;
	width: 100px;
	height: 100px;
	width: 5em;
	height: 5em;
}
#toolbelt > li {
	cursor: pointer;
}


/* contact info */

/*
 *
 * CONTACT INFO
 *
 */

/* Contact info flex grid table */
.contact_info_container {
	display: flex;
	flex-direction: column;
	width: min-content;
	font-size: 1em;
}

/* Adjust font for browser size */
@media (max-width: 320px) { .contact_info_container {font-size: 0.9em;}}
@media (max-width: 295px) { .contact_info_container {font-size: 0.8em;}}
@media (max-width: 270px) { .contact_info_container {font-size: 0.7em;}}
@media (max-width: 245px) { .contact_info_container {font-size: 0.6em;}}
@media (max-width: 220px) { .contact_info_container {font-size: 0.5em;}}

/* Contact info row */
.contact_info_row {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
	font-size: 1em;
}

/* Cell for an icon in the contact info flex grid */
.contact_info_icon, .contact_info_copy_icon {
	margin-left: 10px;
	white-space: nowrap;
	fill: white;
	color: white;
	font-size: 1em;
}

/* Cell for the label, such as email or phone */
.contact_info_label {
	margin-left: 10px;
	white-space: nowrap;
	font-size: 1em;
}

/* Cell for contact info value, which itself is a flex grid container of letter divs */
.contact_info {
	flex: 1;
	margin-left: 10px;
	white-space: nowrap;
	font-size: 1em;
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
}

/* Separate divs for each letter in a contact info string, in a flex container */
.letter_div {
	flex: 1;
	border: none;
	padding: 0px;
	white-space: nowrap;
}


#my_profile_photo {
	float:right;
	border-radius: 50%;
	width: 200px;
	height: 200px;
	margin-left: 5px;
}
#my_profile_photo > img:first-of-type {
	position:absolute;
	border-radius:50%;
	margin:20px;
	width: 160px;
	height: 160px;
}

@media (max-width: 570px) {
	#my_profile_photo {width:190px;height:190px}
	#my_profile_photo > img:nth-of-type(1) { width: 150px;height:150px; margin:20px; }
	#my_profile_photo > img:nth-of-type(2) { width: 190px;height:190px; }
}
@media (max-width: 520px) {
	#my_profile_photo {width:180px;height:180px}
	#my_profile_photo > img:nth-of-type(1) { width: 140px;height:140px; margin: 20px; }
	#my_profile_photo > img:nth-of-type(2) { width: 180px;height:180px; }
}

@media (max-width: 470px) {
	#my_profile_photo {width:170px;height:170px}
	#my_profile_photo > img:nth-of-type(1) { width: 130px;height:130px; margin:20px; }
	#my_profile_photo > img:nth-of-type(2) { width: 170px;height:170px; }
}


@media (max-width: 420px) {
	#my_profile_photo {width:160px;height:160px}
	#my_profile_photo > img:nth-of-type(1) { width: 120px;height:120px; margin:20px; }
	#my_profile_photo > img:nth-of-type(2) { width: 160px;height:160px; }
}

@media (max-width: 370px) {
	#my_profile_photo {width:150px;height:150px}
	#my_profile_photo > img:nth-of-type(1) { width: 110px;height:110px;margin:20px; }
	#my_profile_photo > img:nth-of-type(2) { width: 150px;height:150px; }
}

@media (max-width: 320px) {
	#my_profile_photo {width:140px;height:140px}
	#my_profile_photo > img:nth-of-type(1) { width: 110px;height:110px;margin:15px; }
	#my_profile_photo > img:nth-of-type(2) { width: 140px;height:140px; }
}