body {
  margin: 0;
  background: #fafcff;
  color: #0f3fdd;
}
.body:hover {
  color:#0f3fdd;
}
.top-bar{
  font-family: 'Helvetica', sans-serif;
  font-weight: 500;
}
.project {
  font-family: 'Helvetica', sans-serif;
  font-weight: 500;
}
.about-title {
  font-family: 'Helvetica', sans-serif;
  font-weight: 500;
}
.about-expandable {
  font-family: 'Helvetica', sans-serif;
  font-weight: 300;
}
.project-description {
  font-family: 'Helvetica', sans-serif;
  font-weight: 300;
}
body {
  padding-top: 170px;
}
.project-description {
  box-sizing: border-box;
  font-size: 20px;
  color: #0f3fdd;
  text-align: left;
  max-width: 1300px;
  margin-top: 0px;
  margin-left: auto;
  margin-right: auto;
}
.top-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 50px;
  padding-bottom: 0px;
  background: transparent;
  z-index: 1000; /* stay above everything else */
  transition: transform 0.2s ease-out, padding 0.2s ease-out;
  pointer-events: none; /* make entire header transparent to clicks */
}
.top-bar .name {
  pointer-events: auto; /* but still clickable on the text */
}
.name, .portfolio {
  font-size: 100px;
}
#headerText {
  transition: transform 0.1s ease-out;
  transform-origin: center top; /* makes it shrink upward */
}
.project {
  font-size: 60px;
  color: #6f8be8;
  cursor: pointer;
  margin-bottom: 20px;
  transition: color 0.4s ease;
  text-align: center;
}
.project:hover {
  color: #0f3fdd;
}
.expandable {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 1s ease;
  margin-top: 20px;
}

.expandable img {
  display: block;              /* ensures they don’t stretch weirdly inline */
  max-width: 800px;            /* same width cap as your images */
  max-height: 700px;           /* same height cap */
  width: auto;                 /* scale naturally */
  height: auto;                /* scale naturally */
  margin-bottom: 20px;
  object-fit: cover;           /* keeps aspect ratio, crops if needed */
}
.expandable video {
  width: 100%;
  max-width: 700px;
  max-height: 700px;   /* keeps consistent layout with your images */
  height: auto;       /* automatically adjusts height to match video’s ratio */
  object-fit: contain; /* ensures no cropping — the entire video is visible */
  display: block;
}
.about-container + .project-container {
  margin-top: 100px;
}
.project-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.3s ease;
}
.project-container.hover-up {
  transform: translateY(-15px);
  transition: transform 0.4s ease;
  z-index: 0;
}
.project-container.hover-down {
  transform: translateY(15px);
  transition: transform 0.4s ease;
  z-index: 0;
}
.project-container:hover {
  transform: none !important;
  z-index: 10;
  transition: transform 0.3s ease;
}
.project.expanded ~ .project-container.hover-up,
.project.expanded ~ .project-container.hover-down {
  transform: none !important;
}
#follower {
  position: fixed;
  left: 20px;                  /* follower sticks to left edge */
  top: 50%;
  transform: translateY(-50%);
  width: 90px;
  height: 90px;
  pointer-events: none;         /* doesn’t block clicks */
  z-index: 1000;
}
.about-container {
  text-align: center;
  margin-top: 40px; /* adjust spacing below header */
}
.about-title {
  font-size: 35px;
  color: #6f8be8;
  cursor: pointer;
  transition: color 0.3s ease;
}
.about-title:hover {
  color: #0f3fdd;
}
.about-expandable {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.6s ease;
  box-sizing: border-box;
  font-size: 20px;
  color: #0f3fdd;
  text-align: left;
  max-width: 1300px;
  margin-top: 0px;
  margin-left: auto;
  margin-right: auto;
}
.about-expandable img {
  display: block;              /* ensures they don’t stretch weirdly inline */
  max-width: 450px;            /* same width cap as your images */
  max-height: 450px;           /* same height cap */
  justify-self: center;
  margin-top: 20px;
  margin-bottom: 20px;
  object-fit: cover;           /* keeps aspect ratio, crops if needed */
}
.about-container.expanded .about-expandable {
  max-height: 1000px; /* can increase if you have more text */
}
.media-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 40px;
  max-width: 800px;
}
.media-block video {
  width: 100%;
  max-width: 800px;
  max-height: 700px;
  height: auto;
  object-fit: contain;
}
.media-description {
  font-family: 'Helvetica', sans-serif;
  font-weight: 300;
  font-size: 18px;
  color: #0f3fdd;
  text-align: left;
  margin-top: 10px;
  line-height: 1.4;
  max-width: 700px;
}



@media (max-width: 768px) {
  body {
    padding-top: 50px;
  }

  .top-bar {
    padding: 20px;
  }

  .name {
    font-size: 30px !important;
  }

  .project {
    font-size: 25px !important;
    margin-bottom: -30px;
  }

  .about-title {
    font-size: 20px !important;
  }

  .about-container {
    padding: 0 20px !important; /* 👈 adds breathing room on the sides */
  }

  .about-expandable {
    font-size: 15px !important;
  }
  
  .project-container {
    margin-bottom: 40px;
    width: 100% !important;
    padding: 0 !important;
  }

  .media-description {
    font-size: 12px !important;

  }
  .expandable {
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    overflow: hidden !important;
    gap: 20px !important;
    padding: 0 20px !important; /* 👈 adds breathing room on the sides */
    box-sizing: border-box;
  }

  .project-container {
    padding: 0 20px !important; /* 👈 same side padding for text */
  }
  .expandable img,
  .expandable video {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
  }

  .project-description {
    font-size: 12px !important;
    line-height: 1.5 !important;
  }
  
  #follower {
    display: none !important;
  }

  body {
    padding-bottom: 50px !important;
  }
}