/* General styles */
body {
    font-family: "Sedan",Arial,Helvetica,sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* This ensures padding doesn't affect overall widths */
}

.index_body {
    background-image: linear-gradient(to bottom, #b5d7e1 35%, #f7f6ea 75%);
  }
.resume_body {
    background-color:#e6effb;
}
.projects_body {
    background-color: #e6effb;
}
@media screen and (min-width: 750px) {
    .index_body {
        background-image: linear-gradient(to right, #b5d7e1 35%, #e6effb 75%);
    }    
}

/* reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
      animation: none !important;
      transition: none !important;
      scroll-behavior: auto !important;
  }
  *:hover, *:focus, *:active {
    /* transform: none !important; */
    filter: none !important;
    box-shadow: none !important;
    background-position: initial !important;
}
}

/* Skip to Main Content */
a.skip {
    position: absolute;
    left: -10000px;
    padding: 14px 16px;
    overflow: hidden;
}

.skip:hover {
    text-decoration: underline;
}

.skip:focus {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
}

  /* Navigation Bar */

  nav ul {
    display: grid;
    background-color: #b5d7e1;
    overflow: hidden;
    grid-template-columns: 1fr;
    margin: 10px;
    height: auto; 
}

nav ul li {
    text-align: center; 
    width: 100%; 
    float: left;
}

nav ul li a {
    text-align: center;
    display: block;
    padding: 20px 16px; 
    font-size: 1.1rem; 
    text-decoration: none;
    color:rgb(5, 57, 45);
}

@media screen and (min-width: 750px) {
        
    nav ul{
        height: 80%;
        margin: 10px;
        grid-template-columns: auto auto auto auto;
        justify-content: end;
        gap: 1%;
    }

    nav ul li{
        text-align: left;
    }

    nav ul li a{
        padding: 14px 16px;
    }

}


nav ul li a:hover {
    background-color: rgb(255, 246, 207);
    color: rgb(5, 57, 45);
    border-radius: 30px;
    font-style: italic;
}

nav .active a {
    background-color: rgb(12, 86, 69); 
    border-radius: 30px;
    font-style: italic;
    color:#dbc9da;
}

/* jump to top button */
.top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  max-width: 100px;
  max-height: 50px;
  width: 100%;
  height: 100%;
  padding: .5px;
  border-radius: 30px;
  justify-content: center;
  background-color: #b5d7e1; /*rgba(12, 86, 69, 0.931);*/
  color: rgba(12, 86, 69);/* #dbc9da;*/
  border: 2px solid rgba(12, 86, 69);
  font-size: 1rem;
  font-weight: 800;
  text-align: center;
  cursor: pointer;
  z-index: 3;
  transition: transform 0.1s ease, background-color 0.1s ease, box-shadow 0.1s ease;
  box-shadow: 3px 3px 6px rgba(12, 86, 69, 0.2);
}
.top:hover {
  background-color: #170327b2;
  border: none;
  color:#e6effb;
}
.top:active {
  transform: translateY(4px); 
  box-shadow: 1px 1px 3px rgba(12, 86, 69, 0.2);
}
@media screen and (min-width: 750px) {
  .top {
    font-size: 1.2rem;
    max-width: 150px;
  }
}

/* Style for the main content area */
  #main-content-index {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    justify-content: center;
    gap: 20px; 
    padding: 50px;
    min-height: 100vh;
    /* background: #f8d0c0; */
  }
  
  /* Profile section containing the image and the name */
  .profile-section {
    grid-area: 1;
    display: grid;
    grid-template-areas: 
      "image"
      "name";
    background: #f7f6ea;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;
  }
  
  .profile-image {
    grid-area: image;
    width: 70%; 
    height: 90%; 
    border-radius: 50%;
    margin: auto; 
  }
  
  .profile-section h1 {
    grid-area: name;
    margin-top: 20px; 
    font-size: 2em;
    text-align: center;
    background-color: #f7f6ea;
    font-weight: bolder;
  }
  
  .divider {
    height: 4px;
    width: 60px; 
    background-color: #170327b2; 
    margin: 20px auto 20px; 
    }

  .profile-section p {
    background-color: #f7f6ea;
    font-size: 1.2em;
    margin-top: 0;
    text-align: center;
  }
  .profile-bio {
    grid-row: 2;
    height: fit-content;
    margin-left: 10%;
    margin-right: 10%;
    
  }
  .profile-bio p {
    font-size: 1.2em;
    line-height: 1.5;
    text-align: center;
  }
  .profile-button {
    display: grid;
    grid-gap: 5%;
    grid-template-columns: auto;
    margin-top:0;
    margin-bottom: 10%;
    margin-left: 5%;
    /* background-color: #faf5f3; */
    padding: 20px;
    text-align: center;
    width: 90%;
    /* border-radius: 10px; */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  .profile-button h2 {
    padding-bottom: 5%;
    font-size: 1.6em;
    font-weight: bold;
  }

  /* Buttons */
  .button {
    padding: 10px 15px;
    margin: 3%;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    font-size: 1.1em;
    transition: background-color 0.3s ease;
  }
  
  .button-blue {
    grid-row: 2;
    background-color: rgb(12, 86, 69);
    color: white;
  }
  
  .button-blue:hover {
    background-color: #170327b2;
  }
  
  .button-light {
    grid-row: 3;
    /* background-color: #b5d7e1; */
    background-color: #dbc9da;
    color: #170327b2;
    border: 1px solid #170327b2;
  }
  
  .button-light:hover {
    background-color: rgba(64, 112, 102, 0.968);
    color:white;
  }

  /* Style for clickable cat name */
  .clickable {
    position: relative;
    color: rgb(12, 86, 69);
    cursor: pointer;
    text-decoration: underline;
    font-weight: bold;
  }
  
  .tooltip {
    visibility: hidden;
    width: 120px;
    background-color: #ebdeea;
    color: #170327b2;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: 50%; /* Position the top of the tooltip to the center of the icon */
    left: calc(100% + 10px); /* Offset the tooltip to the right of the icon */
    transform: translateY(-50%); /* Center the tooltip vertically relative to the icon */
    margin-left: 0; 
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 0.8em;
}

.tooltip::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%; 
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent #170327b2 transparent transparent;
  }

.clickable:hover .tooltip {
    visibility: visible;
    opacity: 1;
}


.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 50%;
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0,0,0,0.4); 
}

.modal-content {
  background-color: #fefefe;
  margin: auto; /* Centered in all screen sizes */
  padding: 20px;
  border: 1px solid #888;
  width: 90%; /* Adjust width for mobile */
  box-shadow: 0 2px 4px rgba(0,0,0,0.2), 0 3px 6px rgba(0,0,0,0.15); /* Slightly reduced shadow for mobile */
}

@media screen and (min-width: 750px) {
  .modal {
      padding-top: 100px; /* Larger padding for larger screens */
  }
  .modal-content {
      width: 50%; /* Larger fixed width for larger screens */
      box-shadow: 0 4px 8px rgba(0,0,0,0.2), 0 6px 20px rgba(0,0,0,0.19); /* More pronounced shadow for larger screens */
  }
}

  
.cat-slides {
  width: 100%; /* Adjust width as necessary */
  height: auto; /* Adjust height as necessary */
  display: block; /* Ensures that the image is block level */
}
  
  /* Previous and next buttons */
  .prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -50px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
  }
  .next {
    right: 0;
    border-radius: 3px 0 0 3px;
  }
  
  /* Position the "prev button" to the left */
  .prev {
    left: 0;
  }

  .prev:hover, .next:hover {
    background-color: rgba(0,0,0,0.8);
  }
  
  /* The Close Button */
  .close {
    color: white;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 25px;
    font-size: 100px;
    font-weight: bold;
  }
  
  .close:hover,
  .close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
  }
  
  /* Add some style to the image if needed */
  #cat-pic {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto; /* Center the image within the modal */
  }

/* main content for desktop */
@media screen and (min-width: 750px) {
#main-content-index {
    display: grid;
    grid-template-columns: 1fr 2fr;
    align-items: center;
    justify-content: center;
    gap: 20px; 
    padding: 50px;
    min-height: 100vh;
    /* background: #f8d0c0; */
    }
    
    /* Profile section containing the image and the name */
    .profile-section {
    grid-area: 1/1/span 2/span 1;
    display: grid;
    grid-template-areas: 
        "image"
        "name";
    background: #f7f6ea;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin-left: 40%;
    height: 75%;
    min-height: fit-content;
    width:70%;
    text-align: center;
    }
    
    .profile-image {
    grid-area: image;
    width: 70%; 
    height: 90%; 
    border-radius: 50%;
    margin: auto; 
    }
    
    .profile-section h1 {
    grid-area: name;
    margin-top: 20px; 
    font-size: 2em;
    text-align: center;
    background-color: #f7f6ea;
    font-weight: bolder;
    }
    
    .divider {
    height: 4px;
    width: 60px; 
    background-color: #170327b2; 
    margin: 10px auto 10px; 
    }

    .profile-section p {
    background-color: #f7f6ea;
    font-size: 1.2em;
    margin-top: 0;
    }
    .profile-bio {
    grid-area: 1 / 2 / span 2 / span 1;
    height: fit-content;
    margin-left: 10%;
    margin-right: 10%;
    
    }
    .profile-bio p {
    font-size: 1.2em;
    line-height: 1.5;
    text-align: left;
    margin-left: 5%;
    }
    .profile-button {
    grid-template-columns: auto auto;
    justify-content: center;
    margin-top:0;
    margin-bottom: 5%;
    margin-left: 5%;
    /* background-color: #faf5f3; */
    padding: 20px;
    text-align: center;
    width: 80%;
    /* border-radius: 10px; */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
    .profile-button h2 {
      grid-column: 1 / span 2;
    padding-bottom: 5%;
    font-size: 1.6em;
    font-weight: bold;
    }

     /* Buttons */
    .button {
      width: 130px;
    }
  .button-blue {
    
    grid-column: 1;
    background-color: rgb(12, 86, 69);
    color: white;
  }
  
  .button-blue:hover {
    background-color: #170327b2;
  }
  
  .button-light {
    grid-row: 2;
    grid-column: 2;
    /* background-color: #b5d7e1; */
    background-color: #dbc9da;
    color: #170327b2;
    border: 1px solid #170327b2;
  }
  
  .button-light:hover {
    background-color: rgba(64, 112, 102, 0.968);
    color:white;
  }
  

}

 
/* footer */
footer {
    font-family: 'Courier New', Courier, monospace;
    background-color: rgba(12, 86, 69, 0.864);
    color: rgb(255, 246, 207);
    padding: 20px;
    margin-top: 10px;
    text-align: center;
    font-size: 1.1em;
}



/* resume page */
/* color: #fa9c7d; */
.resume-wrapper {
  background-color: #feece7; /* Pink background for the wrapper */
  width: 80%; /* Or any width you prefer */
  margin: 0 auto; /* Center the wrapper */
  border-radius: 10px; /* Rounded corners for the wrapper */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: Adds shadow for depth */
  padding: 20px; /* Padding inside the wrapper */
  margin-top: 20px; /* Space from the top of the page */
  position: relative; /* For absolute positioning of the timeline icon */
}

.profile-card {
  text-align: center;
  padding: 2em;
  border-radius: 10px;
  width: 70%;
  margin: 0 auto;
}
.profile-card img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 3px solid #ffffff; /* White border around the image */
  display: flex;
  align-items: center;
  justify-content: center;
}
.profile-card h1 {
  font-size: 1.5em;
  margin-bottom: 1%;
  margin-top: 1%;
}
.profile-card p {
  font-size: 1em;
  line-height: 1.5;
  color: #170327b2;
}
/* Timeline Styles */
.timeline {
  position: relative;
  padding: 2em;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 0.3%; 
  background: #b5d7e1;
  z-index: 0;
}

.timeline-item {
  display: grid;
  grid-template-columns: auto;
  margin-bottom: 4em; 
  gap: 1em;
  align-items: center;
}

.timeline-item .timeline-icon {
  grid-row: 2;
  width: 100%;
  height:60%;
  background: #fff;
  border-radius: 50%;
  z-index: 2;
  cursor: pointer;
}
.timeline-icon:hover {
  transform: scale(1.1);
  transition: transform 0.3s;
}
.timeline-item .timeline-header-1 {
  font-size: 1.8em;
  font-weight: bold;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.timeline-item .timeline-header {
  grid-row: 1;
  text-align: center;
  /* width: 100%; */
  z-index: 2;
}
.timeline-item .timeline-header h3 {
  font-size: 1em;
  margin-bottom: 0;
}
.timeline-img {
  width: 100%;
  height: 100%;
  grid-row: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.timeline-img img {
  width: 50%;
  border-radius: 50%;
}
.timeline-item .timeline-icon img {
  width: 100%;
}

.timeline-item .timeline-content {
  grid-row: 3;
  padding: 1em;
  border-radius: 4px;
  background: #ebdeea;
  position: relative;
}
.timeline-content {
  visibility: hidden; /* Hide content */
  opacity: 0; /* Make content transparent */
  height: 0; /* Collapse content area */
  overflow: hidden; /* Prevent content from taking up space */
  transition: opacity 0.5s, height 0.5s, visibility 0.5s; /* Animate the visibility and height */
}

.timeline-content.active {
  visibility: visible; /* Show content */
  opacity: 1; /* Make content opaque */
  height: auto; /* Expand to fit content */
}

.timeline-item .timeline-content h4{
  font-size: 0.8em;
  margin-bottom: 0;
}
.timeline-item .timeline-content ul {
  padding-left: 0.8em;
  list-style: none;
  font-size: 0.6em;
}
.timeline-item .timeline-content p {
  font-size: 0.8em;
  line-height: 1.5;
  font-weight: bold;
}

.hide {
  visibility: hidden;
}
.timeline-item .experience-header {
  grid-row: 2;
  text-align: center;
}
.experience-icon {
  margin-left: 40%;
  width: 20%;
  height: 40%;
  z-index: 2;
  cursor: pointer;
}
.timeline-item .experience-icon {
  grid-row: 3;
}
.experience-icon img {
  width: 100%;
}
#experience-content p{
  font-size: 0.8em;
}
.timeline-item #experience-content {
  grid-row: 4;
  text-align: center;
  margin-left: 0;
}
#experience-content h4{
  text-align: center;
  margin-top: 3%;
  margin-bottom: 3%;
  font-size: 0.8em;
}

.image-container {
  width: 100%; /* Adjust based on your layout needs */
  overflow: hidden; /* Ensures the image zoom does not break layout boundaries */
}

.image-container img {
  width: 100%; /* Ensure images fit their containers */
  transition: transform 0.3s ease; /* Smooth transformation */
}

.image-container:hover img {
  transform: scale(1.5); /* Adjust scaling factor as needed */
}
.timeline-item .experience-header {
  grid-row: 2;
  text-align: center;
  font-size: 1em;
  font-style: italic;
  z-index: 2;
}
.skill-icon {
  margin-left: 38%;
  width: 50%;
  height: 50%;
  z-index: 2;
}
.timeline-item .skill-icon {
  grid-row: 1;
}
.timeline-item .timeline-header-2 {
  grid-row: 2;
  text-align: center;
  font-size: 1em;
  width: 100%;
  font-weight: bold;
  background-color: #b5d7e1;
  padding: 10px 0;  /* Add padding for better visual spacing */
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);  /* Subtle shadow for depth */
  border-radius: 10px;
  z-index: 2;
}
.timeline-item .timeline-header-3 {
  grid-row: 2;
  text-align: center;
  font-size: 1em;
  width: 100%;
  font-weight: bold;
  background-color: #ceb8cd;
  padding: 10px 0;  /* Add padding for better visual spacing */
  box-shadow: 0px 4px 8px rgba(0,0,0, 0.1);  /* Subtle shadow for depth */
  border-radius: 10px;
  z-index: 2;
}
.timeline-item .timeline-content-1 {
  grid-row: 3;
  text-align: center;
  font-size: 0.8em;
  z-index: 2;
}
.timeline-item .timeline-content-2 {
  grid-row: 3;
  text-align: center;
  font-size: 0.8em;
  z-index: 2;
}

.video-icon video {
  display: none;
  width: 100px; /* Adjust width as needed */
  height: auto; /* Maintain aspect ratio */
  border: 2px solid #b5d7e1;
  border-radius: 50%; /* Make it circular if that's desired */
  object-fit: cover; /* Ensure the video covers the area without being stretched */
  cursor: pointer; /* Indicate it's clickable */
  z-index: 2;
}

.video-icon {
  z-index: 2;
  display: flex;
  justify-content: center; /* Center horizontally in the parent */
  align-items: center; /* Center vertically */
}

.skill-card .timeline-item {
  margin-bottom: 1.5em; 
}


/* Resume page for desktop */
@media screen and (min-width: 750px) {
  .resume-wrapper {
    background-color: #feece7; /* Pink background for the wrapper */
    width: 80%; /* Or any width you prefer */
    margin: 0 auto; /* Center the wrapper */
    border-radius: 10px; /* Rounded corners for the wrapper */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: Adds shadow for depth */
    padding: 20px; /* Padding inside the wrapper */
    margin-top: 20px; /* Space from the top of the page */
    position: relative; /* For absolute positioning of the timeline icon */
}

.profile-card {
    text-align: center;
    padding: 2em;
    border-radius: 10px;
    width: 50%;
    margin: 0 auto;
}
.profile-card img {
    width: 40%;
    height: 60%;
    border-radius: 50%;
    border: 3px solid #ffffff; /* White border around the image */
    /* position: absolute; */
    display: inline-block;
}
.profile-card h1 {
    font-size: 2em;
    margin-bottom: 1%;
    margin-top: 1%;
}
.profile-card p {
    font-size: 1.1em;
    line-height: 1.5;
    color: #170327b2;
}

/* Timeline Styles */
.timeline {
    position: relative;
    padding: 2em;
  }
  
  .timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 0.3%; 
    background: #b5d7e1;
    z-index: 0;
  }
  
  .timeline-item {
    display: grid;
    grid-template-columns: 1fr 1fr 2fr;
    margin-bottom: 4em; 
    gap: 1em;
    align-items: center;
  }
  
  .timeline-item .timeline-icon {
    grid-column: 2/3;
    grid-row: 1;
    justify-content: center;
    width: 100%;
    height:100%;
    margin-left: 50%;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    cursor: pointer;
  }
  .timeline-icon:hover {
    transform: scale(1.1);
    transition: transform 0.3s;
  }
  .timeline-item .timeline-header-1 {
    font-size: 1.8em;
    font-weight: bold;
    grid-column: 2/3;
    margin-left: 100%;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
  }
  .timeline-item .timeline-header {
    margin-left: 30%;
    width: 100%;
  }
  .timeline-item .timeline-header h3 {
    font-size: 1.2em;
    margin-bottom: 0;
  }
  .timeline-img {
    width: 100%;
    height: 100%;
    margin-left: 50%;
    grid-column: 2/span 1;
    grid-row: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
  }
  .timeline-img img {
    width: 50%;
    border-radius: 50%;
  }
  .timeline-item .timeline-icon img {
    width: 100%;
  }
  
  .timeline-item .timeline-content {
    grid-column: 3/4;
    grid-row: 2;
    padding: 1em;
    border-radius: 4px;
    background: #ebdeea;
    margin-left: 2em;
    position: relative;
  }
  .timeline-content {
    visibility: hidden; 
    opacity: 0; 
    height: 0; 
    overflow: hidden; 
    transition: opacity 0.5s, height 0.5s, visibility 0.5s; 
}

  .timeline-content.active {
    visibility: visible; 
    opacity: 1; 
    height: auto; 
}

  .timeline-item .timeline-content h4{
    font-size: 1.2em;
    margin-bottom: 0;
  }
  .timeline-item .timeline-content ul {
    padding-left: 1em;
    list-style: none;
    font-size: 1em;
  }
  .timeline-item .timeline-content p {
    font-size: 1.2em;
    line-height: 1.5;
    font-weight: bold;
  }
  .timeline-item .timeline-header {
    grid-column: 1 / 2;
  }
  
  .hide {
    visibility: hidden;
    width: 120px;
    background-color: #ebdeea;
    color: #170327b2;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: 50%; 
    left: calc(100% + 10px); 
    transform: translateY(-50%); 
    margin-left: 0; 
    opacity: 0;
    transition: opacity 0.3s;
  }
  .timeline-icon .hide::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%; 
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent #170327b2 transparent transparent;
  }
  .timeline-icon:hover .hide {
    visibility: visible;
    opacity: 1;
  }
  .experience-icon {
    grid-column: 2/3;
    grid-row: 1;
    justify-content: center;
    width: 40%;
    height:100%;
    margin-left: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    cursor: pointer;
  }
  .experience-icon:hover {
    transform: scale(1.1);
    transition: transform 0.3s;
  }
  .experience-icon .hide::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%; 
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent #170327b2 transparent transparent;
  }
  .experience-icon:hover .hide {
    visibility: visible;
    opacity: 1;
  }
  #experience-content p{
    font-size: 1em;
  }
  #experience-content h4{
    text-align: center;
    margin-top: 10px;
    font-size: 1.2em;
  }

  .timeline-item .experience-header {
    grid-row: 1;
    grid-column: 3/4;
    margin-left: 15%;
    text-align: left;
    font-size: 1.2em;
  }
  .timeline-item .experience-icon {
    grid-row: 1;
  }
  .timeline-item #experience-content {
    grid-row: 3;
    grid-column: 3/4;
    margin-left: 2em;
  }
  .timeline-item .skill-icon {
    grid-column: 2/3;
    margin-left: 80%;
    width: 80%;
    height: 50%;
    z-index: 2;
    margin-bottom: 0;
    margin-top: 0;
  }
  
  .timeline-item .timeline-header-2 {
    grid-column: 1/2;
    grid-row: 1;
    margin-left: 50%;
    font-size: 1.2em;
    width: 100%;
  }
  .timeline-item .timeline-header-3 {
    grid-column: 3/4;
    grid-row: 1;
    margin-left: 25%;
    font-size: 1.2em;
    width: 50%;
  }
  .timeline-item .timeline-content-1 {
    grid-column: 3/4;
    grid-row: 1;
    margin-left: 20%;
    font-size: 1em;
  }
  .timeline-item .timeline-content-2 {
    grid-column: 1/2;
    grid-row: 1;
    margin-left: 30%;
    width: 100%;
    font-size: 1em;
  }
  .video-icon {
    grid-row:2;
    grid-column: 2/3;
    margin-left: 100%;
    text-align: center;
    z-index: 2;
  }
  .video-icon video {
    display: block;
    width: 150px;
    cursor: pointer;
  }
  .skill-card .timeline-item {
    margin-bottom: 0; 
  }
}

/* project page */
.smaller-font {
  font-size: smaller;
}
.video-header {
  position: relative;
  overflow: hidden;
  height: 25vh; 
}

.background-video {
  position: relative;
  width: 100%; 
  height: auto; 
  overflow: hidden;
  margin-top: 3%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); 
}
.video-controls {
  position: relative;
  margin-top: 3%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.video-controls button {
  padding: 8px 16px; 
  width: 80%;
  height: 100%;
  margin-left: 10%; 
  text-align: center;
  background-color: #b5d7e1; 
  color: #302f30; 
  border: none; 
  border-radius: 5%;
  cursor: pointer;
  font-size: 1em; 
  pointer-events: auto; /* Enables clicking on the buttons */
  transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  /* Adding box shadow for 3D effect */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* x-offset, y-offset, blur-radius, color */
  transform: translateZ(0);
}

.video-controls button:hover {
  background-color: #5e4a66;
  color: #e8dde8;
  /* Changes the shadow to give the appearance of being pressed */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  /* Slightly move the button up to reinforce the pressed effect */
  transform: translateY(-2px);
}
.video-controls button:active {
  /* When the button is clicked, move it further down to simulate a press */
  transform: translateY(1px);
  /* Reduce the shadow to give the impression the light source is closer */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.header-text-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff; 
  text-align: center;
  padding: 20px;
  border-radius: 10px;
  background-color: rgb(12, 86, 69); 
  backdrop-filter: blur(5px); 
  max-width: 80%;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3), 
              0 8px 20px rgba(0, 0, 0, 0.2), 
              0 16px 40px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;
  perspective: 1500px; 
}

.header-text-box h1 {
  font-size: 1.5em;
  margin-bottom: 0.5em;
  transition: transform 0.3s;
  transform: translateZ(120px); /* Pulls the title towards the viewer */
  opacity: 0.85;
}

.header-text-box p {
  font-size: 1em;
  transition: transform 0.3s;
  transform: translateZ(60px); /* Pulls the paragraph text towards the viewer */
  opacity: 0.85;
}
.header-text-box .smalltip {
  font-size: xx-small;
}
.header-text-box:hover h1,
.header-text-box:hover p {
  transform: translateZ(0); /* Flattens the text on hover for an interactive effect */
  opacity: 1;
}

.header-text-box:before {
  content: '';
  position: absolute;
  top: -5px; right: -5px; bottom: -5px; left: -5px;
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1));
  border-radius: inherit;
  z-index: -1;
  transition: opacity 0.3s, transform 0.3s;
  transform: translateZ(-20px); /* Pushes the gradient background back */
}

.header-text-box:hover:before {
  opacity: 0;
}


.project-cards-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  justify-items: center;
  margin: 20px;
}

.project-card {
  grid-column: 1/-1;
  background-color: #d2c6ea65; /*#feece7; */
  border: 1px solid #ccc; /* Subtle border */
  border-radius: 10px; /* Rounded corners */
  padding: 15px;
  margin: 10px;
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transitions for hover effects */
  cursor: pointer; /* Indicates the card is clickable */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Soft shadow for 3D effect */
}

.project-card:hover {
  transform: translateY(-10px); /* Moves the card up slightly on hover */
  box-shadow: 0 12px 16px rgba(0, 0, 0, 0.2); /* Enhanced shadow on hover for 3D effect */
}

.project-card h2 {
  text-align: center;
  color: rgb(12, 86, 69); /* Dark green color matching the theme */
  font-size: 1.5rem; /* Larger font size for the title */
}

.project-card ul {
  list-style: none; 
  padding: 0;
}

.project-card li {
  font-size: 1rem; 
  color: #3e3143; 
  padding: 5px 0;
  margin-left: 5%;
  list-style-type: circle;
}

.modal-content video {
  width: 100%;
  height: fit-content;
  border-radius: 10px;
}

/* Project page for desktop */
@media screen and (min-width: 750px) {
  .video-header {
    height: 50vh;
  }
  
  .background-video {
    top: 40%;
    width: 100%;
    height: 100%;
  }

  .header-text-box h1 {
    font-size: 2.5em;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.6); 
  }

  .header-text-box p {
    font-size: 1.5em;
  }
  
  .project-cards-container {
    grid-template-columns: 1fr;
  }
  
  .project-card {
    width: 70%;

  }
  .video-controls{
    justify-items: center;
    grid-template-columns: auto auto auto auto;
    gap: 3%;
    margin-top: 1%;
  }
  .video-controls button {
    grid-row: 1;
    width: 150px;
    font-size: 1.2em;
  }

  .project-card ul {
    margin-top: 2%;
  }
  .project-card li {
    font-size: 1.3em;
  }
  .project-card h2 {
    font-size: 2em;
  }
}

.video-credits {
  text-align: center;
  margin-top: 20px;
  font-size: 0.8em;
  color: rgb(255, 246, 207);
}

.video-credits p {
  margin: 5px 0;
}

.video-credits a {
  color: rgb(255, 246, 207);
  text-decoration: none;
}

.video-credits a:hover {
  text-decoration: underline;
}

#particle-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0; 
}
.particle {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  background-color: #5e4a66; 
  box-shadow: 0 0 8px #8577a2; 
}

/* contact page */
#main-content-contact {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 80vh; /* Ensure the container fills the viewport height */
}

.contact-container {
  background-color: #b5d7e1;
  max-width: 600px;
  margin: 10% 5%;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.contact-container h1 {
  color: #3e3143;
  margin-bottom: 20px;
  text-align: center;
  font-size: x-large;
}

.contact-container p {
  color: #3e3143da;
  line-height: 1.6;
  margin-left: 5%;
  text-align: left;
}
.bold-info {
  font-weight: bolder;
}


#contact-form p {
  margin-top: 10%;
  margin-bottom: 5%;
  font-size: large;
}

#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box; 
}

#contact-form textarea {
  height: 150px;
}

#contact-form button {
  width: 100%;
  padding: 10px;
  background-color: #accbc2;
  color: #3e3143da;
  text-align: center;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  font-size: large;
}

#contact-form button:hover {
  background-color: #4A5A6B;
}
.contact-info-box {
  background-color: rgba(255, 255, 255, 0.8); /* Transparent white background */
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}



@media screen and (min-width: 750px) {
  .contact-container {
    margin-top: 2%;
    margin-bottom: 2%;
  }
  .contact-container p {
    color: #3e3143da;
    line-height: 2;
    font-size: 1.2em;
    text-align: center;
  }
  #contact-form p {
    font-weight: bolder;
    font-size: 1.3em;
    margin-top: 5%;
    margin-bottom: 3%;
  }
  
}