/*
======================================================
 DARK MODE
 PORTFÓLIO PROFISSIONAL
======================================================
*/



/* =====================================================
            VARIÁVEIS DARK MODE
===================================================== */


body.dark {


    --dark:

    #F9FAFB;



    --secondary:

    #D1D5DB;



    --gray:

    #9CA3AF;



    --light:

    #111827;



    --white:

    #1F2937;



    --border:

    #374151;



}







/* =====================================================
                    BASE
===================================================== */


body.dark {


    background:

    #111827;


    color:

    #E5E7EB;


}






body.dark header {


    background:

    rgba(17,24,39,.95);


    border-color:

    #374151;


}







/* =====================================================
                    TEXTOS
===================================================== */


body.dark h1,


body.dark h2,


body.dark h3,


body.dark h4 {


    color:

    #F9FAFB;


}





body.dark p {


    color:

    #D1D5DB;


}






/* =====================================================
                    MENU
===================================================== */


body.dark #navbar a {


    color:

    #D1D5DB;


}

body.dark #navbar {

    background: #111827;

    border-top: 1px solid #374151;

}

body.dark .availability {


    display:

    flex;


    gap:

    15px;


    background:

    #374151;


    padding:

    25px;


    border-radius:

    15px;


    color:

    #43d363;


}

body.dark .result-card {


    background:

    #374151;


    padding:

    30px;


    border-radius:

    15px;


    box-shadow:

    var(--shadow);


}

body.dark .result-card i {


    color:

    var(--success);


    font-size:

    25px;


    margin-bottom:

    15px;


}



body.dark #navbar a:hover {


    color:

    #60A5FA;


}






/* =====================================================
                    CARDS
===================================================== */


body.dark .service-card,


body.dark .project-card,


body.dark .article-card,


body.dark .technology-item,


body.dark .resume-section,


body.dark .contact-form,


body.dark .timeline-content {


    background:

    #1F2937;


    border-color:

    #374151;


}







body.dark .service-card:hover,


body.dark .project-card:hover,


body.dark .technology-item:hover {


    box-shadow:

    0 20px 40px rgba(0,0,0,.35);


}







/* =====================================================
                    FUNDOS
===================================================== */


body.dark .services,


body.dark .articles-page,


body.dark .resume-page,


body.dark .project-detail-header {


    background:

    #111827;


}







body.dark .technology-page,


body.dark .contact-page {


    background:

    #111827;


}






/* =====================================================
                    TAGS
===================================================== */


body.dark .timeline-tags span,


body.dark .resume-tags span,


body.dark .technology-tags span,


body.dark .article-tags span {


    background:

    #374151;


    color:

    #93C5FD;


}






/* =====================================================
                    FORMULÁRIOS
===================================================== */


body.dark input,


body.dark textarea,


body.dark select {


    background:

    #111827;


    color:

    white;


    border-color:

    #374151;


}





body.dark input::placeholder,


body.dark textarea::placeholder {


    color:

    #9CA3AF;


}







/* =====================================================
                    BOTÕES
===================================================== */


body.dark .btn-secondary {


    color:

    #60A5FA;


    border-color:

    #60A5FA;


}





body.dark .btn-secondary:hover {


    background:

    #60A5FA;


    color:

    #111827;


}







/* =====================================================
                    FOTO
===================================================== */


body.dark .photo-border img {


    border-color:

    #1F2937;


}







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


body.dark footer {


    background:

    #030712;


}







/* =====================================================
                    LOADER
===================================================== */


body.dark .loader {


    background:

    #111827;


}





body.dark .loader-circle {


    border-color:

    #374151;


    border-top-color:

    var(--primary);


}

body.dark header.scrolled {


    box-shadow:

    0 5px 25px rgba(0,0,0,.4);


}