/* ## PAGE ## */
			:root {
				--black: #000;
				--white: #FFF;
				--yellow: #FB0;
				--charcoal: #222;
				--grey: #BBB;
				--light-grey: #EEE;
			}
			body {
				display: block;
				background: var(--grey);
				color: var(--black)
			}
			ul,
			li { list-style: none; }
			li { display: inline-block; }
			a { text-decoration: none; color: var(--charcoal); }
			.icon { display: inline-block; height: 30px; width: 30px; background: var(--white); border-radius: 15px; line-height: 30px; vertical-align: middle; text-align: center; }
			h4 { font-size: 1.05rem; font-weight: bold;}
			#Page {
				position: relative;
				min-height: 100dvh;
				width: 1024px;
				max-width: 100%;
				background: var(--white);
				margin: 0 auto 0;
				overflow: hidden;
			}
			#SideBar_Top h2 { display: none; }
			.sidebar {
				position: absolute;
				right: 40px;
				top: 0px;
				width: 200px;
				min-height: 100%;
				background: var(--yellow);
				overflow: visible;
				display: flex;
				flex-direction: column;
			}
			.sidebar section { padding: 25px 20px 0 }
			.sidebar-education h3,
			.sidebar h3 {
				font-size: 1.25rem;
				line-height: 1em;
				text-transform: uppercase;
				letter-spacing: 0.1em;
				font-weight: 700;
				border: 2px solid var(--charcoal);
				border-left: none;
				border-right: none;
				padding: 6px 2px;
				margin: 0 0 10px;
			}
			.sidebar-content {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				flex: 1; 
			}
			.sidebar-content-bottom { padding: 50px 0; }
			.sidebar-top { text-align: center; padding: 32px 0; overflow: visible; isolation: unset; height: 205px; }
			.arrow-left {
				width: 0;
				height: 0;
				border-top: 20px solid transparent;
				border-bottom: 20px solid transparent;
				border-right: 20px solid var(--yellow);
				position: absolute;
				left: -20px;
				top: 80px;
				z-index: 250;
			}
			.avatar {
				--size: 135px;
				--noggin: calc(var(--size) * 0.15);
				--height-with-noggin: calc(var(--size) + var(--noggin));
				--border-width: calc(var(--size) * 0.025);
				width: var(--size);
				height: var(--size);
				border-radius: 50%;
				border: var(--border-width) solid var(--charcoal);
				background: radial-gradient(circle, #000 0%, #777 10%, #ddd 100%);
				display: flex;
				align-items: end;
				position: relative;
				margin: 1.25em auto 2em;
				--mask-size: calc(var(--size) / 2 - var(--border-width));
				--mask-image:
					linear-gradient(to bottom, orange 0%, orange 50%, transparent 50%),
					radial-gradient(
						circle at center center,
						blue 0%,
						blue var(--mask-size),
						transparent var(--mask-size),
						transparent 100%
					);
				--mask-repeat: no-repeat, no-repeat;
				--mask-position:
					center center, center calc(var(--noggin) / 2 + var(--border-width));
				filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.5));
				transition: border-color 0.3s ease;
				isolation: isolate;
				/* Rainbow border pseudo-element — hidden by default */
				&::before {
					content: "";
					position: absolute;
					inset: calc(var(--border-width) * -1);
					border-radius: 50%;
					padding: var(--border-width);
					background: conic-gradient(#fd004c, #fe9000, #fff020, #3edf4b, #3363ff, #b102b7, #fd004c);
					--mask-composite-clip: exclude;
					-webkit-mask:
						linear-gradient(#fff 0 0) content-box,
						linear-gradient(#fff 0 0);
					-webkit-mask-composite: xor;
					mask:
						linear-gradient(#fff 0 0) content-box,
						linear-gradient(#fff 0 0);
					mask-composite: exclude;
					opacity: 0;
					transition: opacity 0.3s ease;
					animation: spin-border 6s linear infinite;
					animation-play-state: paused;
					z-index: -1;
					pointer-events: none;
				}
				&:hover {
					border-color: transparent;
					&::before {
						opacity: 1;
						animation-play-state: running;
					}
				}
				&::after {
					content: "";
					position: absolute;
					bottom: 0;
					left: 0;
					width: 100%;
					height: var(--height-with-noggin);
					background-image: var(--mask-image);
					background-repeat: var(--mask-repeat);
					background-position: var(--mask-position);
					opacity: 0.7;
					display: none;
				}
				img {
					width: 129px;
					height: 155px;
					object-fit: cover;
					mask-image: var(--mask-image);
					mask-repeat: var(--mask-repeat);
					mask-position: var(--mask-position);
					mask-mode: alpha;
				}
			}
			@keyframes spin-border {
				to {
					rotate: 1turn;
				}
			}
			#vCardHolder { overflow: hidden; }
			.vcard { position: absolute; left: -999em; margin: -999em; }
			.sidebar-iconlist { line-height: 30px; }
			.sidebar-iconlist li { white-space: nowrap; margin-top: 10px; }
			.sidebar-iconlist .icon { margin: 0 2px 0 -2px; }
			.sidebar-iconlist .icon img { position: relative; margin-top: -2px; }
			.sidebar-skills ul,
			.sidebar-skills li { text-align: center; font-size: 0.88rem; letter-spacing: -0.01em; }
			.sidebar-skills li { line-height: 1.5em; vertical-align: middle; transition: scale 0.2s ease-in-out, color 0.3s linear;  transform: scale(1); }
			.sidebar-skills li:hover { color: var(--white); }
			.sidebar-education li,
			.sidebar-education .icon { vertical-align: top; }
			.sidebar-education ul { padding-top: 5px; }
			.sidebar-education li { margin-top: 5px; white-space: nowrap; }
			.sidebar-education span { display: inline-block; position: relative; }
			.sidebar-education .info { white-space: normal; line-height: normal; position: relative; }
			.sidebar-education .info .title { white-space: nowrap; line-height: 1em; letter-spacing: 0; }
			.sidebar-education .info .subtitle { white-space: nowrap; font-size: 0.6rem; line-height: 1em; }
			.sidebar-reference div { position: relative;  margin: 0 -5px; color: var(--white); text-align: center; background: var(--charcoal); padding: 10px; }
			.sidebar-reference h3 { padding: 0; border: 0 none; font-weight: normal; font-size: 1.15rem; margin-bottom: 5px; }
			.sidebar-reference h4 { font-size: 0.9rem; }
			.sidebar-reference h5 { font-size: 0.65rem; margin-bottom: 5px; }
			.sidebar-reference a { position: relative;  display: inline-block; font-size: 0.8rem; color: var(--white); transition: all .2s ease-in-out; }
			.sidebar-reference a:hover { transform: scale(1.1); }
			#SideBar2 { display: none; background: var(--yellow); padding: 40px; text-align: center;; }
			#SideBar_Reference2 div { display: inline-block; margin: 0 auto; padding: 10px 25px; }
			header {
				background: var(--charcoal);
				color: var(--white);
				min-height: 190px;
			}
			header h1,
			header h2 { text-transform: uppercase; letter-spacing: 0.15em; }
			header h2 { font-size: 1rem; }
			header>div {
				width: calc(100% - 200px - 40px);
				padding: 0px 25px 40px 40px;
			}
			#Logo { position: relative; margin: -4px 0 10px; background: #FC3; z-index: 999; }
			#Header_Image { display: none; text-align: center; padding: 15px; }
			#Header_Image h2 { display: none; }
			#Header_Image .avatar { border-color: solid var(--white); margin: 40px auto 0px; }
			#MainPage { padding: 25px 25px 40px 40px; width: calc(100% - 200px - 40px); }
			#MainPage section { margin-bottom: 10px; }
			#MainPage section h3 {
				font-size: 1.25rem;
				line-height: 1em;
				text-transform: uppercase;
				letter-spacing: 0.1em;
				font-weight: 700;
				border: 2px solid var(--charcoal);
				border-left: none;
				border-right: none;
				padding: 6px 2px;
				margin: 0 0 10px;
				text-align: right;
			}
			#Professional_Profile p {
				max-width: none;
				padding-bottom: 10px;
				text-indent: 25px;
			}
			#Skills_and_Proficiencies p { padding-bottom: 10px;}
			#Work_Experience .job {
				clear: both;
				margin-bottom: 25px;
			}
			#Work_Experience .date {
				display: block;
				float: left;
				text-align: center;
				border: 2px solid var(--charcoal);
				background: #FC3;
				font-size: 0.8rem;
				padding: 4px 10px;
				margin: 5px 10px 5px 0;
				width: 115px;
			}
			#Work_Experience .date .years {
				font-weight: bold;
			}
			#Work_Experience .date .location {
				text-transform: uppercase;
			}
			#Work_Experience .company {
				display: block;
				float: right;
				text-align: right;
				margin: 5px 0 5px 10px;
			}
			#Work_Experience .company .company-name {
				text-transform: uppercase;
				font-size: 1.25rem;
				letter-spacing: 0.1em;
				font-weight: 700;
			}
			#Work_Experience .company .job-title {
				letter-spacing: 0.1em;
			}
			#Work_Experience .duties {
				clear: both;
				padding-top: 5px;
				text-align: right;
			}
			li { transition: all .2s ease-in-out;  }
			li:hover { transform: scale(1.1); }
			.extras { text-align: center; width: 100%; padding: 10px; background: var(--light-grey); min-height: 30px; font-size: 0.75em; }
			.extras>div { width: calc(100% - 200px - 40px); }
			.extras div div { padding-bottom: 8px; }
			.extras a { text-decoration: underline; }
			/* .extras a:hover { text-decoration: underline; } */
			@media only screen and (max-width: 800px) {
				#Work_Experience .date {
					display: block;
					float: none;
					text-align: left;
					width: auto;
					margin-right: 0;
				}
				#Work_Experience .date .years {
					display: inline-block;
				}
				#Work_Experience .date .location {
					display: block;
					float: right;
				}
			}
			@media only screen and (max-width: 600px) {
				header>div {
					width: 100%;
					padding: 0 40px 25px;
				}
				#SideBar {
					position: relative;
					width: 100%;
					right: 0;
					display: block
				}
				.sidebar {
					display: block;  /* override the flex we added */
					position: relative;
					width: 100%;
					margin: 0;
					left: 0;
					right: 0;
				}
				.sidebar-content {
					flex: unset;
					height: auto;
				}
				.sidebar-content-top { min-height: 150px; }
				.sidebar-content-bottom {
					display: none;  /* hide from sidebar, since #SideBar2 shows it at bottom */
				}
				.arrow-left { display: none; }
				#SideBar_Top { display: none; }
				#SideBar_Reference { display: none; }
				#SideBar_Education { display: none; }
				#SideBar_Skills { padding-bottom: 25px; }
				#MainPage { width: 100%; padding: 20px; }
				#MainPage section h3 { text-align: left; }
				#SideBar2 { display: block; }
				#Header_Image { display: block; padding-top: 40px; }
				header { text-align: center; }
				header h1 { font-size: 2.25rem; }
				#Logo { position: absolute; left: 20px; }
				#Logo { height: 65px; width: 65px; }
				.sidebar-iconlist { text-align: center; }
				.sidebar-iconlist ul { display: inline-block; margin: 0px auto; }
				.sidebar-iconlist ul li { display: block; text-align: left; }
				.sidebar-contacts h3 { display: none; }
				.sidebar section.sidebar-contacts { padding: 5px 20px 20px; }
				#SideBar2 section.sidebar-education {
					padding: 15px 0;
					border-bottom: 2px solid var(--charcoal);
					border-left: none;
					border-right: none;
					border-top: none;
					margin: 0 0 20px;
				}
				#SideBar2 {
					padding: 0 20px 20px;
				}
				.extras { width: calc(100%); }
				.extras>div { width: calc(100%); }
			}