/*
PROGRAMMER: Athip Thirupathi Raj, template taken from Fredrick Wachter
DATE CREATED: 2024-12-28
PURPOSE: Engineering Portfolio of Athip Thirupathi Raj
CONTACT INFO: athipa95@gmail.com
*/

/* -------------------- ----- -------------------- */
/* -------------------- Fonts -------------------- */
/* -------------------- ----- -------------------- */
@font-face {
	font-family: SlimJoe;
	src: url(font/Slim_Joe.otf) format("opentype");
}

@font-face {
	font-family: HelveticaNeue-Thin;
	src: url(font/HelveticaNeue-Thin.otf) format("opentype");
}

@font-face {
	font-family: HelveticaNeue-Light;
	src: url(font/HelveticaNeue-Light.otf) format("opentype");
}

@font-face {
	font-family: HelveticaNeue-CondensedBold;
	src: url(font/HelveticaNeue-CondensedBold.otf) format("opentype");
}

@font-face {
	font-family: FontAwesome;
	src: url(font/fontawesome-webfont.eot);
	src: url(font/fontawesome-webfont.eot?#iefix) format('embedded-opentype'),
		url(font/fontawesome-webfont.woff) format('woff'),
		url(font/fontawesome-webfont.ttf) format('truetype'),
		url(font/fontawesome-webfont.svg) format('svg');
	font-weight: normal;
	font-style: normal;
}

.icon-desktop:before {
	position: relative;
	font-family: FontAwesome;
	content: "\f108";
	font-style: normal;
	font-size: 30px;
	color: rgb(225, 225, 224);
	top: 3px;
}

.icon-youtube:before {
	position: relative;
	top: 6px;
	margin-left: 8px;
	font-family: FontAwesome;
	content: "\f167";
	font-style: normal;
	font-size: 27px;
	color: rgb(225, 225, 224);
}

.icon-home:before {
	position: relative;
	margin-left: 8px;
	font-family: FontAwesome;
	content: "\f015";
	font-style: normal;
	font-size: 30px;
	color: rgb(225, 225, 224);
}

.icon-github:before {
	position: relative;
	margin-left: 8px;
	font-family: FontAwesome;
	content: "\f09b";
	font-style: normal;
	font-size: 35px;
	color: rgb(225, 225, 224);
	top: 3px;
}

.icon-newspaper:before {
	position: relative;
	top: 7px;
	margin-left: 9px;
	font-family: FontAwesome;
	content: "\f1ea";
	font-style: normal;
	font-size: 35px;
	color: rgb(225, 225, 224);
}

.icon-info:before {
	position: relative;
	top: 5px;
	margin-left: 8px;
	font-family: FontAwesome;
	content: "\f05a";
	font-style: normal;
	font-size: 35px;
	color: rgb(225, 225, 224);
}

.icon-document:before {
	position: relative;
	top: 2px;
	margin-left: 8px;
	font-family: FontAwesome;
	content: "\f15c";
	font-style: normal;
	font-size: 27px;
	color: rgb(225, 225, 224);
}

.icon-blog:before {
	position: relative;
	margin-left: 8px;
	font-family: FontAwesome;
	content: "\f143";
	font-style: normal;
	font-size: 35px;
	color: rgb(225, 225, 224);
}

/* -------------------- --------- -------------------- */
/* -------------------- Reset CSS -------------------- */
/* -------------------- --------- -------------------- */
html {
	background-color: #000000;
}

body {
	max-width: 100%;
	min-width: 980px;
	margin: 0px auto;
}

body,
main,
div {
	cursor: auto;
}

html,
body,
main {
	height: 100%;
	width: 100%;
	overflow: hidden;
}

html,
body,
main,
div,
section,
img,
h1 {
	z-index: 0;
	font-family: HelveticaNeue-Thin, Helvetica, Arial;
}

html,
body,
main,
div,
section,
img,
h1,
iframe,
hr {
	margin: 0;
	padding: 0;
}

section {
	width: 100%;
}

h1 {
	font-size: 30px;
}

a {
	text-decoration: none;
}

::-webkit-scrollbar {
	width: 12px;
}

::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.78);
	border-radius: 10px;
}

::-webkit-scrollbar-thumb {
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.5);
}

/* -------------------- --------------- -------------------- */
/* -------------------- General Classes -------------------- */
/* -------------------- --------------- -------------------- */
.icon:hover {
	opacity: 0.8;
	cursor: pointer;
}

.pointer:hover {
	cursor: pointer;
}

.center {
	margin: 0px auto;
	text-align: center;
	max-width: 1500px;
}

.right {
	position: relative;
	float: right;
}

.left {
	position: relative;
	float: left;
}

.clearBoth:before,
.clearBoth:after {
	clear: both;
	content: ".";
	display: block;
	height: 0;
	width: 0;
	line-height: 0;
	visibility: hidden;
}

.spacer {
	height: 20px;
	width: 100%;
}

.bottomSpacer {
	height: 160px;
	width: 100%;
}

.scroll {
	overflow-y: scroll;
}

.background {
	-webkit-transition: opacity 0.4s;
	transition: opacity 0.4s;
}

.largeText {
	font-family: HelveticaNeue-CondensedBold, HelveticaNeue-Thin, Helvetica, Arial;
	font-size: 28px;
}

.mediumText {
	padding-top: 5px;
	font-size: 18px;
}

.smallText {
	font-size: 16px;
}

.pageTitle {
	margin: 0px auto;
	font-size: 50px;
	font-family: HelveticaNeue-CondensedBold, HelveticaNeue-Thin, Helvetica, Arial;
	color: white;
}

.pageText {
	margin: 10px auto 20px auto;
	font-size: 20px;
	color: white;
}

.hidden {
	display: none;
}

.hideScrollbar {
	overflow-y: hidden;
}

.showScrollbar {
	overflow-y: visible;
}

.fullPage {
	position: absolute;
	height: 100%;
	width: 100%;
}

.black_out {
	-webkit-box-shadow: 0px 0px 40px 25px rgba(0, 0, 0, 0.85);
	-moz-box-shadow: 0px 0px 40px 25px rgba(0, 0, 0, 0.85);
	-o-box-shadow: 0px 0px 40px 25px rgba(0, 0, 0, 0.85);
	box-shadow: 0px 0px 40px 25px rgba(0, 0, 0, 0.85);
	background-color: rgba(0, 0, 0, 0.9);
}

.content-wrapper {
	position: relative;
	z-index: 1;
}


/* -------------------- --------------- -------------------- */
/* -------------------- Sidebar Section -------------------- */
/* -------------------- --------------- -------------------- */
#sidebar {
	position: fixed;
	top: 37.5%;
	right: 10px;
	height: 292px;
	width: 64px;
	border-radius: 5px 0px 0px 5px;
	background-color: black;
	z-index: 2;
	-webkit-transition: right 1s;
	transition: right 1s;
}

.sidebarIcon {
	margin: 7px 7px 0px 7px;
	width: 50px;
}

/* -------------------- ------------- -------------------- */
/* -------------------- Intro Section -------------------- */
/* -------------------- ------------- -------------------- */
#intro {
	position: relative;
	/* Establish a positioning context */
	overflow: hidden;
	/* Ensure the pseudo-element doesn't overflow the parent */
}

#logo {
	position: absolute;
	margin: -73.5px 0 0 -125px;
	top: 0px;
	left: 0px;
	background-color: rgba(0, 0, 0, 0.48);
	box-shadow: 0px -10px 50px 30px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: 0px -10px 50px 30px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0px -10px 50px 30px rgba(0, 0, 0, 0.5);
	-o-box-shadow: 0px -10px 50px 30px rgba(0, 0, 0, 0.5);
	transition: top 1.5s, box-shadow 1.5s, background-color 1.5s, margin 1.5s;
	-webkit-transition: top 1.5s, box-shadow 1.5s, background-color 1.5s, margin 1.5s;
	z-index: 1;
}

#mainLogo {
	width: 250px;
	-webkit-transition: width 1.5s;
	transition: width 1.5s;
	z-index: 1;
}

#introText {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin-top: 130px !important;
	margin-left: 0 !important;
	padding: 10px 20px;
	font-size: 60px;
	color: #ffffff;
	font-weight: bolder;
	font-family: 'HelveticaNeue-CondensedBold', sans-serif;
	z-index: 100;
	text-align: center;
	white-space: nowrap;
	text-shadow:
		0 0 10px rgba(0, 0, 0, 1),
		/* Sharp dark core for crisp letters */
		0 0 20px rgba(0, 0, 0, 0.9),
		/* Mid-level shadow to fill gaps */
		0 0 40px rgba(0, 0, 0, 0.7),
		/* Wide, soft shadow to separate from background */
		0 0 60px rgba(0, 0, 0, 0.4);
	/* Extra-wide atmospheric "bloom" */
	background-color: transparent !important;
	transition: opacity 1s;
	letter-spacing: 2px;
}

/* -------------------- -------------- -------------------- */
/* -------------------- Footer Section -------------------- */
/* -------------------- -------------- -------------------- */
#footer {
	position: fixed;
	bottom: 0;
	height: 42px;
	width: 100%;
	text-align: center;
	z-index: 10001;
}

#topButtons {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 60px;
	background: rgba(0, 0, 0, 0.65);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	z-index: 10001;
	display: flex;
	justify-content: center;
	/* Centers the whole cluster on PC */
	align-items: center;
	/* Centers them vertically */
	gap: 45px;
	/* Professional spacing between links */
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#footerText {
	position: absolute;
	top: -15px;
	left: 5px;
	font-size: 25px;
	color: rgb(255, 255, 255);
	background-color: rgba(0, 0, 0, 0.45);
	z-index: 10001;
}

#lastModified {
	position: absolute;
	top: 5px;
	right: 15px;
	font-size: 15px;
	color: rgb(255, 255, 255);
	background-color: rgba(0, 0, 0, 0.45);
	z-index: 10001;
}

.footerButton {
	flex: 1;
	/* Give every button equal width to prevent crowding */
	max-width: 200px;
	/* Limits width on ultra-wide monitors */
	margin: 0 !important;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	color: white;
	text-shadow: 0 0 10px rgba(0, 0, 0, 1);
	transition: all 0.3s ease;
	cursor: pointer;
	white-space: nowrap;
}

.footerButton:hover {
	color: #ddd;
	/* Change color on hover */
}

.notActive {
	background-color: none;
}

.active {
	background-color: none;
}

.footerButton.active {
	font-weight: bold;
	color: #ffcc00;
	text-shadow:
		0 0 5px #ffcc00,
		/* Glow core */
		0 0 10px rgba(255, 204, 0, 0.8),
		0 0 20px rgba(255, 204, 0, 0.6),
		0 0 40px rgba(255, 204, 0, 0.4);
	/* Wide wash of light */
	/* Highlight active text */
}

/* -------------------- -------------------- -------------------- */
/* -------------------- Page Classes and Ids -------------------- */
/* -------------------- -------------------- -------------------- */

#page1,
#page2,
#page3,
#page4,
#page5 {
	position: absolute;
	height: 100%;
	width: 100%;
	background: none !important;
}

#fixed-bg-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: -1;
}

.bg-layer {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	visibility: hidden;
	transition: opacity 1.2s ease-in-out;
	background-size: cover;
	background-position: center;
	background-attachment: scroll;
	filter: blur(1.5px);
}

.bg-layer.active {
	opacity: 0.8;
	visibility: visible;
}

/* Assign your specific images */
#bg0 {
	background-image: url("img/Background_1.png");
}

#bg1 {
	background-image: url("img/Galaxy_1.avif");
}

#bg2 {
	background-image: url("img/Galaxy_3.avif");
}

#bg3 {
	background-image: url("img/Galaxy_2.avif");
}

#bg4 {
	background-image: url("img/Galaxy_1.avif");
}

#bg5 {
	background-image: url("img/Background_4.jpg");
}


#contentPage1,
#contentPage2,
#contentPage3,
#contentPage4,
#contentPage5 {
	position: relative;
	top: 0;
	-webkit-transition: top 1s;
	transition: top 1s;
}

.page {
	position: absolute;
	top: 0;
	text-align: center;
	-webkit-transition: left 1.5s;
	transition: left 1.5s;
}

.linksBar {
	position: absolute;
	height: 45px;
	width: 100%;
	bottom: 0px;
	opacity: 0;
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
	background-color: rgb(24, 24, 24);
}

#siteLegend {
	position: fixed;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	width: 140px;
	padding: 15px;
	z-index: 100;
	border-radius: 0 10px 10px 0;
	border: 1px solid rgba(255, 204, 0, 0.4);
	border-left: none;
	opacity: 0;
	/* Hidden by default for the Home page */
	pointer-events: none;
	transition: left 0.8s, opacity 0.5s;
	color: white !important;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
	/* Adds contrast */
	transition: left 1s, opacity 0.5s;
}

.legendTitle {
	font-family: HelveticaNeue-CondensedBold;
	color: #ffcc00;
	font-size: 18px;
	margin-bottom: 10px;
}

.legendItems,
.iconsGrid {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Interaction instruction text */
.legendInstruction {
	color: #ffcc00 !important;
	font-weight: bold;
}

.legendIcon {
	display: flex;
	align-items: center;
	gap: 8px;
	color: white;
}

.legendIcon p {
	font-size: 13px;
	margin: 0;
}

.mobileOnly {
	display: none;
	color: #e0e0e0 !important;
}

.pcOnly {
	display: inline;
	color: #e0e0e0 !important;
}

/* -------------------- -------------------- -------------------- */
/* -------------------- Platform Development -------------------- */
/* -------------------- -------------------- -------------------- */
#platform_background_balloons {
	background: url(img/platforms/Balloon_1.png) no-repeat center center;
}

#platform_background_3d_printers {
	background: url(img/platforms/3D_Printers_1.png) no-repeat center center;
}

#platform_background_computer_vision {
	background: url(img/platforms/CV_1.png) no-repeat center center;
}

#platform_background_deployable {
	background: black url(img/platforms/Deployable_1.png) no-repeat center center;
}

#platform_background_blender {
	background: url(img/platforms/Blender_1.png) no-repeat center center;
}

#platform_background_Robotic {
	background: url(img/platforms/Robotic_Platforms_teaching_1.png) no-repeat center center;
}

#platform_background_OSTER {
	background: black url(img/platforms/OSTER_LIDAR_1.png) no-repeat center center;
}

#platform_background_myCobot {
	background: white url(img/platforms/myCobot_1.png) no-repeat center center;
}

#platform_background_stewart {
	background: white url(img/platforms/Stewart_Picture_1.png) no-repeat center center;
}

#platform_background_Gyro {
	background: rgb(0, 0, 0) url(img/platforms/Gyro_1.png) no-repeat center center;
}

#platform_background_BitCraze {
	background: white url(img/platforms/BitCraze_Crazyflie_Drone_1.jpg) no-repeat center center;
}

#platform_background_myAGV {
	background: white url(img/platforms/myAGV_1.png) no-repeat center center;
}

#platform_background_balloons,
#platform_background_3d_printers,
#platform_background_computer_vision,
#platform_background_deployable,
#platform_background_OSTER,
#platform_background_blender,
#platform_background_Robotic,
#platform_background_myCobot,
#platform_background_stewart,
#platform_background_Gyro,
#platform_background_BitCraze,
#platform_background_myAGV {
	height: 100%;
	width: 100%;
	background-size: cover;
}

#platform_background_myCobot,
#platform_background_stewart,
#platform_background_Gyro,
#platform_background_BitCraze {
	background-size: contain;
}

.platform {
	display: inline-block;
	position: relative;
	margin: 2px auto;
	height: 200px;
	width: 300px;
	cursor: pointer;
	background: rgba(25, 25, 25, 0.95);
	-webkit-transition: height 0.5s;
	transition: height 0.5s;
	border: 1px solid rgb(0, 0, 0);
}

.platformImage {
	top: 2px;
	position: relative;
	height: 150px;
	width: 296px;
	margin: 0px 2px;
	background: whitesmoke;
}

.platformDescription {
	top: 0px;
	position: absolute;
	margin: 5px 10px;
	opacity: 0;
	cursor: pointer;
	-webkit-transition: opacity 0.5s;
	transition: opacity 0.5s;
}

.platform div div p,
.platform div p {
	margin: 5px;
	color: white;
}

.platform:hover {
	height: 290px;
	background: black;
}

.platform:hover .platformImage {
	filter: brightness(0);
}

.platform:hover .blockTitle {
	color: rgba(232, 232, 232, 0);
}

.platform:hover .linksBar {
	opacity: 1;
}

#aboutMeDescription {
	margin: auto auto;
	padding: 2.5px 30px;
	width: 80%;
	text-align: center;
	border-radius: 20px;
}

/* -------------------- ---------------------- -------------------- */
/* -------------------- Engineering Experience -------------------- */
/* -------------------- ---------------------- -------------------- */
#job_background_spacetrex {
	background: black url(img/work/spacetrex_2.png) no-repeat center center;
}

#job_background_agnikul {
	background: url(img/work/Agnikul_1.png) no-repeat center center;
}

#job_background_RE {
	background: url(img/work/Royal_Enfield_1.png) no-repeat center center;
}

#job_background_Michigan {
	background: black url(img/work/UofM_1.jpg) no-repeat center center;
}

#job_background_spacetrex,
#job_background_agnikul,
#job_background_Michigan,
#job_background_RE {
	height: 100%;
	width: 100%;
	background-size: contain;
}

.job {
	position: relative;
	margin: 30px auto;
	height: 250px;
	width: 550px;
	cursor: pointer;
	background: rgba(25, 25, 25, 0.95);
	-webkit-transition: height 0.5s;
	transition: height 0.5s;
	border: 1px solid rgb(0, 0, 0);
}

.jobImage {
	top: 2px;
	position: relative;
	height: 200px;
	width: 546px;
	margin: 0px 2px;
	background: whitesmoke;
}

.jobDescription {
	top: 0px;
	position: absolute;
	margin: 5px 10px;
	opacity: 0;
	cursor: pointer;
	-webkit-transition: opacity 0.5s;
	transition: opacity 0.5s;
}

.job div div p,
.job div p {
	margin: 5px;
	color: white;
}

.job:hover {
	height: 300px;
	background: black;
}

.job:hover .jobImage {
	filter: brightness(0);
}

.job:hover .blockTitle {
	color: rgba(232, 232, 232, 0);
}

.job:hover .linksBar {
	opacity: 1;
}

/* -------------------- ------------------ -------------------- */
/* -------------------- Project Experience -------------------- */
/* -------------------- ------------------ -------------------- */
#project_background_MIRO {
	background: black url(img/projects/MIRO_gif_2.gif) no-repeat center center;
}

#project_background_manual_docking {
	background: black url(img/projects/Manual_gif_2.gif) no-repeat center center;
}

#project_background_gyro {
	background: black url(img/projects/Gyro_gif_2.gif) no-repeat center center;
}

#project_background_STARSS {
	background: black url(img/projects/STARSS_gif_2.gif) no-repeat center center;
}

#project_background_framework {
	background: white url(img/projects/Framework_2.png) no-repeat center center;
}

#project_background_building {
	background: white url(img/projects/Building_2.png) no-repeat center center;
}

#project_background_secrts {
	background: black url(img/projects/SeCrTS_2.png) no-repeat center center;
}

#project_background_SAR {
	background: white url(img/projects/Agnikul_2.png) no-repeat center center;
}

#project_background_sandbags {
	background: white url(img/projects/Sandbags_2.png) no-repeat center center;
}

#project_background_attitude {
	background: black url(img/projects/Attitude_gif_2.gif) no-repeat center center;
}

#project_background_collision {
	background: white url(img/projects/Collision_2.png) no-repeat center center;
}

#project_background_AURA {
	background: black url(img/projects/AURA_2.JPG) no-repeat center center;
}

#project_background_VAYU {
	background: black url(img/projects/Balloon_2.png) no-repeat center center;
}

#project_background_Docking {
	background: black url(img/projects/Docking_gif_2.gif) no-repeat center center;
}

#project_background_RAVEN {
	background: black url(img/projects/RAVEN_gif_2.gif) no-repeat center center;
}


#project_background_MIRO,
#project_background_STARSS,
#project_background_attitude,
#project_background_VAYU,
#project_background_Docking,
#project_background_gyro,
#project_background_manual_docking,
#project_background_SAR,
#project_background_collision,
#project_background_AURA,
#project_background_framework,
#project_background_secrts,
#project_background_RAVEN,
#project_background_sandbags,
#project_background_building {
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	height: 200px;
	width: 100%;
}

.project {
	display: inline-block;
	position: relative;
	margin: 10px 10px;
	height: 250px;
	width: 475px;
	background-color: none;
	cursor: pointer;
	background: rgba(25, 25, 25, 0.9);
	-webkit-transition: height 0.5s;
	transition: height 0.5s;
	border: 1px solid rgb(0, 0, 0);
}

.projectImage {
	height: 200px;
	width: 471px;
	margin: 2px;
}

.projectDescription {
	top: 0px;
	position: absolute;
	margin: 5px 10px;
	opacity: 0;
	cursor: pointer;
	-webkit-transition: opacity 0.5s;
	transition: opacity 0.5s;
}

.project div div p,
.project div p {
	margin: 5px;
	color: white;
}

.project:hover {
	height: 350px;
	background: black;
}

.project:hover .projectImage {
	filter: brightness(0);
}

.project:hover .blockTitle {
	color: rgba(232, 232, 232, 0);
}

.project:hover .linksBar {
	opacity: 1;
}

/* -------------------- ------------------ -------------------- */
/* ----------- Inventions and Provisional Patents ------------- */
/* -------------------- ------------------ -------------------- */
#invention_background_RAVEN {
	background: black url(img/inventions/RAVEN_gif_3.gif) no-repeat center center;
}

#invention_background_Electromagnetic {
	background: white url(img/inventions/Electromagnets_3.png) no-repeat center center;
}

#invention_background_STARSS_Station {
	background: black url(img/inventions/STARSS_Station_gif_3.gif) no-repeat center center;
}

#invention_background_Docking {
	background: black url(img/inventions/Docking_gif_3.gif) no-repeat center center;
}

#invention_background_Lighting {
	background: white url(img/inventions/Attitude_gif_3.gif) no-repeat center center;
}

#invention_background_STARSS {
	background: white url(img/inventions/STARSS_gif_3.gif) no-repeat center center;
}

#invention_background_Swarms {
	background: white url(img/inventions/Inflatable_3.png) no-repeat center center;
}

#invention_background_RAVEN,
#invention_background_Electromagnetic,
#invention_background_STARSS_Station,
#invention_background_Docking,
#invention_background_Lighting,
#invention_background_STARSS,
#invention_background_Swarms {
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	height: 200px;
	width: 100%;
}

.invention {
	display: inline-block;
	position: relative;
	margin: 10px 10px;
	height: 250px;
	width: 475px;
	background-color: none;
	cursor: pointer;
	background: rgba(25, 25, 25, 0.9);
	-webkit-transition: height 0.5s;
	transition: height 0.5s;
	border: 1px solid rgb(0, 0, 0);
}

.inventionImage {
	height: 200px;
	width: 471px;
	margin: 2px;
}

.inventionDescription {
	top: 0px;
	position: absolute;
	margin: 5px 10px;
	opacity: 0;
	cursor: pointer;
	-webkit-transition: opacity 0.5s;
	transition: opacity 0.5s;
}

.invention div div p,
.invention div p {
	margin: 5px;
	color: white;
}

.invention:hover {
	height: 380px;
	background: black;
}

.invention:hover .inventionImage {
	filter: brightness(0);
}

.invention:hover .blockTitle {
	color: rgba(232, 232, 232, 0);
}

.invention:hover .linksBar {
	opacity: 1;
}

/* -------------------- ------------------ -------------------- */
/* ---------------- Awards and Media Mentions ----------------- */
/* -------------------- ------------------ -------------------- */
#award_background_AsteroidAthipathi {
	background: black url(img/awards/Asteroid_Athipathi.png) no-repeat center center;
}

#award_background_Catalyst {
	background: black url(img/awards/Catalyst_5.JPG) no-repeat center center;
}

#award_background_MIRO {
	background: black url(img/awards/NASA_MIRO_5.jpg) no-repeat center center;
}

#award_background_GPSC {
	background: black url(img/awards/UofA_5.png) no-repeat center center;
}

#award_background_GISAL {
	background: black url(img/awards/UofA_5.png) no-repeat center center;
}

#award_background_TechBriefs {
	background: black url(img/awards/techbriefs_5.png) no-repeat center center;
}

#award_background_UMich {
	background: black url(img/awards/UofM_5.png) no-repeat center center;
}

#award_background_NITT {
	background: black url(img/awards/NITT_5.png) no-repeat center center;
}

#award_background_UANews {
	background: black url(img/awards/UofA_5.png) no-repeat center center;
}

#award_background_PBS {
	background: black url(img/awards/PBS_5.jpg) no-repeat center center;
}

#award_background_Lunar {
	background: black url(img/awards/Lunar_5.png) no-repeat center center;
}

#award_background_NASAPress {
	background: black url(img/awards/Catalyst_5.JPG) no-repeat center center;
}

#award_background_Catalyst,
#award_background_AsteroidAthipathi,
#award_background_MIRO,
#award_background_GPSC,
#award_background_GISAL,
#award_background_TechBriefs,
#award_background_UMich,
#award_background_NITT,
#award_background_UANews,
#award_background_PBS,
#award_background_Lunar,
#award_background_NASAPress {
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	height: 200px;
	width: 100%;
}

.award {
	display: inline-block;
	position: relative;
	margin: 10px 10px;
	height: 250px;
	width: 475px;
	background-color: none;
	cursor: pointer;
	background: rgba(25, 25, 25, 0.9);
	-webkit-transition: height 0.5s;
	transition: height 0.5s;
	border: 1px solid rgb(0, 0, 0);
}

.awardImage {
	height: 200px;
	width: 471px;
	margin: 2px;
}

.awardDescription {
	top: 0px;
	position: absolute;
	margin: 5px 10px;
	opacity: 0;
	cursor: pointer;
	-webkit-transition: opacity 0.5s;
	transition: opacity 0.5s;
}

.award div div p,
.award div p {
	margin: 5px;
	color: white;
}

.award:hover {
	height: 300px;
	background: black;
}

.award:hover .awardImage {
	filter: brightness(0);
}

.award:hover .blockTitle {
	color: rgba(232, 232, 232, 0);
}

.award:hover .linksBar {
	opacity: 1;
}

/* -------------------- ------------------------ -------------------- */
/* -------------------- General Block Properties -------------------- */
/* -------------------- ------------------------ -------------------- */
.blockTitle {
	top: -16px;
	position: relative;
	font-size: 25px;
	color: rgba(232, 232, 232, 0.9);
}

/* -------------------- ---------- -------------------- */
/* -------------------- Contact Me -------------------- */
/* -------------------- ---------- -------------------- */
#resumeButton {
	padding-top: 5px;
	padding-right: 10px;
	position: fixed;
	top: 72.5%;
	right: 10px;
	width: 220px;
	height: 40px;
	font-size: 30px;
	font-family: HelveticaNeue-CondensedBold, HelveticaNeue-Thin, Helvetica, Arial;
	vertical-align: middle;
	text-align: right;
	color: white;
	transition: right 1s;
}

#resumeButton:hover {
	background-color: white;
	color: black;
	cursor: pointer;
}

#cvButton {
	padding-top: 5px;
	padding-right: 10px;
	position: fixed;
	top: 77.5%;
	right: 10px;
	width: 157px;
	height: 40px;
	font-size: 30px;
	font-family: HelveticaNeue-CondensedBold, HelveticaNeue-Thin, Helvetica, Arial;
	vertical-align: middle;
	text-align: right;
	color: white;
	transition: right 1s;
}

#cvButton:hover {
	background-color: white;
	color: black;
	cursor: pointer;
}

#portfolioButton {
	padding-top: 5px;
	padding-right: 10px;
	position: fixed;
	top: 82.5%;
	right: 10px;
	width: 157px;
	height: 40px;
	font-size: 30px;
	font-family: HelveticaNeue-CondensedBold, HelveticaNeue-Thin, Helvetica, Arial;
	vertical-align: middle;
	text-align: right;
	color: white;
	transition: right 1s;
}

#portfolioButton:hover {
	background-color: white;
	color: black;
	cursor: pointer;
}

/* The Lift Effect */
.platform:hover,
.job:hover,
.project:hover,
.invention:hover,
.award:hover {
	transform: translateY(-10px);
	border-color: #ffcc00;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6),
		0 0 15px rgba(255, 204, 0, 0.2);
	z-index: 50;
}

/* PC Stacking Fix: Ensures the Legend stays on top of later pages */
#page1 {
	z-index: 1000 !important;
}

/* Ensure later pages stay below the Legend context */
#page2,
#page3,
#page4,
#page5 {
	z-index: 1 !important;
}

/* Maintain the Legend's own priority */
#siteLegend,
#resumeButton,
#cvButton,
#portfolioButton {
	z-index: 10001 !important;
}

/* PC ONLY: Apply hover effects only when a mouse is used */
@media (hover: hover) {

	.platform:hover,
	.job:hover,
	.project:hover,
	.invention:hover,
	.award:hover {
		transform: translateY(-10px);
		border-color: #ffcc00;
		box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
		background: black;
	}

	.platform:hover .platformImage,
	.job:hover .jobImage,
	.project:hover .projectImage,
	.invention:hover .inventionImage,
	.award:hover .awardImage {
		filter: brightness(0);
	}

	.platform:hover .blockTitle,
	.job:hover .blockTitle,
	.project:hover .blockTitle,
	.invention:hover .blockTitle,
	.award:hover .blockTitle {
		color: rgba(232, 232, 232, 0);
	}

	.platform:hover .linksBar,
	.job:hover .linksBar,
	.project:hover .linksBar,
	.invention:hover .linksBar,
	.award:hover .linksBar {
		opacity: 1;
	}
}

/* -------------------- --------------- -------------------- */
/* -------------------- Mobile Friendly -------------------- */
/* -------------------- --------------- -------------------- */

/* Apply these rules ONLY for screens narrower than 800px */
@media only screen and (max-width: 800px) {

	/* Global Mobile Flow */
	html,
	body {
		overflow-y: auto !important;
		overflow-x: hidden !important;
		height: auto !important;
		-webkit-overflow-scrolling: touch;
		touch-action: auto !important;
	}

	main {
		overflow: visible !important;
		height: auto !important;
		touch-action: auto !important;
	}

	.content-wrapper {
		display: flex;
		flex-direction: column;
	}

	.page {
		position: relative !important;
		width: 100vw !important;
		left: 0 !important;
		top: 0 !important;
		height: auto !important;
		min-height: 100vh;
		display: block !important;
		padding-top: 80px;
	}

	.center {
		width: 100% !important;
		padding: 0 10px !important;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	/* Home Page Intro Text */
	#introText {
		font-size: 26px !important;
		width: 85% !important;
		white-space: normal !important;
		transform: translate(-50%, -50%) !important;
		margin-top: 100px !important;
	}

	/* Card Base State (Mirroring PC Resting) */
	.platform,
	.job,
	.project,
	.invention,
	.award {
		height: 250px !important;
		position: relative !important;
		overflow: hidden !important;
		transition: height 0.5s ease;
		width: 92vw !important;
		margin: 15px auto !important;
		border: 1px solid black;
		touch-action: pan-y !important;
		/* Forces native vertical scrolling to start instantly */
		-webkit-tap-highlight-color: transparent;
		/* Removes the gray flicker on tap */
	}

	.blockTitle {
		position: absolute !important;
		bottom: 0 !important;
		top: auto !important;
		/* Clears any 'top' values from desktop or previous fixes */
		width: 100% !important;
		height: 40px !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		background-color: rgba(30, 30, 30, 0.9) !important;
		font-size: 16px !important;
		z-index: 10;
		transition: opacity 0.3s, color 0.3s;
	}

	.platformImage,
	.jobImage,
	.projectImage,
	.inventionImage,
	.awardImage {
		width: 100% !important;
		height: 180px !important;
		background-size: cover !important;
	}

	/* Expanded State (Mirroring PC Hover) */
	.expanded {
		height: 420px !important;
		background: black !important;
	}

	.expanded .blockTitle {
		opacity: 0 !important;
		color: rgba(232, 232, 232, 0) !important;
		pointer-events: none;
		/* Prevents title bar from blocking link taps */
	}

	.expanded .linksBar {
		opacity: 1 !important;
		visibility: visible !important;
		pointer-events: auto !important;
	}

	/* Fades title like PC hover */
	.expanded [class*="Image"] {
		filter: brightness(0) !important;
	}

	/* Top-align content for all expanded descriptions */
	[class*="Description"] {
		display: flex !important;
		flex-direction: column !important;
		justify-content: flex-start !important;
		/* Forces text to the TOP */
		align-items: center !important;
		text-align: center;
		height: calc(100% - 50px) !important;
		padding: 25px 15px 15px 15px !important;
		/* Extra top padding for breathing room */
		box-sizing: border-box;
		overflow-y: auto;
	}

	/* Blacks out image like PC hover */
	.expanded .background {
		filter: brightness(0.1) !important;
	}

	/* Description (Centered like PC Hover) */
	.platformDescription,
	.jobDescription,
	.projectDescription,
	.inventionDescription,
	.awardDescription {
		opacity: 0;
		display: flex !important;
		flex-direction: column !important;
		justify-content: flex-start !important;
		align-items: center !important;
		text-align: center;
		height: calc(100% - 50px) !important;
		padding: 30px 15px 15px 15px !important;
		box-sizing: border-box;
		overflow-y: hidden !important;
		pointer-events: none !important;
		transition: opacity 0.3s;
	}

	/* Expanded state remains the same */
	.expanded [class*="Description"] {
		opacity: 1 !important;
		position: absolute !important;
		top: 0 !important;
		z-index: 5;
		overflow-y: auto !important;
		pointer-events: auto !important;
	}

	/* LinksBar (Pinned to bottom like PC) */
	.linksBar {
		position: absolute !important;
		bottom: 0 !important;
		width: 100% !important;
		height: 50px !important;
		z-index: 30 !important;
		opacity: 0 !important;
		visibility: hidden !important;
		pointer-events: none !important;
		transition: opacity 0.3s ease;
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
		background-color: rgb(24, 24, 24) !important;
	}

	.linksBar a {
		margin: 0 10px !important;
		display: inline-block !important;
	}

	/* UI Navigation Cleanup */
	#topButtons {
		gap: 2px !important;
		padding: 0 4px;
		justify-content: center !important;
	}

	#siteLegend {
		position: relative !important;
		left: 0 !important;
		top: 0 !important;
		transform: none !important;
		width: 92vw !important;
		margin: 20px auto !important;
		opacity: 1 !important;
		/* Always visible in the scroll flow */
		pointer-events: auto !important;
		border-radius: 15px !important;
		border-left: 1px solid rgba(255, 204, 0, 0.2) !important;
		color: white !important;
		text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
		/* Adds contrast */
	}

	.iconsGrid {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		gap: 15px;
	}

	.mobileOnly {
		display: inline;
	}

	.pcOnly {
		display: none;
	}

	.footerButton {
		font-size: 11px !important;
		padding: 0 3px !important;
	}

	#lastModified {
		display: none !important;
	}

	#sidebar {
		display: flex !important;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		position: relative !important;
		width: 100% !important;
		height: auto !important;
		top: 0 !important;
		right: 0 !important;
		background: transparent !important;
		margin: 80px 0 !important;
		/* Pushes it to the very end of the scroll flow */
		z-index: 100 !important;
	}

	#resumeButton,
	#cvButton,
	#portfolioButton {
		order: 1;
		/* Appears first in the flex container */
		width: 80% !important;
		flex: 0 0 80%;
		margin: 10px auto !important;
		position: relative !important;
		display: flex !important;
		justify-content: center;
		align-items: center;
		font-size: 20px !important;
		background-color: rgba(40, 40, 40, 0.95) !important;
		border: 1px solid #ffcc00;
		border-radius: 8px;
		height: 50px !important;
		visibility: visible !important;
		/* Force visibility over script logic */
	}

	#sidebar a:not([id$="Button"]) {
		order: 2;
		/* Appears after buttons */
		margin: 15px 10px !important;
		display: inline-block !important;
	}

	.sidebarIcon {
		width: 45px !important;
		/* Slightly smaller for a single row on mobile */
	}

	/* Ensure script-added .hidden class doesn't kill the layout */
	.hidden {
		display: flex !important;
	}
}