/* ---------------------- FONTS ---------------------- */
@font-face {
  font-family: 'MyFont';
  src: url('fonts/ABC Monument-Grotesk/ABCMonumentGrotesk-Regular-Trial.otf') format('opentype');
}

@font-face {
  font-family: 'MyFont2';
  src: url('fonts/ABC Monument-Grotesk/ABCMonumentGrotesk-Bold-Trial.otf') format('opentype');
}

@font-face {
  font-family: 'MyFont3';
  src: url('fonts/ABC Monument-Grotesk/ABCMonumentGrotesk-Heavy-Trial.otf') format('opentype');
}
.body{
  cursor:none;
}
.about.email {
  font-size: 20px;
}
.about.linkedin {
  font-size: 20px;
}
.about.experience-link{
  font-size: 20px;
}
/* Email hover */
.about.email:hover {
  text-decoration: underline;
  color: #ff3939; /* red-ish */
}
/* LinkedIn hover */
.about.linkedin:hover {
  text-decoration: underline;
  color: #4165f9; /* LinkedIn blue */
}
.about.experience-link:hover {
  text-decoration: underline;
  color: #49e889; /* LinkedIn blue */
}

.back-home-icon {
  position: fixed;
  top: 13px;
  left: 10px;
  width: 35px;
  z-index: 1000;
  cursor: none;
  display: none; /* hidden initially */
}
/* Default state */
.email-link {
  color: rgb(31, 31, 31);
  font-weight: bold;
  cursor: none;
  transition: color 0.5s;
  font-size: 18px;
}

/* Hover state */
.email-link:hover {
  animation: emailColorWave 2.0s linear infinite;
}
.image-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.9);
  justify-content: center;
  align-items: center;
  cursor: pointer; /* show that the user can click to close */
}

/* ---------------------- GLOBAL ---------------------- */
body {
  height: 100vh;
  margin: 0;
  display: flex;
  overflow: hidden;
  font-family: 'MyFont', sans-serif;
  cursor: none;
}

#custom-cursor {
  position: fixed;
  width: 22px;
  height: 22px;
  opacity: 0.92;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 9999;
}

/* ---------------------- LAYOUT COLUMNS ---------------------- */
.column {
  height: 100%;
  padding: 2rem;
  overflow-y: auto;
  scrollbar-width: none;
}

.column::-webkit-scrollbar {
  display: none;
}

/* Column sizes */
.first  { flex: 1.2; padding: 57px 25px 0px 25px; overflow: hidden; }
.second { flex: 1.7; padding: 10px 7px; display: none; flex-direction: column; align-items: center; gap: 20px; }
.third  { flex: 2.8; padding: 17px; padding-right: 30px; order: 4; }
.fourth { flex: 6.5; padding: 16px 12px; order: 3; }

/* ---------------------- FIRST COLUMN ---------------------- */
.myname {
  font-size: 25px;
  font-family: 'MyFont';
  margin-top: 5px;
}

.information {
  margin-top: 20px;
  font-size: 18.5px;
  line-height: 17px;
}

.information p:hover {
  -webkit-text-stroke: .7px;
  font-size: 19px;
  transition: all 0.35s ease;
  cursor: none;
}

.first-information {
  height: 140px;
  margin: 0;
  padding: 16px 0 0 0;
  line-height: 24px;
  cursor: none;
}

.first-information p {
  margin: 7px 0;
}

.first-content {
  display: flex;
  flex-direction: column;
  padding: 20px 0 0 0;
  line-height: 1;
  gap: 3.5px;
}

.first-content p {
  margin: 0;
  color: rgb(31, 31, 31);
  font-size: 13px;
  line-height: 14px;
  font-family: 'MyFont2';
  transition: 0.3s;
}

.first-content p:hover {
  font-family: 'MyFont3';
  font-size: 13px;
}

/* ---------------------- SECOND COLUMN (TEXT MENU) ---------------------- */

.menu-item {
  font-size: 18.5px;
  font-family: 'MyFont';
  line-height: 17px;
  cursor: none;
  transition: all 0.35s ease;
  -webkit-text-stroke: 0px transparent;
  margin-top: 18.26px;
}
.menu-item:hover{
 -webkit-text-stroke: .7px;
  font-size: 19px;
  transition: all 0.35s ease;
  cursor: none;
}
/* HOVER — same as information column */

/* ACTIVE (clicked project) */
.menu-item.active {
  font-family: 'MyFont2'; /* bold version stays selected */
}

/* ---------------------- THIRD COLUMN (DESCRIPTIONS) ---------------------- */
.column.third {
  height: 100vh;      /* makes column full screen height */
  overflow-y: auto;   /* enables vertical scrolling */
}
.scroll-spacer {
  height: 80px;
}
.column.third h2 {
  margin-bottom: 7px;
  font-size: 22px;
  line-height: 24px;
  font-family: 'MyFont';
}

.column.third p {
  font-size: 19px;
  line-height: 24px;
  margin-top: 0;
  margin-bottom: 20px;

}

.column.third .description {
  display: none;
}

.column.third .description.active {
  display: block;
}

/* Ensure images inside descriptions (if added later) scale */
.column.third img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 15px;
}
.project-keywords {
  margin: 7px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px; /* space between keyword boxes */
}

.project-keywords span {
  background-color: rgb(31, 31, 31); /* light gray, adjust as needed */
  color: #ffffff;
  padding: 5px 10px;
  border-radius: 20px;  /* makes the rounded pill shape */
  font-size: 15px;
  font-family: 'MyFont';
}
/* ---------------------- FOURTH COLUMN (PROJECTS) ---------------------- */
.column.fourth h2 {
  position: sticky;
  top: 0;
  margin: 0 0 8px 0;
  font-size: 20px;
  font-family: 'MyFont';
  background: transparent;
  z-index: 10;
}

.column.fourth p {
  font-size: 15px;
}
.about {
  display: inline-block; /* important so margin works nicely */
  margin-right: 12px;    /* space between items */
  text-decoration: none;
  color: rgb(31, 31, 31);
  transition: color 0.2s ease, text-decoration 0.2s ease;

}
#about-section p  {
  font-size: 20px;        /* change this to whatever size you want */
  font-family: 'MyFont'; /* optional: match your other content */
  color: inherit;         /* inherits light/dark mode color */
  margin-top: 10px;
  cursor: none;
  line-height: 24px;
}
#experience-section p {
  font-size: 15px;        /* change this to whatever size you want */
  line-height: 17px;
  font-family: 'MyFont'; /* optional: match your other content */
  margin: 3px;
  color: inherit;         /* inherits light/dark mode color */
}
#about-section {
  max-width: 520px;   /* control width here */
  width: 100%;
  margin: 0 auto;     /* center it */
}
#experience-section {
  max-width: 520px;   /* control width here */
  width: 100%;
  margin: 0 auto;     /* center it */
  margin-top: 10px;
}

.project {
  display: none;
  width: 100%;
  box-sizing: border-box;
  margin: 60px 0 30px 0;
}

.project.active {
  display: block;
  margin-top: 0;
}

/* ---------------------- PROJECT IMAGES & VIDEOS ---------------------- */
.project img,
.project-video {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 20px;
  object-fit: cover;
}

#proj5 .project-video2 {
  width: 480px;
  height: auto;
  display: block;
  margin: 0 auto;
}

#proj7 img {
  width: 100%;
  max-width: 470px;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* ---------------------- PROJECT ROWS ---------------------- */
.project-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 15px;
}

.project-row img {
  width: 100%;
  max-width: calc((100% - 30px)/4);
  height: auto;
  object-fit: cover;
}

.project-row.two-col img {
  width: 100%;
  max-width: calc((100% - 10px)/2);
}

/* ---------------------- SPECIAL ELEMENTS ---------------------- */
#HELlogo { width: 100%; margin: 25px 0 20px 0; }
#HELsigns { margin-bottom: 20px; }
#doors { margin-bottom: 20px; }

.corner-gif {
  position: fixed;
  top: 30px;
  left: 25px;
  width: 50px;
  z-index: 1000;
  pointer-events: auto;
  cursor: pointer;
}

/* ---------------------- LAUNCH SITE TOOLTIP ---------------------- */
.launch-site {
  position: relative;
  font-family: 'MyFont2';
}

.launch-site::after {
  content: "(launch site)";
  position: absolute;
  top: 50%;
  left: 45%;
  background: rgb(31, 31, 31);
  color: white;
  font-size: 11px;
  opacity: 0;
  padding: 4px 8px;
  transition: opacity 0.2s;
  pointer-events: none;
}

.launch-site:hover::after {
  opacity: 1;
}
.launch-link {
  color: rgb(31, 31, 31);           /* text color */
  text-decoration: none;     /* remove underline */
  font-weight: 500;
  position: relative;        /* needed for pseudo-element */
  transition: color 0.3s;
}

/* Hover: underline animation */
.launch-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;              /* slightly below text */
  width: 0;
  height: 2px;
  background-color: rgb(31, 31, 31);
  transition: width 0.3s;
}

.launch-link:hover {
  cursor: none;
  color: rgb(31, 31, 31);            /* slightly darker text on hover */
}

.launch-link:hover::after {
  width: 100%;    
}

/* Light mode */
.light-mode .column {
  background-color: white !important;
  color: black !important;
}

/* Dark mode */
.dark-mode .column {
  background-color: black !important;
  color: white !important;
}

/* Dark mode for paragraphs in first content */
body.dark-mode .first-content p {
  color: white;
}