/* =========================
   GLOBAL
========================= */


html {
    scroll-behavior: smooth;
}


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


body {

    font-family: "Inter", sans-serif;

    background: var(--background);

    color: var(--text-color);

    transition: background .4s ease, color .4s ease;

    text-align: justify;

}



/* =========================
   MAIN CONTAINER
========================= */


.section-container {

    width: 100%;

    max-width: 1100px;

    margin: auto;

}



/* =========================
   NAVIGATION
========================= */


nav {

    width:100%;

    background:var(--nav-bg);

    border-bottom:1px solid rgba(128,128,128,.25);

}



nav .section-container {

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:20px 0;

}



nav ul {

    display:flex;

    align-items:center;

    gap:30px;

    list-style:none;

}



nav h1 {

    font-family:"Dancing Script", cursive;

    font-size:2.3rem;

    color:var(--text-color);

    font-weight:600;

}



nav a {
    text-decoration: none;
    color: var(--text-color);
    font-weight: 600;

    display: inline-block;

    transition: 
        color .3s ease,
        transform .3s ease;
}


nav a:hover {

    color: rgb(28, 104, 167);

    transform: translateY(-3px);

}



.avatar {

    width:55px;

    height:55px;

    border-radius:50%;

    object-fit:cover;

    border:2px solid black;

}



.mode {

    cursor:pointer;

    transition:.3s ease;

}



.mode:hover {

    transform:rotate(180deg);

}



/* =========================
   SECTIONS
========================= */


section {

    padding:90px 20px;

}



section h2 {

    text-align:center;

    font-family:"Dancing Script", cursive;

    font-size:3.2rem;

    color:var(--accent-color);

    margin-bottom:50px;

}



/* =========================
   GENERAL CARD
========================= */


.card {

    width:100%;

    background:var(--section-bg);

    border-radius:20px;

    box-shadow:0 10px 30px rgba(0,0,0,.12);

    transition:.3s ease;

}



.card:hover {

    transform:translateY(-5px);

    box-shadow:0 15px 40px rgba(0,0,0,.18);

}



/* =========================
   ABOUT
========================= */


.about-content {

    padding:50px;

}


.about-section {

    display:block;

    margin-bottom:35px;

    padding-bottom:25px;

    border-bottom:1px solid rgba(128,128,128,.25);

}



.about-section:last-child {

    border-bottom:none;

    margin-bottom:0;

}



.about-section h3 {

    font-size:1.35rem;

    margin-bottom:12px;

    color:var(--accent-color);

}



.about-section p {

    max-width:900px;

    line-height:1.8;

    font-size:1.05rem;

}



#about b {

    font-weight:600;

}


/* =========================
   SKILLS
========================= */


.skills-grid {

    width:100%;

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}



.skill-card {

    padding:30px;

}



.skill-card h3 {

    color:var(--accent-color);

    margin-bottom:15px;

}



/* =========================
   EDUCATION
========================= */


.education-card {

    width:100%;

    padding:35px;

}



.education-card h3 {

    color:var(--accent-color);

    margin-bottom:15px;

}



/* =========================
   PROJECTS
========================= */


.projects-grid {

    width:100%;

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}



.project-card {

    padding:30px;

}



.project-card h3 {

    color:var(--accent-color);

    margin-bottom:15px;

}



/* =========================
   CERTIFICATIONS
========================= */


.certificate-card {

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:50px;

    padding:40px;

}



.certificate-info {

    flex:1;

}



.certificate-info h3 {

    color:var(--accent-color);

    font-size:1.5rem;

    margin-bottom:20px;

}



.certificate-info p {

    line-height:1.7;

    margin-bottom:15px;

}



.certificate-card a {

    color:var(--accent-color);

    text-decoration:none;

    font-weight:600;

}



.certificate-card a:hover {

    text-decoration:underline;

}



.certificate-badge {

    min-width:150px;

}



/* =========================
   CONTACT
========================= */


.contact-links {

    display:flex;

    justify-content:center;

    gap:35px;

}



.contact-links a {

    color:var(--accent-color);

    text-decoration:none;

    font-weight:600;

}



.contact-links a:hover {

    text-decoration:underline;

}



/* =========================
   FOOTER
========================= */


footer {

    width:100%;

    margin-top:80px;

    padding:30px 20px;

    background:var(--nav-bg);

    border-top:1px solid rgba(128,128,128,.25);

    text-align:center;

    color:var(--text-color);

}



footer p {

    font-size:.95rem;

}



/* =========================
   ANIMATION
========================= */


@keyframes fadeAbout {


    from {

        opacity:0;

        transform:translateY(30px);

    }


    to {

        opacity:1;

        transform:translateY(0);

    }

}



.about-content {

    animation:fadeAbout .7s ease;

}



/* =========================
   RESPONSIVE
========================= */


@media(max-width:900px){


    nav .section-container {

        padding:15px 20px;

    }


    nav ul {

        gap:15px;

    }


    .skills-grid,
    .projects-grid {

        grid-template-columns:1fr;

    }


    .certificate-card {

        flex-direction:column;

        text-align:center;

    }


}



@media(max-width:600px){


    nav .section-container {

        flex-direction:column;

        gap:20px;

    }


    nav h1 {

        font-size:2rem;

    }


    section h2 {

        font-size:2.5rem;

    }


    .about-content {

        padding:25px;

    }


    #about p {

        text-align:left;

    }

}