@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@100..900&display=swap');

:root[data-theme='dark'] {

    --primary-color: #F0F0F0;
    --primary-bg-color: #111217;
    --secondary-bg-color: #28292E;
    --primary-border-color: #28292E;
    --secondary-border-color: #56575a;


    --title-color: #9a9a9c;
    --text-color: #9a9a9c;
    --link-color: #9a9a9c;
    --icon-color: #c7c8c9;

}

:root[data-theme='light'] {

    --primary-color: #0b0b0f;
    --primary-bg-color: #e9e9e9;
    --secondary-bg-color: #c7c8c9;
    --primary-border-color: #c7c8c9;
    --secondary-border-color: #9a9a9ca1;
    --title-color: #0b0b0f;
    --text-color: #28292e;
    --link-color: #28292e;
    --icon-color: #56575a;
}

html[data-theme='dark'] .brand__logo {

    filter: invert(1);
    transition: ease-in-out 1s;
}

html[data-theme='light'] .brand__logo {

    filter: invert(0);
    transition: ease-in-out 1s;
}

/* html[data-theme="light"] #css, html[data-theme="light"] #html,
html[data-theme="light"] #js,
html[data-theme="light"] #python {
    filter: grayscale(0) invert(0)
} */

html[data-theme="light"] #html {
    filter: grayscale(1) brightness(1) contrast(1) invert(1);
}
html[data-theme="light"] #css {
    filter: grayscale(1) brightness(1) contrast(1) invert(1);
}

html[data-theme="light"] #js {
    filter:grayscale(50) brightness(1) contrast(1) invert(1);
}

html[data-theme="light"] #python {
    filter:grayscale(50) brightness(0) contrast(1) invert(0);
}

html[data-theme="light"] #csharp {
    filter:grayscale(50) brightness(1) contrast(.6) invert(1);
}

html[data-theme="light"] #qtdesign {
    filter:grayscale(50) brightness(1) contrast(1) invert(1);
}

html[data-theme="light"] #unity {
    filter:grayscale(50) brightness(0) contrast(1) invert(0);
}

html[data-theme="light"] #react {
    filter:grayscale(50) brightness(0) contrast(1) invert(0);
}

html[data-theme="light"] #next {
    filter: invert(0);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    vertical-align: baseline;
    list-style: none;
    scrollbar-width: thin;
    scrollbar-color: var(--secondary-bg-color) transparent;
}

body {

    background-color: var(--primary-bg-color);
    font-family: 'Inter', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--text-color);

}

a {
    text-decoration: none;
    color: var(--primary-color);

}

a:hover {
    color: var(--primary-color);
    font-weight: 600;
}

i {
    color: var(--icon-color);
}

b {

    font-weight: 400;
}

h1 {

    font-size: 2.5rem;
    font-weight: 200;

}

h2 {
    font-size: 2rem;
    text-align: center;
    margin-bottom: 1rem;

}

h1,
h2,
h3 {

    font-family: 'League Spartan', Tahoma, Geneva, Verdana, sans-serif;
    text-transform: uppercase;
    color: var(--primary-color);
    font-weight: 200;
}

h3{

    font-size: 1.55rem;
    text-align: left;
    color: var(--primary-color);
    
}

h4{

    color: var(--primary-color);
    margin-top: 1rem;
}

p {
    font-size: 1rem;
    text-align: justify;
}

.header {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem;
    z-index: 5000;
}

.header__toggle {
    display: flex;
    justify-content: flex-end;
}

.header__brand .brand__logo {

    width: 3.5rem;
    width: 3.5rem;
    flex-shrink: 0;


}

#toggleTheme {

    font-size: 1.5rem;
    color: var(--primary-color);
    cursor: pointer;
    transition: ease-in-out 1s;

}

.menu {
    display: flex;
    align-items: center;
    background: var(--primary-bg-color);
}

.menu__item {
    width: 100%;
}

.menu--mobile {
    width: 100vw;
    position: fixed;
    bottom: 0;
    justify-content: space-between;
    border-top: 1px solid var(--primary-border-color);
    z-index: 5000;
}

.menu--mobile .menu__link {

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    padding: 0.5rem 1rem;
}

.menu__link.active .menu__icon,
.menu__link.active .menu__text,
.menu__link:hover .menu__icon,
.menu__link:hover .menu__text {

    color: var(--primary-color);
    font-weight: 600;
}

.menu__icon,
.menu__text {

    color: var(--text-color);
}

.menu__icon {

    font-size: 1.5rem;
}

.menu__text {

    font-size: .75rem;
    text-transform: uppercase;
}

.menu--principal {

    gap: 1rem;
}

.menu--social {

    gap: 1rem;

}

.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .625rem;
    width: 100%;
    background: transparent;
    border-radius: 3.125rem;
    padding: 0.875rem 1.5rem;
    transition: ease-in-out .3s;
    cursor: pointer;
    border: none;
    color: var(--primary-color);

}

.btn:hover {

    transform: scale(1.05);
}

.btn span,
.btn i {

    font-size: 1.25rem;
    text-transform: uppercase;
    transition: ease-in-out .3s;
}

.btn--primary {

    border: 1px solid var(--primary-color);

}


.btn--primary span {

    color: var(--primary-color);
}

#container__endRepositorio {


    align-items: center;
    justify-content: center;

}

.final__repositorio {

    margin-top: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;

}

.header__nav {

    display: none;
}

main {

    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 2.5rem 1rem;

}

main,
.projects {

    padding: 2.5rem 1rem;
}

.main__content {

    display: flex;
    flex-direction: column;
    gap: 1.5rem;

}

.main__content2 iframe {

    width: 100%;
    aspect-ratio: 16/9;
}

.skills {

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 1.25rem;
    padding: 6.25rem 1rem 2rem 1rem;
    background: var(--secondary-bg-color);
    margin-top: -5.5rem;

}


.skills h2 {
    font-size: 2rem;
    text-transform: none;

}

.skills__list {

    display: flex;
    flex-flow: row wrap;
    gap: .5rem;
}

.skills__item {

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 4.8rem;
    height: 4.8rem;
    aspect-ratio: 1/1;
    border: 1px solid var(--secondary-border-color);
    border-radius: 50rem;

}

.projects {

    display: flex;
    flex-direction: column;
    padding: 2.5rem, 1rem;
}

.projects h2{

    margin-bottom: -1.5rem;
}

.projects__card{

    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-top: 4rem;

}

.about{

    padding: 2.5rem 1rem;
    gap: 1.5rem;
}

.about__content1 {

    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
    justify-content: center;
}

.card__cover {

    width: 100%;
    border-radius: 0.5rem;
    object-fit: cover;
    object-position: center;
    max-height: 400px;
}

.card__body {

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 1rem;
}

.card__title {

    font-size: 1.5rem;
}

.card__list {

    margin-left: 1rem;
    list-style: disc;
}

.card__list >* {
    list-style: initial;
    /* ou list-style: inherit; */
}

.card__item {

    list-style: disc;
    list-style-type: disc;
}

.card__description {

    font-size: 1rem;
    color: var(--primary-color);
}

.card__buttons, .description__buttons{

    display: flex;


}

.card__body .skills__item {

    width: 4rem;
    height: 4rem;
}

.card__body .skills__logo {

    height: 2rem;
}

footer {

    margin-bottom: 5rem;
    border-top: 1px solid;
    border-color: var(--primary-border-color);
}

footer p {

    font-size: .875rem;
    text-align: center;
    padding: 1rem;

}


#html {

    height: 2.4rem;
    width: 2.9rem; 
    filter: grayscale(1) brightness(.8) contrast(.5);
}
#css{

    height: 2.4rem;
    width: 2.0rem; 
    filter: grayscale(1) brightness(.8) contrast(.5); 
}
#js{

    height: 2.4rem;
    width: 2.4rem;  
    filter:grayscale(50) brightness(.6) contrast(.7);   
}
#python {

    height: 2.4rem;
    width: 2.4rem;
    filter:grayscale(50) brightness(.4) contrast(.0);    

}


#csharp{

    height: 2.5rem;
    width: 2.5rem;
    filter:grayscale(50) brightness(1) contrast(.4); 

}

#qtdesign{

    height: 2.4rem;
    width: 2.4rem;
    filter:grayscale(50) brightness(.7) contrast(1); 

}

#unity{

    height: 2.4rem;
    width: 2.4rem;
    filter:grayscale(50) brightness(.4) contrast(.0); 

}

#react{

    height: 2.4rem;
    width: 2.4rem;
    filter:grayscale(50) brightness(.8) contrast(1); 

}

#next{

    height: 2.4rem;
    width: 2.4rem;
    filter:invert(1) brightness(.5); 
    

}





.tooltip {
    position: absolute;
    background-color: #333;
    color: #fff;
    padding: 5px;
    border-radius: 5px;
    font-size: 14px;
    opacity: .5;
    z-index: 9999;
    /* Garante que a caixa de texto esteja acima de outros elementos */
}


.about__photo {

    width: 80vw;
    height: 80vw;
    border-radius: 0.5rem;
    object-fit: cover;
    object-position: center;
    border-radius: 200rem;
    align-items: center;
    justify-content: center;
    border-color: var(--border-color);
    border-width: 2px;
}

.about__icons {

    margin-top: 1.2rem;
    margin-bottom: 1.2rem;
}



.contact {

    border-top: 1px solid;
    border-color: var(--primary-border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 2.5rem 1rem;
    text-align: center;
    gap: 1.5rem;
}

.contact>p {
    text-align: center;
    font-size: 1.15rem;
}

.descricao__interna {

    font-size: 1rem;
}

.contac h2 {

    margin-bottom: 0;
}

.row1{

    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.row1 .about__icons{

    margin: 0;
}

.row2{

    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.row2 span{


    display: flex;
    flex-direction: column;
    text-align: justify;
    gap: 1rem;
}

.row2 h3{

    padding: 1.5rem 0 .5rem 0;
}

.col2 h3{

    padding: 1rem 0 1rem 0;
}

.about__list >* {
      
    list-style: initial;
    margin-left: 1rem;
    /* ou list-style: inherit; */
}

#accordion{

    border-radius: .5rem;
    border: 1px solid var(--primary-border-color);    

}

.accordion__header {
    width: 100%;
    padding: .75rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;    
    border: 1px solid var(--primary-border-color);
    border-radius: .5rem .5rem 0 0 ;
    background: transparent;
}

.accordion__header.start{

    border-radius: .25rem .25rem 0 0;
}

.accordion__header.end, .accordion__item.active .acordion__body.end{

    border-radius: 0 0 .25rem .25rem;
}

.accordion__item.active .accordion__header.end{ 

    border-radius: 0;
}

.accordion__header span{

    color: var(--primary-color);
    font-size: 1.15rem;
    text-align: left;
}

.accordion__body {

    display: none;
    padding: 1.25rem;
    flex-direction: column;
    align-items: flex-start;
    gap: .7rem;

}

.accordion__item.active .accordion__header{

    background: var(--secondary-bg-color);
}
.accordion__item.active .accordion__body{

    display: flex;
}

.accordion__item.active .bi-caret-down-fill{

transform: rotate(180deg);}

#finalButton{

    text-transform: lowercase;
}

@media (min-width: 768px) {
    .header {

        position: fixed;
        border-bottom: 1px solid;
        border-color: var(--primary-border-color);
        padding: 1rem 6rem;
        background: var(--primary-bg-color);


    }

    .nav--mobile {

        display: none;

    }

    .header__nav {

        display: flex;
    }


    .header__nav,
    .header__toggle {

        min-width: 30%;
    }

    h1 {
        font-size: 5rem;
    }

    h2 {
        font-size: 3rem;
        letter-spacing: 0.4rem;
        margin-bottom: 1rem;
    }

    main,
    .projects {

        padding: 8rem 6rem 4rem 6rem;
    }

    .main__content {

        display: flex;
        
        flex-direction: column;
        align-items: flex-start;
        gap: 2rem;
    }



    .skills {

        padding: 6.25rem 6rem 2rem 6rem;
        margin-top: -6rem;
    }

    footer {

        margin: 0;

    }

    .final__repositorio {

        margin-top: 2.5rem;
        width: 30vw;

    }

    .card__buttons,
    .description__buttons {

        display: flex;
        align-items: center;
        justify-content: center;


    }
    .about__content1{

        padding: 0rem 5rem 0rem 5rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .about__content2{

        padding: 0rem 5rem 4rem 5rem;

    }
    .about__photo {

        width: 60vw;
        height: 60vw;
        
    }

    .about__description {

        padding: 2.5rem 0rem;
        
    }

    #container__endRepositorio {

        display: flex;
        align-items: center;
        justify-content: center;

    }

    .contact p {

        width: 70vw;
    }
    .projects h2{

        margin-bottom: 1rem;
    }
}

@media (min-width: 1200px) {



    .about__content1, .about__content2{

        display: grid;
        grid-template-columns: 35% 60%;
        justify-content: flex-start;
        gap: 4rem;
    }




}

@media (min-width: 1200px) {

    main {

        padding: 12rem 6rem 2rem 6rem;
    }

    h2 {

        font-size: 4rem;
    }

    .main__content .btn {

        width: auto;
    }
    .main__content{
        padding: 0;
    }

    .skills {
        flex-direction: row;
        justify-content: space-between;

    }

    .skills h2 {

        font-size: 3rem;
        width: 60%;        
        text-align: start;
    }

    .skills__list {

        gap: 1rem;
    }

    .skills__item {

        width: 6rem;
        height: 6rem;


    }

    .skills__logo {

        height: 3rem;
    }

    .projects__card,
    .about__content1 {

        flex-direction: row;
        


    }

    .about__content1 {

        display: flex;
        align-items: center;
        justify-content: center;
    }

    .about__photo {

        width: 28vw;
        height: 28vw;
        
    }

    .card__cover {

        width: 50%;
    }

    .card__title {

        font-size: 3.25rem;
    }

    .card__description,
    .card__description {

        font-size: 1.25rem;
    }

    .card__buttons .btn {
        width: auto;
    }
    .projects__card{
        margin-top: 5rem;
    }
    .projects__card.card--reverse {

        flex-direction: row-reverse;
        justify-content: space-between;
    }

    .card__buttons,
    .description__buttons {

        display: flex;
        align-items: center;
        justify-content: start;


    }
    .about__content1{

        padding: 0rem 5rem 4rem 5rem;
    }

    .about__content2{

        padding: 0rem 5rem 4rem 5rem;
    }

    .projects{

        padding: 8rem 6rem 4rem 6rem;
    }
    .col2{

        margin-right: .6rem;
    }
}


@media (min-width: 1400px) {


    
    p {

        font-size: 1.15rem;
    }
    .contact > p{

        font-size: 1.15rem;
    }

    

    h1 {

        font-size: 6.25rem;
    }

    h2 {

        font-size: 5rem;
    }

    .header {

        padding: 1rem 15rem;

    }


    main {

        padding: 12rem 15rem 2rem;

    }
    .main__content{
        padding: 0;
    }

    .skills {

        padding: 10rem 15rem 4rem;
    }

    .skills h2{

        padding: 0;
        text-align: start;
        font-size: 3rem;
    }

    .about__photo {
        
        width: 22vw;
        height: 22vw;
        object-fit: cover;
        object-position: center;
        pointer-events: none;
        border-radius: 50rem;
        border: 1px solid var(--primary-border-color);




    }

    .card__buttons,
    .description__buttons {

        display: flex;


    }

    .about__content1{

        padding: 0rem 14rem 4rem 14rem;
    }

    .about__content2{

        padding: 0rem 14.5rem 4rem 14.5rem;
    }

    .projects{

        padding: 8rem 15rem 4rem 15rem;
    }

    .projects__card{
        margin-top: 5rem;
    }

    .contac{

        padding: 0rem 14.5rem 0rem 14.5rem;
    }

    

}