#index .content {
    margin: calc(var(--header-height) + 60px) auto 0 auto;
    width: 80%;
}
@media only screen and (max-width: 600px) {
  #index .content {
    width: 90%;
  }
}

#index #top-space {
  margin-top: 25vh;
}
@media only screen and (min-height: 1200px) {
  #index #top-space {
    margin-top: 144px;
  }
}
@media only screen and (max-width: 768px) {
  #index #top-space {
    margin-top: 0;
  }
}

#index #top-area {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 48px 24px;
}
#index #intro {
  flex: 1 1;
}
@media only screen and (max-width: 768px) {
  #index #intro {
    flex-basis: 100%;
  }
}

#index #intro h1 {
  font-size: var(--heading-1-font-size);
  font-weight: var(--heading-semibold-font-weight);
  margin: 0;
  position: relative;
  transform: translateY(-100%);
  animation: moveDown 0.5s ease forwards;
}
#index #intro h2 {
  font-size: var(--heading-1-font-size);
  font-weight: normal;
  margin: 0;
  position: relative;
  transform: translateY(-100%);
  animation: moveDown 0.5s ease forwards 0.25s;
}
#index #intro .p-container {
  position: relative;
  transform: translateY(-200%);
  animation: moveDown 0.5s ease forwards 0.5s;
}
#index #intro .p-container p{
  margin: 6px 0 0 0;
}
#index #intro .p-container:nth-child(1) {
  margin: 30px 0 0 0;
}
#index #intro .gray-text {
  color: var(--secondary-text-color);
}
#index #image-container {
  flex: 0 0 237px;
  animation: fadeIn 0.5s ease forwards;
}
@media only screen and (max-width: 1048px) {
  #index #intro h1, #index #intro h2 {
    font-size: var(--heading-2-font-size);
  }
}



#index #down-arrow-wrapper {
  width: 100%;
  text-align: center;
  animation: fadeIn 0.5s ease forwards;
}
#index #down-arrow {
  display: inline-block;
  position: relative;
  font-size: 1.5em;
  font-weight: 100;
}
.bounce {
    animation: 1675ms bounce 1s infinite;
}
@keyframes bounce {
  0%, 30%, 60%, 100% {
    transform: translateY(0);
  }
  20% {
    transform: translateY(-.5em);
  }
  40% {
    transform: translateY(-.5em);
  }
}



#index #featured-work-heading {
  font-size: var(--heading-6-font-size);
  font-weight: normal;
  color: var(--secondary-text-color);
}

#index .projects-container {
  opacity: 0;
  animation: fadeIn 1s ease forwards 0.5s;
}

#index .project {
  display: block;
  text-decoration: none;
  color: inherit;
}
#index .project-border-outline {
  outline: 1px solid transparent; 
  outline-offset: 24px;
  border-radius: 0.001px;
  transition: 0.2s ease-in-out;
}
#index .project-border-outline:hover {
  outline-color: var(--light-stroke-color);
}
@media only screen and (max-width: 600px) {
  #index .project-border-outline {
    outline-offset: 15px;
  }
}

#index .project h3 {
  font-size: var(--heading-1-font-size);
  font-weight: var(--heading-semibold-font-weight);
  margin: 0 0 24px 0;
}
#index .project .description {
  font-weight: normal;
}
@media only screen and (max-width: 1048px) {
  #index .project h3 {
    font-size: var(--heading-2-font-size);
  }
}


/* Image */
#index .project-image-wrapper {
  position: relative;
  min-width: 0;
  height: 450px;
  overflow: hidden;
}
#index .project-image-wrapper img {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: 0.2s ease-in-out;
}
#index .project:hover .project-image-wrapper img {
  max-width: 105%;
  max-height: 105%;
}
@media only screen and (max-width: 768px) {
  #index .project-image-wrapper { /* Full width */
    height: auto;
  }
  #index .project-image-wrapper img {
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
  }
  #index .project:hover .project-image-wrapper img {
    max-width: 100%;
    max-height: 100%;
  }
}
#index #roblox { background: #2C3237; }
#index #mbb { background: linear-gradient(0deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.20) 100%), linear-gradient(153deg, #4D6BF5 11.64%, #A08FE0 90.26%); }
#index #moodfood { background: #5D77D2; }
#index #lacework { background: linear-gradient(330deg, #E2F4FF 7.07%, #86C2FF 87.66%); }


#index .project .tags {
  margin: 24px 0 0 0;
}