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

 body {
     display: flex;
     flex-direction: column;
     align-items: center;
     background-color: #1a1a1a;
     color: #ffffff;
     font-family: 'Courier New', monospace;
     line-height: 1.6;
 }

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 50px 50px; /* Size of the grid squares */
    z-index: -1;
    pointer-events: none;
}

.cursor-glow {
    position: fixed;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: -1;
    transition: width 0.3s, height 0.3s;
}

 nav {
     width: 70vw;
     border: 3px solid #ffffff;
     margin-top: 40px;
     padding: 10px;
     margin-bottom: 70px;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
 }

 .logo {
     width: 30px;
     height: 30px;
 }

 .nav-links {
     display: flex;
     gap: 40px;
     list-style: none;
     flex-wrap: wrap;
     justify-content: center;
 }

 .nav-links a {
     color: #ffffff;
     text-decoration: none;
     font-size: 18px;
     transition: opacity 0.3s;
 }

 .nav-links a:hover {
     opacity: 0.7;
 }

 .burger-menu {
     display: none;
     flex-direction: column;
     gap: 5px;
     cursor: pointer;
     transform: translateY(-50%);
 }

 .burger-menu span {
     width: 30px;
     height: 3px;
     background-color: #ffffff;
     transition: all 0.3s;
 }

 .burger-menu.active span:nth-child(1) {
     transform: rotate(45deg) translate(8px, 8px);
 }

 .burger-menu.active span:nth-child(2) {
     opacity: 0;
 }

 .burger-menu.active span:nth-child(3) {
     transform: rotate(-45deg) translate(7px, -7px);
 }

 .hero {
     width: 65vw;
     display: flex;
     align-items: center;
     justify-content: space-around;
     gap: 80px;
 }


 .name {
     font-size: 45px;
     margin-bottom: 35px;
     font-weight: bold;
 }

 .hero-content .highlight {
     background-color: #ffffff;
     color: #1a1a1a;
     padding: 2px 8px;
 }

 .description {
     font-size: 20px;
     ;
     margin-bottom: 15px;
     max-width: 700px;
 }


 .profile-image-container {
     flex-shrink: 0;
     position: relative;
     padding: 10px;
 }

 .profile-image {
     width: 300px;
     height: 300px;
     position: relative;
     filter: grayscale(100%);
     transition: filter 0.4s ease;
 }

 .profile-image:hover {
     filter: grayscale(0%);
 }

 .profile-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 /* Corner borders for profile image */
 .profile-image::before,
 .profile-image::after,
 .profile-image-container::before,
 .profile-image-container::after {
     content: '';
     position: absolute;
     width: 80px;
     height: 80px;
     border: 3px solid #ffffff;
 }

 .profile-image::before {
     top: -10px;
     /* Matches the container padding */
     left: -10px;
     /* Matches the container padding */
     border-right: none;
     border-bottom: none;
 }

 .profile-image::after {
     border-left: none;
     border-bottom: none;
     top: -10px;
     /* Matches the container padding */
     right: -10px;
     /* Matches the container padding */
 }

 .profile-image-container::before {
     bottom: 0;
     left: 0;
     border-right: none;
     border-top: none;
 }

 .profile-image-container::after {
     bottom: 0;
     right: 0;
     border-left: none;
     border-top: none;
 }

 /* Projects Section */
 .subsections {
     display: flex;
     flex-direction: column;
     align-items: center;
     width: 70vw;
 }

 .subsections p {
     font-size: 45px;
     font-weight: bold;
     text-align: center;
 }

 .section-header {
     display: flex;
     align-items: center;
     width: 70vw;
     gap: 20px;
     margin-top: 60px;
     margin-bottom: 60px;
 }


 .section-title {
     font-size: 45px;
     font-weight: bold;
     text-transform: none;
     white-space: nowrap;
 }

 .header-line {
     flex-grow: 1;
     height: 3px;
     background-color: #ffffff;
 }

 .projects-grid {
     display: flex;
     flex-wrap: wrap;
     gap: 30px;
     justify-content: center;
     width: 70vw;
 }

 .project-card {
    background-color: #1a1a1a;
    box-shadow: 0 0 0 rgba(255,255,255,0);
     border: 3px solid #ffffff;
     cursor: pointer;
     transition: transform 0.3s ease;
     overflow: hidden;
     width: 30%;
     flex-shrink: 0;
     display: flex;
     flex-direction: column;
     text-decoration: none;
 }

 .project-card:hover {
     transform: translateY(-5px);
 }

 .project-thumbnail {
     width: 100%;
     height: 200px;
     filter: grayscale(100%);
     transition: filter 0.4s ease;
     display: flex;
     align-items: center;
     justify-content: center;
     background-color: #1a1a1a;
 }

 .project-card:hover .project-thumbnail {
     filter: grayscale(0%);
 }

 .project-thumbnail img {
     width: 100%;
     height: 100%;
     object-fit: contain;
 }

 .project-title {
     background-color: #ffffff;
     color: #1a1a1a;
     font-size: 18px;
     font-weight: bold;
     padding: 8px 0px;
     margin-top: auto;
     text-align: center;
 }

 .hr {
     width: 65vw;
     border: 2px solid #ffffff;
     margin-top: 70px;
     margin-bottom: 70px;
 }

 .scroll-indicator {
     text-align: center;
     margin-top: 30px;
 }

 .scroll-arrow {
     width: 20px;
     height: 20px;
     border-right: 3px solid #ffffff;
     border-bottom: 3px solid #ffffff;
     transform: rotate(45deg);
     animation: blink 1.5s ease-in-out infinite;
     display: inline-block;
 }

 #typewriter::after {
    content: "_";
    animation: blink 0.7s infinite;
}

@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}

 .experience-grid {
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
     justify-content: space-between;
     align-items: flex-start;
     width: 70vw;
     margin: 0 auto;
 }

 .experience-card {
     text-align: center;
     transition: transform 0.3s ease;
     width: 30%;
     flex-shrink: 0;
     display: flex;
     flex-direction: column;
     align-items: center;
 }

 .experience-title {
     font-weight: bold;
     font-size: 35px;
 }

 .experience-date {
     margin-bottom: 5px;
 }

 .experience-role {
     font-weight: bold;
     background-color: #ffffff;
     color: #1a1a1a;
     font-size: 18px;
     margin-bottom: 5px;
 }

 .vertical-separator,
 .vertical-separator2 {
     width: 2px;
     background-color: #ffffff;
     margin: 20px 0px;
     align-self: stretch;
     flex-shrink: 0;
 }

 .section-label {
     font-size: 35px;
     color: #1a1a1a;
     background-color: #ffffff;
     margin-bottom: 30px;
     font-weight: bold;
 }

 .stack-skills-grid {
     width: 70vw;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     padding-bottom: 70px;
 }

 .stack-section {
     width: 45%;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
 }

 .stack-items {
     display: flex;
     flex-wrap: wrap;
     flex-direction: row;
     gap: 15px;
 }

 .skills-section {
     width: 45%;
     display: flex;
     flex-direction: column;
     align-items: flex-end;
 }

 .skills-items {
     display: flex;
     flex-wrap: wrap;
     flex-direction: row;
     justify-content: flex-end;
     gap: 15px;
 }

 .stack-skills-grid span {
    transition: transform 0.3s ease;
     border: #ffffff 1px solid;
     padding: 2px 8px;
 }

 .stack-skills-grid span:hover {
     transform: translateY(-5px);
 }

 .back-to-top {
     position: fixed;
     bottom: 30px;
     right: 30px;
     background-color: #ffffff;
     color: #1a1a1a;
     border: 3px solid #ffffff;
     padding: 5px;
     font-size: 16px;
     font-family: 'Courier New', monospace;
     cursor: pointer;
     transition: all 0.3s ease;
     opacity: 0;
     pointer-events: none;
     font-weight: bold;
 }

 .back-to-top.visible {
     opacity: 1;
     pointer-events: all;
 }

 .back-to-top:hover {
     background-color: #1a1a1a;
     color: #ffffff;
 }

 .footer-bottom{
    margin-bottom: 20px;
 }

 /* Responsive */
 @media (max-width: 968px) {
     nav {
         display: flex;
         border: none;
         width: 90vw;
         margin: 20px;
         padding: 20px;
         flex-direction: row;
         justify-content: space-between;
         align-items: flex-start;
     }

     .burger-menu {
         display: flex;
     }

     .nav-links {
         display: none;
         width: 100%;
         flex-direction: column;
         gap: 15px;
         padding-top: 20px;
         text-align: center;
     }

     .nav-links.active {
         display: flex;
     }

     .nav-links a {
         font-size: 16px;
     }

     .hero {
         width: 92vw;
         flex-direction: column;
         text-align: center;
         gap: 10px;
     }

     .profile-image {
         width: 200px;
         height: 200px;
     }

     .profile-image::before,
     .profile-image::after,
     .profile-image-container::before,
     .profile-image-container::after {
         width: 60px;
         height: 60px;
     }

     .hero-content {
         width: 100%;
         margin-top: 30px;
     }

     .name {
         font-size: 32px;
     }

     .description {
         font-size: 16px;
     }

     .section-header {
         flex-direction: column;
         margin-bottom: 30px;
         margin-top: 30px;
         align-items: center;
     }

     .header-line {
         display: none;
     }

     .subsections {
         width: 90vw;
     }

     .subsections p {
         font-size: 32px;
     }

     .projects-grid {
         gap: 20px;
         width: 95vw;
     }

     .project-thumbnail {
         height: 100px;
         object-fit: fill;
     }

     .project-card {
         width: 40%;
     }

     .project-title {
         font-size: 16px;
         padding: 3px 0px;
     }

     .hr {
         margin-top: 40px;
         margin-bottom: 40px;
     }

     .back-to-top {
         bottom: 50px;
         right: 15px;
         font-size: 12px;
     }

     .experience-grid {
         flex-direction: column;
         align-items: center;
         width: 90vw;
     }

     .experience-card {
         width: 65%;
     }

     .experience-title {
         font-size: 25px;
     }

     .vertical-separator {
         width: 50%;
         height: 2px;
         align-self: center;
     }

     .section-label {
         font-size: 32px;
         color: #1a1a1a;
         background-color: #ffffff;
         margin-bottom: 20px;
     }

     .stack-skills-grid {
         width: 80vw;
         gap: 10px;
     }

     .skills-items, .stack-items {
         gap: 5px;
     }

    .stack-skills-grid span {
        text-align: right;
        font-size: 12px;      
        padding: 4px 8px;
    }
    .vertical-separator2 {
        display: none;
     }
    .skills-section {
     width: 55%;
    }
    .stack-section{
     width: 40%;
    }
 }