:root {
  --bg-primary-color: #101736;
  --bg-secondary-color: #210111;
  --bg-third-color: #040404;
  --white: #fff;
  --black: #040404;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}

html {
  height: -webkit-fill-available;
}

body {
  min-height: 100vh;
  background: linear-gradient(180deg,
      var(--bg-third-color) 0%,
      var(--bg-primary-color) 50%,
      var(--bg-secondary-color) 100%);
  background-attachment: fixed;
  color: var(--white);
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  overflow-x: hidden;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.scene {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
}

.scene i {
  position: absolute;
  background: white;
  pointer-events: none;
  border-radius: 50%;
  animation: animate linear infinite;
  z-index: -1;
}

@keyframes animate {
  0% {
    transform: translateY(0);
    opacity: 0;
  }

  10%,
  90% {
    opacity: 1;
  }

  100% {
    transform: translateY(-100px);
    opacity: 0;
  }
}

main,
footer {
  z-index: 5;
}

header {
  z-index: 6;
}

header ul {
  width: 88%;
  height: 70px;
  list-style-type: none;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  padding: 0;
  margin: 0 auto;
}

header li {
  height: 45px;
  display: flex;
  align-items: center;
  padding: 0 20px;
}

header a {
  height: 100%;
  /* padding: 0 20px; */
  color: var(--white);
  text-decoration: none;
  display: flex;
  align-items: center;
}

header nav li:first-child {
  margin-right: auto;
}

.logo {
  font-family: 'Outfit', sans-serif;
  font-size: 2rem;
  cursor: pointer;
}

header li:not(:first-child) {
  font-weight: 500;
}

header li:not(:first-child):hover,
header li:not(:first-child):active,
header li:not(:first-child):focus {
  border: 1px solid var(--white);
  transition: 0.3s ease-in-out;
}

.sidebar {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 250px;
  z-index: 999;
  background-color: rgba(16, 23, 54, 0.6);
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: none;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: flex-start;
}

.sidebar li {
  width: 100%;
  padding: 1rem;
}

.sidebar a {
  width: 100%;
  margin: 0;
  padding: 0;
}

.menu-button {
  display: none;
}

/* Dropdown Container */
.dropdown {
  position: relative;
}

/* Dropdown Button */
.dropbtn {
  background-color: transparent;
  color: var(--white);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.dropbtn::after {
  font-size: 12px;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: -1.5rem;
  text-align: left;
  min-width: 150px;
  z-index: 1;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Dropdown Items */
.dropdown-content li {
  color: var(--white);
  /* padding: 12px 16px; */
  cursor: pointer;
}

.dropdown_item:hover,
.dropdown_item:focus {
  border: 1px solid var(--white);
  transition: 0.3s ease-in-out;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content,
.dropdown:focus .dropdown-content {
  display: block;
}

/* Responsive Adjustments for Sidebar */
#showSideBarButton svg {
  stroke: var(--white);
}

.sidebar .dropdown {
  width: 100%;
}

.sidebar .dropbtn {
  width: 100%;
  text-align: left;
  padding: 12px 0;
  position: relative;
}

.sidebar .dropdown-content {
  position: static;
  /* Remove absolute positioning for sidebar */
  box-shadow: none;
  position: absolute;
  top: 100%;
  left: 0;
}

@keyframes glowEffect {
  0% {
    filter: drop-shadow(0 0 5px rgba(255, 204, 112, 0.7));
  }

  50% {
    filter: drop-shadow(0 0 15px rgba(255, 204, 112, 1));
  }

  100% {
    filter: drop-shadow(0 0 5px rgba(255, 204, 112, 0.7));
  }
}

/* Wobble Effect for the Cord */
@keyframes wobble {
  0% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-5px);
    /* Move to the left */
  }

  50% {
    transform: translateX(5px);
    /* Move to the right */
  }

  75% {
    transform: translateX(-3px);
    /* Move a little to the left */
  }

  100% {
    transform: translateX(0);
    /* Back to center */
  }
}

/* Wobble effect */
@keyframes wobble {
  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(-5deg);
  }

  50% {
    transform: rotate(5deg);
  }

  75% {
    transform: rotate(-3deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

.wobble {
  animation: wobble 0.4s ease-in-out;
}

/********** Main Section **********/

section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: auto;
  width: 80%;
  margin: 5rem auto;
}

#job_title {
  font-family: 'Outfit', sans-serif;
  text-align: center;
  font-size: 4.8rem;
  margin: 1rem 0;
}

#description {
  color: var(--white);
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.5;
  margin: 1rem 0;
  text-align: justify;
}

#social_media {
  display: flex;
  justify-content: space-around;
  align-items: center;
  list-style-type: none;
  width: 15%;
  margin: 1rem 0;
}

#social_media svg {
  fill: var(--white);
}

canvas {
  display: block;
}

#skills_title,
#projects_title {
  font-size: 4.5rem;
  font-family: 'Outfit', sans-serif;
  margin-bottom: 3rem;
  /* Space between title and skill blocks */
}

#skills_title {
  margin-bottom: 0;
  /* Remove bottom margin for better spacing with skill blocks */
}

/* Container adjustment */
#skill_blocks_container {
  display: flex;
  gap: 4rem;
  /* Adds space between cards */
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  padding: 0 2rem;
}

/* --- Core Container --- */
.star-map-container {
  position: relative;
  width: 100%;
  min-height: 550px;
  /* Base height */
  margin: 0 auto;
  perspective: 1000px;
  overflow: visible;
}

/* --- Constellation Lines --- */
.constellation-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.constellation-line {
  fill: none;
  stroke: rgba(255, 255, 255, 0.25);
  /* More subtle */
  stroke-width: 1px;
  stroke-dasharray: 6 4;
  /* Elegant dashed pattern */
  stroke-linecap: round;
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.2));
}

@keyframes lineFade {
  from {
    opacity: 0.2;
  }

  to {
    opacity: 0.6;
  }
}

/* --- Skill Nodes (Stars) --- */
.skill-node {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Tell the browser to scale from the center to prevent constellation line drifting */
  transform-origin: center center;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: pointer;
  z-index: 2;
}

.star-glow {
  border-radius: 50%;
  margin-top: 8px;
  animation: pulse 3s infinite ease-in-out;
}

.skill-label {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.3s ease, text-shadow 0.3s ease;
}

/* --- Proficiency Hierarchy --- */
/* Expert: Top skills like VueJS, ReactJS, Laravel  */
.expert .skill-label {
  font-size: 1.4rem;
  color: #ffcc70;
  text-shadow: 0 0 15px #ffcc70;
}

.expert .star-glow {
  background: #ffcc70;
  box-shadow: 0 0 20px #ffcc70;
  width: 12px;
  height: 12px;
}

/* Advanced: Solid stack like PostgreSQL, NodeJS, PHP [cite: 10, 61, 62] */
.advanced .skill-label {
  font-size: 1.1rem;
  color: #ffffff;
}

.advanced .star-glow {
  background: #ffffff;
  box-shadow: 0 0 15px #ffffff;
  width: 8px;
  height: 8px;
}

/* Intermediate: MongoDB, Java, Python  */
.intermediate .skill-label {
  font-size: 1rem;
  /* Slightly larger for legibility */
  color: rgba(255, 255, 255, 0.9);
  /* Much more opaque */
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
  /* Subtle label glow */
  opacity: 1;
  /* Ensure they aren't faded */
}

.intermediate .star-glow {
  background: rgba(255, 255, 255, 0.8);
  width: 6px;
  height: 6px;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.5);
  /* Stronger star glow */
  opacity: 1;
}

/* --- Interactivity --- */
.skill-node:hover {
  z-index: 10;
}

.skill-node:hover .skill-label {
  transform: scale(1.2);
  color: #fff;
  opacity: 1;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
}

@keyframes pulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 0.8;
  }

  50% {
    transform: scale(1.3);
    opacity: 1;
  }
}

@keyframes twinkle {

  0%,
  100% {
    opacity: 0.7;
  }

  50% {
    opacity: 1;
    text-shadow: 0 0 12px white;
  }
}

.intermediate .skill-label {
  animation: twinkle 4s infinite ease-in-out;
}

/* Tooltip Styling */
.skill-node::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 130%;
  left: 50%;
  transform: translateX(-50%);
  width: 220px;

  /* High Contrast Background */
  background: #101736;
  /* Using your solid --bg-primary-color */
  color: #ffffff;
  border: 1.5px solid rgb(255, 204, 112);
  /* Expert gold color */

  padding: 12px;
  border-radius: 10px;
  font-family: sans-serif;
  /* Clean font for small text */
  font-size: 0.85rem;
  line-height: 1.4;
  text-align: center;

  /* Hidden state */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 999;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.6);
}

/* Show on Hover */
.skill-node:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Triangle/Arrow for the tooltip */
.skill-node:hover::before {
  content: '';
  position: absolute;
  bottom: 110%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 8px;
  border-style: solid;
  border-color: rgba(255, 204, 112, 0.5) transparent transparent transparent;
  opacity: 1;
  transition: all 0.3s ease;
}

#parcours {
  min-height: 500px;
  max-width: 1200px;
  position: relative;
}

#parcours_title {
  font-size: 4.5rem;
  font-family: 'Outfit', sans-serif;
  margin-bottom: 7.5rem;
  position: relative;
  z-index: 10;
  /* Ensure title is on top */
  display: block;
  /* Force visibility in desktop */
  visibility: visible;
}

#projects {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: auto;
  margin-top: 8rem;
  padding-bottom: 5rem;
}

#projects_container {
  display: grid;
  /* Auto-fit columns, min-width 300px, max 1fr */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  width: 100%;
  max-width: 1200px;
  /* Limits the overall width */
  margin-top: 2rem;
}

.project-card {
  display: flex;
  flex-direction: column;
  /* Darker glass effect to keep project screenshots legible */
  background: rgba(16, 23, 54, 0.5);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  /* Thin, glowing border */
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  transition: all 0.4s ease;
}

.project-card:hover {
  transform: translateY(-12px);
  /* Brighter glow on hover to match your star nodes */
  border-color: rgba(255, 204, 112, 0.4);
  box-shadow: 0 0 25px rgba(255, 204, 112, 0.1);
}

.card-image-container {
  height: 300px;
  /* Fixed height for image area */
  overflow: hidden;
  border-bottom: 1px solid var(--white);
}

.card-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.8) contrast(1.1);
  transition: filter 0.4s ease;
}

.project-card:hover .card-image-container img {
  /*transform: scale(1.05);*/
  filter: brightness(1);
}

.card-info {
  padding: 2rem 1.5rem;
  background: transparent;
  /* Remove any solid background */
  text-align: center;
}

.card-info h3 {
  color: var(--white);
  font-family: 'Outfit', sans-serif;
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
}

.tech-stack-preview {
  color: #ffcc70;
  /* Use your "Expert Star" gold color for the tech tags */
  font-weight: 600;
  letter-spacing: 1px;
  margin-bottom: 10px;
}

.view-details-btn {
  margin-top: auto;
  /* Pushes button to the bottom if content varies */
  padding: 0.8rem 1.5rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--white);
  border-radius: 50px;
  /* Pill shape to match Skill tags */
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.view-details-btn:hover {
  background: var(--white);
  color: var(--bg-primary-color);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
}

#get_in_touch {
  font-size: 4.5rem;
  margin-bottom: 4rem;
  font-family: 'Outfit', sans-serif;
}

#contact_form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 70%;
  height: 80%;
  margin: auto;
  margin-bottom: 70px;
}

#contact_form #name {
  width: 90%;
  display: flex;
  gap: 1rem;
}

#contact_form #mail {
  width: 90%;
  display: flex;
  flex-direction: column;
  margin: 0.5rem 0;
  padding: 0.5rem 0;
}

#contact_form input {
  width: 100%;
  margin: 0.5rem 0;
  padding: 0.5rem;
  border: 1px solid var(--white);
  border-radius: 5px;
  background-color: transparent;
  color: var(--white);
}

#contact_form input::placeholder,
textarea::placeholder {
  color: var(--white);
}

#contact_form textarea {
  width: 90%;
  height: 200px;
  margin: 0.5rem 0;
  padding: 0.5rem;
  border: 1px solid var(--white);
  border-radius: 5px;
  background-color: transparent;
  color: var(--white);
}

#contact_form button {
  display: flex;
  margin: 1rem 0;
  padding: 0.5rem 1.2rem;
  font-weight: 500;
  border: 1px solid var(--white);
  ;
  border-radius: 5px;
  background-color: transparent;
  color: var(--white);
  cursor: pointer;
  align-items: center;
  gap: 0.5rem;
}

#contact_form button:hover,
#contact_form button:active,
#contact_form button:focus {
  background-color: var(--white);
  ;
  color: var(--black);
  transition: 0.3s ease-in-out;
}

#contact_form button:hover svg path {
  fill: var(--black);
}

#error_msg {
  display: none;
  width: 90%;
  padding: 1rem;
  margin-bottom: 1.5rem;
  border-radius: 8px;
  background: rgba(255, 77, 77, 0.1);
  border: 1px solid rgba(255, 77, 77, 0.3);
  color: #ff4d4d;
  /* High contrast red */
  text-align: center;
  font-weight: 600;
  backdrop-filter: blur(5px);
}

footer {
  flex-shrink: 0;
}

footer ul {
  width: 90%;
  height: 90px;
  list-style-type: none;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  margin: 0 auto;
  border-top: 1.5px solid var(--white);
}

footer svg {
  fill: var(--white);
}

/**
  * Media Queries for Responsive CSS
  */

@media screen and (max-width: 1500px) {

  #studio,
  #ski {
    flex-direction: column;
  }

  .img_container {
    width: 100%;
    height: 500px;
    margin-bottom: 25px;
  }

  .project_info {
    width: 100%;
    margin-top: 2rem;
  }

  /* Reorder the elements */
  #ski .img_container {
    order: 1;
    /* Move the image container above the text for #ski */
  }

  #ski .project_info {
    order: 2;
    /* Keep the project info below the image */
  }
}

@media screen and (max-width: 1300px) {
  header {
    width: 90%;
    margin: auto;
  }

  header li,
  header a {
    padding: 0 10px;
  }
}

@media screen and (max-width: 1200px) {
  #about_me {
    display: flex;
    flex-direction: column;
    margin-top: 8rem;
    /*margin-bottom: 25rem;
  }

  #skills {
    display: flex;
    flex-direction: column;
    /*margin-top: 25rem;*/
  }

  #skill_blocks_container {
    flex-wrap: wrap;
    justify-content: space-evenly;
  }

  .skill_block {
    width: 40%;
    height: auto;
    padding: 1rem 0;
    margin-bottom: 8%;
  }

  .skill_block ul {
    margin-bottom: 2.5rem;
  }

  /*#projects {
    margin-top: 28rem;
  }*/

  .img_container {
    height: 400px;
  }

  #studio .img_container {
    margin-top: -100px;
  }

  .project_info {
    height: 400px;
  }

  .project_info h2 {
    font-size: 2.5rem;
  }

  .project_info ul {
    width: 40%;
  }

  .project_info p {
    font-size: 1rem;
  }

  .project_info a {
    font-size: 1rem;
  }
}

@media screen and (max-width: 1000px) {
  .hideOnMobile {
    display: none;
  }

  .menu-button {
    display: block;
  }

  #about_me {
    display: flex;
    flex-direction: column;
    /*margin-bottom: 28rem;*/
  }

  #job_title {
    font-size: 3.5rem;
  }

  #skills {
    display: flex;
    flex-direction: column;
    /*margin-top: 28rem;*/
  }

  .skill_block {
    width: 47%;
    padding: 1rem 0;
  }

  footer ul {
    flex-direction: column-reverse;
    justify-content: center;
    align-items: center;
    line-height: 1.8rem;
    height: 150px;
  }

  footer ul p {
    text-align: center;
  }
}

@media screen and (max-width: 800px) {

  #job_title,
  #get_in_touch,
  #projects_title,
  #skills_title,
  #parcours_title {
    font-size: 3rem;
  }

  #parcours_title {
    margin-bottom: 3rem;
  }

  #description {
    font-size: 1rem;
  }

  #social_media {
    width: 25%;
  }

  #contact_form {
    width: 90%;
  }

  #contact_form #name {
    flex-direction: column;
  }

  .star-map-container {
    position: relative !important;
    height: 750px !important;
    /* Increased height for better vertical flow */
    display: block !important;
    width: 100%;
    overflow: visible;
  }

  .skill-node {
    position: absolute !important;
    transform: translate(-50%, -50%);
    /* Centers the node on the coordinate */
  }

  /* Spreading left values to use more of the screen width */
  #skill-react {
    left: 15%;
    top: 8%;
  }

  #skill-vue {
    left: 80%;
    top: 18%;
  }

  #skill-node {
    left: 20%;
    top: 32%;
  }

  #skill-php {
    left: 85%;
    top: 48%;
  }

  #skill-docker {
    left: 15%;
    top: 62%;
  }

  #skill-postgres {
    left: 80%;
    top: 78%;
  }

  #skill-mongo {
    left: 30%;
    top: 92%;
  }

  /* Positioning intermediate nodes in the 'empty' gaps */
  #skill-java {
    left: 85%;
    top: 5%;
  }

  #skill-cpp {
    left: 10%;
    top: 75%;
  }

  #skill-python {
    left: 75%;
    top: 90%;
  }
}

@media screen and (max-width: 768px) {

  /* Fix right margin and overflow */
  html,
  body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
  }

  /* Fix Portrait Image Size */
  #about_me img {
    height: 220px !important;
    /* Scale down on mobile */
    width: auto;
  }

  /* Reduce space between sections */
  section {
    margin: 3rem auto !important;
  }

  /* Change Sidebar Close Button (X) to White */
  #hideSideBarButton svg path {
    fill: var(--white) !important;
  }
}

@media screen and (max-width: 750px) {
  #about_me {
    display: flex;
    flex-direction: column;
    margin-bottom: 40rem;
  }

  #skills {
    display: flex;
    flex-direction: column;
    margin-top: 40rem;
  }

  .skill_block {
    width: 65%;
  }

  #projects {
    margin-top: 45rem;
  }

  .img_container {
    margin-top: -2rem;
  }

  #studio .img_container {
    margin-top: -100px;
  }

  .project_info {
    margin-bottom: 55px;
  }

  .project_info h2 {
    font-size: 3rem;
  }

  .project_info ul li {
    font-size: 14px;
  }
}

@media screen and (max-width: 600px) {

  #job_title,
  #get_in_touch,
  #projects_title,
  #skills_title {
    font-size: 2.5rem;
  }

  #about_me {
    display: flex;
    flex-direction: column;
    margin-bottom: 40rem;
  }

  #skills {
    display: flex;
    flex-direction: column;
    margin-top: 40rem;
  }

  .skill_block {
    width: 75%;
  }

  #projects {
    margin-top: 45rem;
  }

  .img_container {
    height: 300px;
  }

  #studio .img_container {
    margin-top: -100px;
  }

  .project_info {
    height: 300px;
  }

  .project_info h2 {
    font-size: 2rem;
  }

  #studio .project_info ul {
    width: 30%;
  }

  #ski .project_info ul {
    width: 65%;
  }

  .project_info p {
    font-size: 0.8rem;
  }

  .project_info a {
    font-size: 0.8rem;
  }
}

@media screen and (max-width: 500px) {
  #description {
    font-size: 0.8rem;
    line-height: 1.5rem;
  }

  #social_media {
    width: 30%;
  }

  #about_me {
    display: flex;
    flex-direction: column;
    margin-bottom: 48rem;
  }

  #skills {
    display: flex;
    flex-direction: column;
    margin-top: 48rem;
  }

  .skill_block {
    width: 95%;
    margin-bottom: 35px;
  }

  .skill_block ul {
    margin-bottom: 6rem;
  }

  #projects {
    margin-top: 45rem;
  }

  .project_info {
    height: 300px;
  }

  .project_info h2 {
    font-size: 2rem;
  }

  #studio .project_info ul {
    width: 40%;
  }

  #ski .project_info ul {
    width: 80%;
  }

  #contact_form {
    width: 90%;
  }

  #contact_form #name {
    flex-direction: column;
  }
}

@media screen and (max-width: 400px) {

  #job_title,
  #get_in_touch,
  #projects_title,
  #skills_title {
    font-size: 1.8rem;
  }

  .sidebar {
    width: 100%;
  }

  .skill_block {
    margin-bottom: 35px;
  }

  .skill_block ul {
    font-size: 1.5rem;
    margin-bottom: 4rem;
  }

  #projects {
    margin-top: 46rem;
  }

  #projects_title {
    margin-bottom: 4rem;
  }

  #studio .project_info ul {
    width: 50%;
  }

  #ski {
    margin-top: 12rem;
  }

  #ski .project_info ul {
    width: 100%;
  }

  .img_container {
    height: 250px;
  }

  .project_info {
    height: 250px;
    margin-bottom: 200px;
  }

  .project_info h2 {
    font-size: 1.5rem;
  }

  .project_info ul li {
    font-size: 12px;
  }

  .project_info p {
    font-size: 0.8rem;
  }

  .project_info a {
    font-size: 0.8rem;
  }

}

/* Modal Overlay */
.modal {
  display: none;
  position: fixed;
  z-index: 2000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(4, 4, 4, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow-y: auto;
}

.modal-content {
  background: rgba(16, 23, 54, 0.65);
  /* Glass Background */
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  margin: 3% auto;
  padding: 2rem;
  width: 90%;
  max-width: 850px;
  border-radius: 25px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
  color: white;
  /* Flexbox for clean layout */
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  /* Don't let it exceed the screen height */
  overflow-y: auto;
  /* Internal scrolling for content */
  padding: 2.5rem;
}

/* Modal Header Bar [Cite: HTML Update] */
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  padding-bottom: 1rem;
}

#modal-title {
  font-family: 'Outfit', sans-serif;
  font-size: 2rem;
  margin: 0;
  line-height: 1;
}

.close-modal {
  /* Fix misplaced position */
  position: static;
  /* Remove top/right абсолю positioning */
  font-size: 35px;
  color: white;
  cursor: pointer;
  line-height: 1;
}

/* Fix huge image */
#modal-image {
  max-width: 100%;
  max-height: 350px;
  /* Constraints image vertically */
  object-fit: contain;
  /* Don't crop, show full image */
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  margin: 1rem 0;
}

#modal-description {
  line-height: 1.6;
  font-size: 0.95rem;
  font-family: sans-serif;
  color: #d0d0d0;
  text-align: justify;
  order: 3;
  width: 95%;
}

/* Update these sections in style.css */
.modal-body {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  /* Consistent spacing */
  overflow-y: auto;
}

#modal-tech-stack {
  color: #ffcc70;
  font-weight: bold;
  font-size: 1.1rem;
  text-align: center;
  order: 2;
  /* Moves it between image and description */
}

#modal-link {
  order: 4;
  align-self: center;
  /* Don't make the button full width */
  margin-bottom: 1rem;
  text-decoration: none;
}

/* Adjust projects container to smaller grid cards */
#projects_container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

/* --- Desktop: Horizontal Timeline --- */

.timeline-container {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 90%;
  margin: 4rem auto;
  padding: 0;
}

.timeline-line {
  position: absolute;
  top: 50%;
  /* Line is in the middle horizontally */
  left: 0;
  width: 100%;
  height: 2px;
  background: rgba(255, 255, 255, 0.1);
  border-bottom: 1px dashed rgba(255, 204, 112, 0.5);
  transform: translateY(-50%);
}

.timeline-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 30%;
  /* Space out the 3 items */
  position: relative;
  z-index: 2;
}

.timeline-dot {
  width: 14px;
  height: 14px;
  background: #ffcc70;
  border-radius: 50%;
  box-shadow: 0 0 15px #ffcc70;
  margin: 10px 0;
}

.timeline-content {
  width: 280px;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  position: absolute;
}

/* Alternate top and bottom positions */
.timeline-item:nth-child(odd) .timeline-content {
  bottom: 40px;
}

.timeline-item:nth-child(even) .timeline-content {
  top: 40px;
}

/* --- Mobile: Vertical Timeline --- */
@media screen and (max-width: 768px) {
  .timeline-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-left: 50px;
    /* Create a gutter for the line */
    margin: 2rem auto;
    position: relative;
  }

  .timeline-line {
    /* Anchor to the left gutter */
    left: 20px !important;
    top: 0;
    bottom: 0;
    /* Ensures it stretches the full height of the container */
    width: 2px;
    height: auto;
    /* Let it follow the content height */
    transform: none;
  }

  .timeline-item {
    flex-direction: row;
    width: 100%;
    margin-bottom: 4rem;
    /* More breathing room */
    position: relative;
  }

  .timeline-dot {
    position: absolute;
    left: -37px;
    /* Perfectly centers the dot over the 20px line */
    margin: 0;
    z-index: 5;
  }

  .timeline-content {
    position: static;
    width: 90%;
    margin-left: 20px;
    text-align: left;
  }

  #about_me img {
    height: 250px !important;
    width: auto !important;
  }

  /* Force constellation nodes into a vertical column */
  /*.star-map-container { height: 800px; }*/

  /* Rotated 90 degrees: swapping typical Left/Top logic */
  #skill-react {
    left: 20%;
    top: 10%;
  }

  #skill-vue {
    left: 60%;
    top: 20%;
  }

  #skill-node {
    left: 30%;
    top: 35%;
  }

  #skill-php {
    left: 70%;
    top: 50%;
  }

  #skill-docker {
    left: 20%;
    top: 65%;
  }

  #skill-postgres {
    left: 60%;
    top: 80%;
  }

  #skill-mongo {
    left: 40%;
    top: 95%;
  }

  /* Intermediate nodes positioned around the vertical path */
  #skill-java {
    left: 80%;
    top: 15%;
  }

  #skill-cpp {
    left: 20%;
    top: 75%;
  }

  #skill-python {
    left: 50%;
    top: 85%;
  }

  /* Fix Sidebar Close Icon (X) */
  #hideSideBarButton svg path {
    fill: var(--white) !important;
    /* Makes it visible */
  }
}

.gravity-star {
  position: absolute;
  background: white;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  /* Higher than background (-1), lower than glass boxes (2+) */
  transition: transform 0.1s ease-out, opacity 0.5s;
}