/* Landscape-only overlay */
#rotateDeviceOverlay {
	display: none;
}

@media screen and (orientation: portrait) and (max-width: 767px) {
	#rotateDeviceOverlay {
		display: flex;
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: #201E20;
		color: #DDC3A5;
		font-size: 5vw;
		align-items: center;
		justify-content: center;
		text-align: center;
		z-index: 9999;
		font-family: "Open Sans", sans-serif;
		padding: 5vw;
		box-sizing: border-box;
	}

	#content {
		display: none !important;
	}
}

/* Color Hexes: Beige #DDC3A5, Black-brown #201E20, Tan #E0A96D */
html {
	scroll-behavior: smooth;
	scroll-padding-top: 6.32vh;
}
  
  body {
	margin: 0;
	background: #201E20;
	font-family: Helvetica, sans-serif;
	font-size: 1vw;
  }
  
  h1, h3 {
	margin: 0;
  }
  
  a {
	text-decoration: none;
  }
  a:visited {
	color: black;
  }
  
  /* Navigation Bar */
  #menu {
	font-family: Montserrat, sans-serif;
	background: #DDC3A5;
	position: fixed;
	top: 0;
	width: 100%;
	height: 6.32vh;
	line-height: 5.8vh;
	display: flex;
	justify-content: space-around;
	z-index: 1;
  }
  
  #ghostMenu {
	width: 100%;
	height: 6.32vh; /* Spacer to prevent overlap from fixed nav */
  }
  
  #scrollBar {
	position: fixed;
	width: 15%;
	height: 0.75vh;
	margin-top: -0.75vh;
	margin-left: 17.5%;
	background-color: #876307;
	border-radius: 1vw;
	z-index: 2;
  }
  
  #myName {
	font-family: Georgia, serif;
	font-size: 2vw;
	margin-top: 0.15vh;
	width: 15%;
	text-align: center;
  }

  .otherLinks:link {
	color: rgb(0, 0, 255) !important;
  }

  .otherLinks:visited { 
	color: magenta; 
  }

  .otherLinks:link:active, .otherLinks:visited:active { 
	color: red; 
  }

  .blueLinkThing:link {
	color: rgb(0, 255, 102) !important;
  }
  
  .links {
	color: #ff6f61;
	width: 15%;
	text-align: center;
	font-size: 1.5vw;
	transition: color 1s, box-shadow 0.3s;
  }
  
  .links:hover {
	color: red;
	box-shadow: rgba(0, 0, 0, 0.35) 0 0.107vw 1.686vh;
	opacity: 0.85;
	font-size: 3.37vh;
  }
  
  .links:focus {
	box-shadow: rgba(0, 0, 0, 0.5) 0 0 0 0.161vw;
  }
  
  .links:active {
	box-shadow: inset rgba(0, 0, 0, 0.35) 0 0.107vw 1.686vh;
  }
  
  /* Hero Section */
#galaxy {
  width: 100vw;
  height: 93.6vh;
  background-image: url("Images/WhirpoolGalaxy.jpeg");
  background-size: cover;
  opacity: 0.6;
  text-align: center;
  transition: opacity 1.5s ease-in-out;
}

.fade-out {
  opacity: 0;
}

.fade-in {
  opacity: 0.6;
}
  
  .onImage {
	color: white;
	font-family: "Open Sans", sans-serif;
  }
  
  #onImageH1 {
	font-size: 3vw;
	animation: slideInLeft 1.5s;
  }
  
  #onImageH3 {
	font-size: 1.5vw;
	animation: slideInRight 1.5s;
  }
  
  @keyframes slideInLeft {
	from { transform: translateX(-40%); }
	to { transform: translateX(0%); }
  }
  
  @keyframes slideInRight {
	from { transform: translateX(40%); }
	to { transform: translateX(0%); }
  }
  
  /* Contact Section */
  #contactSites {
	position: fixed;
	bottom: 0;
  }
  
  /* About Me Section */
  #aboutMe {
	color: green;
	font-family: monospace;
	text-align: center;
	height: 89vh;
  }
  
  #aboutMeH1 {
	font-family: "Playfair Display", serif;
	margin: 5vh 0 17.5vh 0;
	font-size: 5vw;
  }
  
  #aboutMeDiv {
	width: 50vw;
	margin: auto;
  }
  
  #experience {
	margin-top: 5vh;
	font-family: "Open Sans", sans-serif;
	text-align: center;
	background: #012d5a;
	height: 96vh;
	color: white;
	position: relative;
  }

  .date, .job, .jobImage {
	position: absolute;
  }

  .date, .job {
	margin-top: 5%;
  }

  .date {
	left: 15%;
	opacity: 0.7;
  }

  .job {
	left: 50%;
	transform: translateX(-50%);
  }

  .jobImage {
	left: 67.5%;
  }

  .toolsUsed {
	font-size: .82vw;
	background: rgb(18, 100, 125);
	color: rgb(94, 255, 255);
	padding: .4vw;
	margin: 4px 2px;
	border-radius: 1.02vw;
	display: inline-block; /* Ensure it's inline and won't push elements */
  }


  #experienceListUSAA {
	text-align: left;
	margin-top: 16%;
  }

  li {
	width: 50vw;
	margin-left: 25%;
  }

  /* Skills Section */
  #skills {
	color: #4BBC8E;
	text-align: center;
	background: #2F4858;
	height: 110vh;
  }
  
  #skillsH1 {
	font-family: "Playfair Display", serif;
	padding-top: 5vh;
	font-size: 5vw;
	width: 50%;
	margin-left: auto;
	margin-right: auto;
  }
  
  #gridContainer {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: 20vh;
	gap: 5vh 0vh;
	width: 50%;
	margin: auto;
  }
  
  .gridItem {
	font-family: "Roboto Slab", serif;
	font-size: 2vw;
	aspect-ratio: 1 / 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
  }
  
  .gridItem div {
	margin-top: 0.8vw;
  }
  
  .langImages {
	width: 6vw;
  }
  
  /* Explicit Grid Positioning */
  #item1 { grid-column: 1; grid-row: 1; }
  #item2 { grid-column: 2; grid-row: 1; }
  #item3 { grid-column: 3; grid-row: 1; }
  #item4 { grid-column: 1; grid-row: 2; }
  #item5 { grid-column: 2; grid-row: 2; }
  #item6 { grid-column: 3; grid-row: 2; }
  #item7 { grid-column: 1; grid-row: 3; }
  #item8 { grid-column: 2; grid-row: 3; }
  #item9 { grid-column: 3; grid-row: 3; }
  
  /* Projects Section */
  #projects {
	padding-top: 10vw;
  }
  
  .projectImages {
	width: 30vw;
  }
  
  .descriptionText {
	display: inline-block;
	width: 35vw;
	color: #D08261;
	margin: 0 10vw;
	font-family: "Open Sans", sans-serif;
  }
  
  .projectLinks {
	text-decoration: underline;
	color: lightskyblue;
  }
  
  .projectLinks:hover {
	color: hotpink;
  }
  
  .projectLinks:active {
	color: lightgreen;
  }
  
  /* Individual Project Layout */
  #marioMedleyDiv {
	margin-left: 10vw;
	margin-bottom: 20vh;
  }
  
  #retroSmashDiv {
	margin-right: 10vw;
	margin-bottom: 50vh;
  }
  
  #towerDefenseDiv {
	margin-left: 10vw;
	margin-bottom: 20vh;
  }
  
  #tetrisDiv {
	margin-right: 10vw;
	margin-bottom: 70vh;
  }
  
  #solitaireDiv {
	margin-left: 10vw;
	margin-bottom: 20vh;
	height: 50vh;
  }
  
  /* Footer Logos */
  .logos {
	width: 3.5vw;
	padding: 1.05vh 0.536vw;
  }