@charset "utf-8";
@import url(./root.css);

/*--------------------------------*/
/*General Rules*/
/*--------------------------------*/

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

html {
    font-family: 'Nunito Sans', 'Open Sans', Arial, sans-serif;
    font-size: 62.5%;
}

.container {
    width: min(100% - 30px, 1200px);
    margin-inline: auto;
}

.flex {
    display: flex;
}

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    grid-template-rows: repeat(2, auto); 
    gap: 20px; 
    padding: 20px;
    justify-items: stretch;
}

.bg {
    background-color: var(--app-dark-mode);
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.03);
}

.bg2 {
    background-color: var(--app-dark-mode1);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.3); 
}

/*--------------------------------*/
/*Header*/
/*--------------------------------*/

.nav {
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
}

.menu-icon {
    display: none;
    line-height: 70px;
    cursor: pointer;
}

.get-in-touch-button {
    line-height: 70px;
}

.get-in-touch {
    height: 40px;
    width: 150px;
    border-radius: var(--app-box-radius);
    background-color: var(--app-button-color);
    padding: 10px 15px;
    text-align: center;
    color: var(--app-font-color);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

.get-in-touch:hover {
    color: var(--app-font-color);
    background-color: var(--app-hover-cover);
}

.bar {
    display: block;
    width: 25px;
    height: 3px;
    margin:  5px auto;
    transition: all 0.3s ease-in-out;
    background-color: var(--app-font-color);
}

a {
    text-decoration: none;
    color: var(--app-font-color);
}

a:hover {
    color: var(--app-hover-cover);
}

@media (max-width: 768px) {
    .nav {
        justify-content: space-between;
        align-items: center; 
        height: 70px;
    }

    .menu-icon {
        display: block;
        line-height: 70px
    }

    .get-in-touch-button {
        position: fixed;
        left: -100%;
        top: 70px;
        width: 100%;
        height: 20%;
        transition: left 0.3s ease-in-out;
        z-index: 1000;
        display: flex;         
        justify-content: center;     
        align-items: center;
        text-align: center;
        line-height: 70px;
        background-color: rgb(255 255 255 / 0.2);
        backdrop-filter: 15px;
    }

    .get-in-touch-button.active {
        left: 0;
    }

    .menu-icon.active .bar:nth-child(2) {
        opacity: 0;
    }

    .menu-icon.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .menu-icon.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
}

.logo {
    display: flex;
    flex-direction: column;
    justify-content: center;   
    align-items: flex-start;  
    height: 70px;             
    font-size: 30px;
    font-weight: 700;
    cursor: default;
}

.logo a {
    text-decoration: none;
    color: var(--app-font-color);
}

/* Common fade-in animation */
@keyframes fadeSlideIn {
    0% {
        opacity: 0;
        transform: translateY(20px); /* slide up effect */
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.landing-page h1 {
    opacity: 0; /* start hidden */
    animation: fadeSlideIn 1s ease-out forwards; /* forwards keeps it visible */
}

.landing-page .subheading {
    opacity: 0;
    animation: fadeSlideIn 1s ease-out forwards;
    animation-delay: 0.5s; /* delay for stagger effect */
}


/*--------------------------------*/
/*Body*/
/*--------------------------------*/

footer {
    height: 70px;
}

.area {
    min-height: calc(100vh - 140px); 
    position: relative;
    flex: 1;
}

.get-in-touch, .download-cv-button, .about-me-button, .view-github-button {
    transition: background-color 0.3s, color 0.3s;
}

/*--------------------------------*/
/*Landing page*/
/*--------------------------------*/

.main-bg {
    background-image: url('../img/landing.jpg');
    background-size: cover; 
    background-position: center;
    background-repeat: no-repeat;
    height: 100vh;
}

.landing-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; 
    text-align: center;
}

h1 {
    margin-top: 20px;
    padding: 10px;
    font-size: 43px;
    font-weight: 900;
    color: var(--app-font-color);
}

.subheading {
    text-align: center;
    max-width: 700px;
    padding: 10px;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.5;
    margin-top: -10px;
    color: var(--app-font-color);
}

.two-buttons {
    margin: 50px;
    gap: 20px;
    display: flex;         
    justify-content: center;     
    align-items: center;
    text-align: center;
    color: #000;
}

.download-cv-button {
    margin: 20px 0;
    height: 40px;
    width: 150px;
    border-radius: var(--app-box-radius);
    color: #000;
    background-color: var(--app-font-color);
    padding: 10px 15px;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
}

.download-cv-button:hover {
    color: #000;
}

/*--------------------------------*/
/*About me*/
/*--------------------------------*/

.about-me-button {
    margin: 20px 0;
    height: 40px;
    width: 150px;
    border-radius: var(--app-box-radius);
    color: var(--app-font-color);
    background-color: var(--app-button-color);
    padding: 10px 15px;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
}

.about-me-button:hover,
.about-me-button:focus {
    color: #000;
    background-color: var(--app-hover-cover);
}

.about-me-writeup {
    gap: 25px;
}

.my-pic {
    display: flex;
    justify-content: center;
    align-items: center; 
    width: 100%;
    max-width: 300px;
    height: auto;
    margin: 0 auto;
}

.my-pic img {
    width: 100%;
    height: auto;
}

.write-up {
    gap: 20px;
}

article {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; 
}

article p {
    max-width: 700px;
    padding: 5px;
    color: var(--app-font-color);
    line-height: 1.5;
}

h2 {
    padding: 10px;
    text-align: center;
    font-size: 35px;
    font-weight: 600;
    color: var(--app-font-color);
}

.height {
    padding: 70px 0;
}

/* Scroll-triggered fade/slide for image and article */
/* Base for scroll animation */
.animate-on-scroll {
    opacity: 0;
    transition: all 0.6s ease-out;
}

.animate-left {
    transform: translateX(-30px);
}

.animate-right {
    transform: translateX(30px);
}

/* Active triggers the animation */
.animate-on-scroll.active {
    opacity: 1;
    transform: translateX(0) translateY(0);
}

/* Paragraphs stagger */
.stagger {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease-out;
}

.stagger.active {
    opacity: 1;
    transform: translateY(0);
}

.animate-down {
    transform: translateY(-30px);
}

.animate-on-scroll.active.animate-down {
    transform: translateY(0);
}

/*--------------------------------*/
/*Skills section*/
/*--------------------------------*/

.technologies {
    justify-content: center;     
    align-items: center;
    text-align: center;
    margin: 5px;
    border-radius: var(--app-box-radius);
    color: var(--app-font-color);
}

.technologies h3 {
    padding: 10px;
    text-align: center;
    font-size: 34px;
    font-weight: 600;
    color: var(--app-font-color);
}

/* Initial state */
.technologies h3,
.technologies .subheading2 {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease-out;
}

/* When visible */
.technologies h3.active,
.technologies .subheading2.active {
    opacity: 1;
    transform: translateY(0);
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.tech-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--app-dark-mode1);
    padding: 20px;
    border-radius: 12px;
    opacity: 0;
    transform: translateY(20px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tech-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 20px rgba(97, 218, 251, 0.3);
}

.icon {
    font-size: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    transition: transform 0.3s ease, text-shadow 0.3s ease;
}

.tech-card:hover .icon {
    transform: scale(1.2);
    text-shadow: 0 0 10px rgba(97, 218, 251, 0.6);
}

/* Skill Colors */
.html-icon i { color: #e34c26; }
.css-icon i { color: #1572b6; }
.js-icon i { color: #f7df1e; }
.java-icon i { color: #007396; }
.ts-icon i { color: #007acc; }
.processing-icon i { color: #6e4c9e; }
.cplus-icon i { color: #00599C; }
.csharp-icon i { color: #9B4993; }
.mysql-icon i { color: #00758F; }

.level {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-top: 10px;
}

.level p:first-child {
    font-weight: 600;
    margin-bottom: 5px;
}

.progress {
    width: 80%;
    height: 6px;
    background-color: rgba(255,255,255,0.1);
    border-radius: 3px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #61dafb, #21a1f1);
    border-radius: 3px;
    transition: width 1.2s ease-in-out;
}

@keyframes fadeSlideIn {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

.show-more-container {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    width: 100%;
}

/* Responsive: hide cards beyond 3 on small screens */
@media (max-width: 768px) {
    .tech-card:nth-child(n+4) {
        display: none;
    }
    .show-more-container {
        margin-top: 10px; 
    }
}

/* Show only on small screens */
@media (max-width: 1200px) {
    .show-more-container {
        margin-top: 10px; 
    }
}

.show-more-btn {
    padding: 5px;
    width: 150px;
    height: 40px;
    border-radius: var(--app-box-radius);
    background-color: #4a90e2;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    color: var(--app-font-color);
    cursor: pointer;
}


.show-more-btn:hover {
    background-color: var(--app-hover-cover);
}


/*--------------------------------*/
/*projects*/
/*--------------------------------*/

h4 {
    padding: 10px;
    text-align: center;
    font-size: 32px;
    font-weight: 600;
    color: var(--app-font-color);
}

.subheading2 {
    text-align: center;
    padding: 5px 10px;  
    font-size: 20px;     
    font-weight: 400;   
    line-height: 1.6;    
    margin-top: 0;        
    color: #e0e0e0;       
    max-width: 650px;          
    margin-left: auto;         
    margin-right: auto;
}

.github-link {
    color: var(--app-button-color);      
    font-weight: 600;       
    text-decoration: none;  
    transition: color 0.3s ease;
}

.github-link:hover {
    color: var(--app-hover-cover);         
}


.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    margin-top: 20px;
    justify-content: center; /* centers grid items horizontally */
}

.project-card {
    background-color: var(--app-dark-mode1);
    border-radius: var(--app-box-radius);
    color: var(--app-font-color);
    padding: 20px;
    border: 1px solid rgba(255,255,255,0.1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    opacity: 0;
    transform: translateY(30px);
    transition: transform 0.5s ease, box-shadow 0.5s ease, opacity 0.5s ease;
}

.project-card img {
    width: 100%;
    height: 200px; /* set a fixed height for all images */
    object-fit: cover; /* ensures image fills container without distortion */
    border-radius: var(--app-box-radius);
    margin-bottom: 15px;
    transition: transform 0.3s ease;
}

.project-card:hover img {
    transform: scale(1.05);
}

.project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 25px rgba(97, 218, 251, 0.3);
}

.links {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 10px;
    margin-top: auto;
}

.button, .button2 {
    padding: 10px 15px;
    border-radius: var(--app-box-radius);
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%; /* take full width of grid cell */
}

.button a, .button2 a {
    color: inherit;
}

.button {
    background-color: var(--app-font-color);
    color: #000;
}

.button2 {
    background-color: #4a90e2;
    color: #fff;
}

.button2:hover {
    background-color: var(--app-hover-cover);
    color: #000;
}

/* Scroll-triggered animation */
.animate-on-scroll.active {
    opacity: 1;
    transform: translateY(0);
}

.project-card img,
.project-card p,
.project-card .links {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease;
}

.project-card.active img {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.1s;
}

.project-card.active p {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.3s;
}

.project-card.active .links {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.5s;
}

.project-card.hidden {
    display: none;
}


/* Initial hidden state for project section heading and subheading */
.projects h4,
.projects .subheading2 {
    opacity: 0;
    transform: translateY(30px);
    transition: transform 0.5s ease, opacity 0.5s ease;
}

/* Active state */
.projects h4.active,
.projects .subheading2.active {
    opacity: 1;
    transform: translateY(0);
}

.projects .show-more-container {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    width: 100%;
}


.projects .show-more-btn {
    padding: 5px;
    width: 150px;
    height: 40px;
    border-radius: var(--app-box-radius);
    background-color: #4a90e2;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    color: var(--app-font-color);
    cursor: pointer;
}

.p {
    font-weight: 600;
    font-size: 17px;
    margin-bottom: 10px;
}

.links {
    margin-top: 10px;
}

.projects-show-more-btn {
    padding: 5px;
    width: 150px;
    height: 40px;
    border-radius: var(--app-box-radius);
    background-color: #4a90e2;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    color: var(--app-font-color);
    cursor: pointer;
}


.projects-show-more-btn:hover {
    background-color: var(--app-hover-cover);
}

/*--------------------------------*/
/*Reach Out Section*/
/*--------------------------------*/
.reach-out {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
    position: relative;
    z-index: 2;
    padding: 60px 0;
    min-height: 300px;
}

/* Heading & paragraph animation */
.reach-out h5 {
    font-size: 38px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
    opacity: 0;
    transform: translateY(20px);
    animation: slideFadeIn 1s ease forwards;
    animation-delay: 0.2s; /* stagger */
}

.reach-out p {
    margin-bottom: 40px;
    max-width: 600px;
    line-height: 1.6;
    font-size: 17px;
    color: #ddd;
    opacity: 0;
    transform: translateY(20px);
    animation: slideFadeIn 1s ease forwards;
    animation-delay: 0.4s; /* stagger */
}

/* Social icons container */
.contact-social-list {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}

/* Social icon links */
.contact-social-list li a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    text-align: center;
    font-size: 24px;
    color: #fff;
    box-shadow: 0 0 10px rgba(255,255,255,0.2);
    backdrop-filter: blur(5px);
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
}

/* Staggered animation for social icons */
.contact-social-list li:nth-child(1) a { animation: slideFadeIn 0.8s ease forwards; animation-delay: 0.6s; }
.contact-social-list li:nth-child(2) a { animation: slideFadeIn 0.8s ease forwards; animation-delay: 0.8s; }
.contact-social-list li:nth-child(3) a { animation: slideFadeIn 0.8s ease forwards; animation-delay: 1s; }
.contact-social-list li:nth-child(4) a { animation: slideFadeIn 0.8s ease forwards; animation-delay: 1.2s; }

/* Hover effect */
.contact-social-list li a:hover {
    transform: scale(1.2) rotate(10deg);
    box-shadow: 0 0 25px #61dafb, 0 0 50px #61dafb;
}

/* Individual icon colors */
.linkedin { color: #0a66c2; }
.instagram { color: #e4405f; }
.github { color: #fff; }
.email { color: #61dafb; }

/*--------------------------------*/
/*Keyframes for slide + fade in*/
/*--------------------------------*/
@keyframes slideFadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/*--------------------------------*/
/*Media queries*/
/*--------------------------------*/

@media (max-width: 768px) {
    .about-me-writeup {
        flex-direction: column; 
    }

    .about-me-writeup .my-pic {
        order: 1;
    }

    .about-me-writeup article {
        order: 2;
    }

    .col {
        width: calc(50% - 10px);
    }

    .grid {
        grid-template-columns: repeat(2, 1fr); 
    }

    h1 {
        font-size: 36px;
    }

    h2 {
        font-size: 34px;
    }

    h3 {
        font-size: 32px;
    }

    h4 {
        font-size: 30px;
    }

    .logo {
        display: flex;
        flex-direction: column;
        justify-content: center;   
        align-items: flex-start;  
        font-size: 30px;
        font-weight: 700;
        cursor: default;
        margin-top: 20px;
    }

    .subheading {
        padding: 10px;
        text-align: center;
        font-size: 15px;
        font-weight: 500;
        line-height: 1.5;
        margin-top: -10px;
        color: var(--app-font-color);
    }

    .subheading2 {
        text-align: center;
        padding: 5px 10px;  
        font-size: 17px;     
        font-weight: 400;   
        line-height: 1.6;    
        margin-top: 0;        
        color: #e0e0e0;       
        max-width: 650px;          
        margin-left: auto;         
        margin-right: auto;
    }
}


@media screen and (max-width: 480px) {
    .col {
        width: 100%;
    }

    .grid {
        grid-template-columns: 1fr; 
    }

    h1 {
        font-size: 34px;
    }

    h2 {
        font-size: 32px;
    }

    h3 {
        font-size: 30px;
    }

    h4 {
        font-size: 28px;
    }

    .logo {
        display: flex;
        flex-direction: column;
        justify-content: center;   
        align-items: flex-start;  
        font-size: 30px;
        font-weight: 700;
        cursor: default;
        margin-top: 20px;
    }

    .subheading {
        padding: 10px;
        text-align: center;
        font-size: 15px;
        font-weight: 500;
        line-height: 1.5;
        margin-top: -10px;
        color: var(--app-font-color);
    }
    .subheading2 {
        text-align: center;
        padding: 5px 10px;  
        font-size: 15px;     
        font-weight: 400;   
        line-height: 1.6;    
        margin-top: 0;        
        color: #e0e0e0;       
        max-width: 650px;          
        margin-left: auto;         
        margin-right: auto;
    }

    .copyright p {
        font-size: 13px;
    }
}

/*--------------------------------*/
/*Footer*/
/*--------------------------------*/

footer {
    color: var(--app-font-color);
    background-color: var(--app-dark-mode1); /* matches bg2 */
    padding: 20px 0;
}

.footer-minimal {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.footer-minimal p {
    font-size: 16px;
    line-height: 1.5;
    color: var(--app-font-color);
    margin: 0;
}

/* Optional: small responsive tweak */
@media (max-width: 768px) {
    .footer-minimal p {
        font-size: 14px;
    }
}