@import url('https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200..800;1,200..800&display=swap');

* {
    margin: 0;
    padding: 0;
}

body {
    font-family: "Karla", sans-serif;
    overflow-y: scroll; /* Vertical scrolling */
    scroll-snap-type: y proximity; /* Vertical snapping */
}

/* Nav Bar */
#navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #F0F8FF;
    padding: 30px 20px;
    position: relative;
}

#navbar .hamburger-menu {
    display: none;  
    cursor: pointer;
    font-size: 30px;  
}

#navbar .nav-links {
    list-style-type: none;
    display: flex;  
    margin: 0;
    padding: 0;
    width: 100%;
    justify-content: flex-end;
}

#navbar .nav-links li {
    display: inline-block;
    margin-left: 20px;
}

#navbar .nav-links a {
    text-decoration: none;
    color: black;
    font-weight: bold;
}

/* Responsive Styles */
@media (max-width: 768px) {
    #navbar .hamburger-menu {
        display: block;  
    }

    #navbar .nav-links {
        flex-direction: column;
        position: absolute;
        top: 60px; 
        left: 0;
        right: 0;
        background-color: #F0F8FF;  
        display: none;  
    }

    #navbar .nav-links li {
        text-align: center;  
        width: 100%;  
        padding: 10px 0;  
    }
    
}
/* Text Slider*/
.text-slider {
    display: flex;
    white-space: nowrap;
    animation: 20s slide linear infinite;
}

.text-slider p {
    margin-right: 50px;   
    flex-shrink: 0;         
    font-size: 25px;
}

.summary {
    overflow: hidden;
    padding: 10px 0;
    display: flex;
}

/* Text Slider 2*/
.text-slider-2 {
    display: flex;
    white-space: nowrap;
    animation: 20s slide-2 linear infinite;
}

.text-slider-2 p {
    margin-right: 50px;    
    flex-shrink: 0;        
    font-size: 25px;
    margin-bottom: 5vh;
}

.summary-2 {
    overflow: hidden;
    padding: 10px 0;
    display: flex;
}



@keyframes slide {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}

@keyframes slide-2 {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0%);
    }
}


/*
---------------------------------------------------------------------------------------------------------------------------------------
Hero Section */

#hero {
    display: grid;
    place-items: center;
    align-content: center;
    min-height: 85vh;
    max-height: 85vh;
}

#hero img {
    width:450px;
    height: 450px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 5px 5px 15px rgb(0, 0, 0, 0.5);
    margin-bottom: 5vh;
}


#hero h1{
    font-size: 42px;
    margin-top: 0;
    margin-bottom: 0;
    line-height: 1;
}

#hero .large{
    font-size: 85px;
}

#hero h2 {
    font-size: 13px;
    margin-top: 0;
    margin-bottom: 0;
}

@media (max-width: 768px) {
    #hero {
        display: grid;
        place-items: center;
        align-content: center;
        min-height: 85vh;
        max-height: 85vh;
    }


    #hero img {
        width:300px;
        height: 300px;
        border-radius: 50%;
        object-fit: cover;
        box-shadow: 5px 5px 15px rgb(0, 0, 0, 0.5);
        margin-bottom: 5vh;
    }


    #hero h1{
        font-size: 32px;
        margin-top: 0;
        margin-bottom: 0;
        line-height: 1;
    }
    
    #hero .large{
        font-size: 75px;
    }
    
    #hero h2 {
        font-size: 13px;
        margin-top: 0;
        margin-bottom: 0;
    }

    #hero-text {
        margin-left: 10vw;
        margin-right: 10vw;
    }
}


/* About */
#about {
    display: grid;
    min-height: 100vh;
}

#about h1 {
    font-size: 60px;
    font-weight: bold;
    margin-left: 5vw;
}

#about h2 {
    margin-left: 45vw;  
    font-size: 55px;
    font-weight: bold;
    line-height: 1.8;
    padding-left: 40vw;
    max-padding-left: 660px; 
}

#about h2{ 
    position: relative;
    max-width: 1200px; 
    margin-left: auto;
    margin-right: auto;
}

#about .soft {
    padding-left: 10vw; 
    max-padding-left: 120px; 
}

#about .code {
    padding-left: 50vw;
    max-padding-left: 660px; 
}
#about p {
    margin-left: 5vw;
    margin-right: 5vw;
    font-size: 30px;
}

@media (max-width: 768px) {
    /* Adjust the grid container */
    #about {
        display: block;  
        min-height: auto; 
        padding: 20px;  
        min-height: 100vh;
        margin-top: 20vh;
    }


    /* Adjust heading sizes and margins */
    #about h1 {
        font-size: 55px; 
        margin-left: 3vw;  
        text-align: left; 
    }

    #about-h2 {
        margin-top: 10vh;
        margin-bottom: 10vh;
    }

    #about h2 {
        font-size: 28px; 
        margin-left: 2vw;  
        padding-left: 0;  
        text-align: center;  
        line-height: 1.4;  
    }

    
    #about .soft, #about .code {
        padding-left: 5vw;  
        max-padding-left: 50px;  
    }

    /* Adjust paragraph styles */
    #about p {
        margin-left: 3vw;
        margin-right: 3vw;
        font-size: 22px;  
    }
}


#projects {
    display: grid;
    min-height: 80vh;
}

#projects h1 {
    font-size: 60px;
    font-weight: bold;
    margin-left: 5vw;
}

#img-content {
    display: flex;
    justify-content: center; /* Centering the project divs horizontally */
    flex-wrap: wrap; /* Allows project items to wrap in case of insufficient space */
    gap: 20px; /* Adds space between project containers */
}

#img-content p{
    margin-bottom: 20px;
}

#project {
    display: flex;
    flex-direction: column; 
    align-items: center; /* Center aligns the content horizontally */
    text-align: center; /* Centers the text within each block */
    max-width: 350px; /* Optional: constrain the width of each project block */
    margin: 5vw;
    margin-bottom: 2rem; /* Space between rows when wrapping occurs */
}

#project img {
    width: 350px; 
    height: 250px; 
    border-radius: 5%; /* Softens the corners of the image */
    box-shadow: 3px 3px 10px rgba(114, 114, 114, 0.5);
    margin-bottom: 3vh;
}

#technology img {
    width: 40px;
    height: 40px;
    border-radius: 0; /* Softens the corners of the image */
    box-shadow: 0px 0px 0px rgba(255, 255, 255, 0.5);
    margin: 1vh 1vw 0 0;
}



#img-content .project-container-1 {
    transition-delay: 200ms; /* Staggered delay for first item */
}

#img-content .project-container-2 {
    transition-delay: 400ms; /* Staggered delay for second item */
}

#img-content .project-container-3 {
    transition-delay: 600ms; /* Staggered delay for second item */
}

#img-content .project-container-4 {
    transition-delay: 800ms; /* Staggered delay for second item */
}


#work {
    display: grid;
    min-height: 30vh;
}

#work h1 {
    font-size: 60px;
    font-weight: bold;
    margin-left: 5vw;
}

#job {
    border-bottom-style: solid;
    border-width: thin;
    margin: 0 5vw 3vh 5vw;
}

#job p {
    font-weight: lighter;
}

#job-content {
    display: grid;
    place-items: left;
    align-content: center;
}

#job-desc {
    display: flex;
    justify-content: space-between;
    margin-top: 1vh;
}

#job-content .project-container-1 {
    transition-delay: 100ms; /* Staggered delay for first item */
}

#job-content .project-container-2 {
    transition-delay: 200ms; /* Staggered delay for second item */
}

#job-content .project-container-3 {
    transition-delay: 300ms; /* Staggered delay for second item */
}

@media (max-width: 768px) {
    #img-content {
        flex-direction: column; /* Stack project containers vertically */
        align-items: center; /* Center align the project containers */
    }

    #project {
        max-width: 90%; /* Make the project container take almost full width */
        margin: 5vw 0; /* Add vertical margin */
    }

    #project img {
        height: auto; /* Maintain aspect ratio */
    }

    #technology img {
        width: 35px;
        height: 35px;
    }
}



#education {
    display: grid;
    min-height: 40vh;
}

#education h1 {
    font-size: 60px;
    font-weight: bold;
    margin-left: 5vw;
}

#education-content {
    display: grid;
    place-items: left;
    align-content: center;
}

#education-content p{
    font-weight: lighter;
}

#ed {
    border-bottom-style: solid;
    border-width: thin;
    margin: 0 5vw 3vh 5vw;
}

#ed-desc {
    display: flex;
    justify-content: space-between;
    margin-top: 1vh;
}


#education-content .project-container-1 {
    transition-delay: 100ms; /* Staggered delay for first item */
}

#education-content .project-container-2 {
    transition-delay: 200ms; /* Staggered delay for second item */
}

#education-content .project-container-3 {
    transition-delay: 300ms; /* Staggered delay for second item */
}

.hidden {
    opacity: 0;
    filter: blur(5px);
    transform: translateX(-100%);
    transition: all 1s;
}

.show {
    opacity: 1;
    filter: blur(0);
    transform: translateX(0);
}

@media(prefers-reduced-motion) {
    .hidden {
        transition: none;
    }
}

.social-icons {
    position: fixed;
    top: 50%; /* Center vertically */
    right: 10px; /* Distance from the right edge of the viewport */
    transform: translateY(-50%); /* Adjust the div to be centered vertically */
    z-index: 1000; /* Ensure it's above other content */
}

.social-icons a {
    display: block; /* Stack icons vertically */
    margin: 5px 0; /* Space between icons */
}

.social-icons img {
    width: 30px; /* Set a specific size for icons */
    height: auto;
    display: block; /* Ensure the link area matches the image size */
}

@media (max-width: 768px) {
    .social-icons {
        position: fixed;
        top: 50%; /* Center vertically */
        right: 2vw; /* Distance from the right edge of the viewport */
        transform: translateY(-50%); /* Adjust the div to be centered vertically */
        z-index: 1000; /* Ensure it's above other content */
    }
}


#footer {
    display: grid;
    min-height: 30vh;
    background-color: #F0F8FF;
}

#footer h1 {
    font-size: 60px;
    font-weight: bold;
    margin-left: 5vw;
    margin-top: 5vh;
}

#footer .nav-links {
    list-style-type: none;
}

#footer .nav-links li {
    display: inline-block;
    margin-left: 5vw;
}

#footer .nav-links a {
    text-decoration: none;
    color: black;
    font-weight: light;
}

#footer .nav-links li img{
    width: 100px; /* Set a specific size for icons */
    height: auto;
    display: block; /* Ensure the link area matches the image size */
}

#footer-content {
    display: flex;
    justify-content: space-between;
    margin-right: 4vw;
}


@media (max-width: 768px) {

    #footer h1 {
        font-size: 50px;
        font-weight: bold;
        margin-left: 5vw;
        margin-top: 5vh;
    }
    
    #footer .nav-links li img{
        width: 35px; /* Set a specific size for icons */
        height: auto;
        display: block; /* Ensure the link area matches the image size */
    }
    
    #footer .nav-links li {
        display: inline-block;
        margin-left: 1vw;
    }
    
    #footer .nav-links {
        margin-left: 5vw;
    }

    #footer p {
        font-size: 12px;
    }

}