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

:root, :root[data-theme='dark'] {
    --primary-color: #F0F0F0;
    --color-gitfind-animation: linear-gradient(90deg, #fff, #8d2df4, #fff);
    --color-spider-animation: linear-gradient(90deg, #fff, #cd2a45, #fff);
    --color-spotify-animation: linear-gradient(90deg, #fff,#3ae175,#3ae175,#fff);
    --color-stranger-animation: linear-gradient(90deg,#fff,#d33333,#fff);
    --color-pokedex-animation: linear-gradient(90deg,#fff,#2A5FAF,#2A5FAF,#fff);
    --primary-bg-color: #111217;
    --secondary-bg-color: #28292E;
    --primary-border-color: #28292E;
      --secondary-border-color: #56575A;
  
    --title-color: #F0F0F0;
    --text-color: #9A9A9C;
    --link-color: #9A9A9C;
    --icon-color: #C7C8C9;
  }

:root[data-theme='light'] {
    --primary-color: #0B0B0F;
    --color-gitfind-animation: linear-gradient(90deg, #000000, #8d2df4, #000000);
    --color-spider-animation: linear-gradient(90deg, #000000,  #cd2a45, #000000);
    --color-spotify-animation: linear-gradient(90deg, #000000,#3ae175,#000000);
    --color-stranger-animation: linear-gradient(90deg,#000000,#d33333,#000000);
    --color-pokedex-animation: linear-gradient(90deg,#000000, #2A5FAF, #000000);
      --primary-bg-color: #E9E9E9;
      --secondary-bg-color: #C7C8C9;
      --primary-border-color: #C7C8C9;
      --secondary-border-color: #9A9A9C;
  
      --title-color: #0B0B0F;
      --text-color: #28292E;
      --link-color: #28292E;
      --icon-color: #56575A;
}

html{
    scroll-behavior: smooth;
}

html[data-theme='light'] .brand__logo {
    filter: invert(1);
}

html[data-theme='light'] .technologies__logo {
    filter: invert(80%);
}

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

footer{
    margin-bottom: 5rem;
}

footer p{
    font-size: .875rem;
    text-align: center;
    padding: 1rem;
}

footer a{
    color: var(--text-color);
}

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

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

.header__nav {
    display: none;
}

.header__brand .brand__logo{
    width: 3.25rem;
    height: 3.25rem;
}

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

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

h1{
    font-size: 2.4rem;
}

h2 {
    font-size: 2rem;
    text-align: center;
    letter-spacing: 0.4rem;
}

h3 {
    font-size: 1.55rem;
    text-align: left;
    font-weight: 300;
}

p, span, li {
    font-size: 1rem;
}

b{
    font-weight: 400;
}
    
.header__toggle{
    display: flex;
    justify-content: flex-end;
}

#toggleTheme{
    font-size: 1.5rem;
    color: var(--primary-color);
    cursor: pointer;
    transition: ease-in-out .4s;
}


.meu__item{
    width: 100%;
}

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

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

.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;
}

main {
    display: flex;
    flex-direction: column;
}

.main__content1{
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

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

.btn:hover{
    transform: scale(1.1);
}

.btn span, .btn i{
    font-size: 1.25rem;
    text-transform: uppercase;
}

.btn--primary{
    border: 1px solid var(--primary-color);
}

.btn--primary span{
    color: var(--primary-color);
}

.technologies{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 1.25rem;
    padding: 3rem 1rem 3rem;
    background: var(--secondary-bg-color);
}

.technologies h2{
    font-size: 2rem;
    text-transform: none;
    letter-spacing: normal;
    text-align: center;
}

.technologies__list {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: row wrap;
    gap: .5rem;
}

.technologies__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;
}

.technologies__logo {
    height: 2.4rem;
}

.projects {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.projects__container{
    display: flex;
    flex-direction: column;
    gap: 12rem;
}

.projects__card{
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.card__cover {
    width: 100%;
    border-radius: 0.5rem;
    object-fit: cover;
    object-position: top;
}

.card__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 1rem;
}

.card__body .technologies__item {
    width: 4rem;
    height: 4rem;
}

.card__description {
    color: var(--title-color);
}

.card__list, .about__list {
    margin-left: 1.25rem;
}

.card__item, .about__item {
    list-style: disc;
}

.card__body .technologies__list {
    gap: .75rem;
}

.card__body .technologies__logo {
    height: 2rem;
}

.card__buttons, .description__buttons {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}

.card__buttons .btn {
    padding: .65rem 1.25rem;
}

.projects .btn {
    width: auto;
    margin: auto;
}

.card__buttons .btn span {
    font-size: 1rem;
}

.btn--primary span {
    color: var(--primary-color);
}

.btn span, .btn i {
    font-size: 1.25rem;
    text-transform: uppercase;
}

.card__buttons .btn:nth-child(2){
    border: none;
}

.about {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

main, .projects, .about, .contact {
    padding: 2.5rem 1rem;
}

.about__content1, .about__content2 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 2rem;
}

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

.about__description{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 1.5rem;
}

/* Contact */

.contact{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    border-top: 1px solid var(--primary-border-color);
    border-bottom: 1px solid var(--primary-border-color);
}

.contact p {
    text-align: center;
}

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

.menu--social {
    gap: 1rem;
}

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


.contact .email{
    text-transform: none;
}

#text-gitfind{
    background: var(--color-gitfind-animation);
    background-size: 200% 100%;
    animation: degrade 5s ease-in-out infinite;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
#text-spiderman{
    background: var(--color-pokedex-animation);
    background-size: 200% 100%;
    animation: degrade 5s ease-in-out infinite;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#text-spotify{
    background: var(--color-spotify-animation);
    background-size: 200% 100%;
    animation: degrade 4s ease-in-out infinite;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#text-strangerthings{
    background: var(--color-stranger-animation);
    background-size: 200% 100%;
    animation: degrade 5s ease-in-out infinite;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#text-pokedex{
    background: var(--color-pokedex-animation);
    background-size: 200% 100%;
    animation: degrade 5s linear infinite;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

@keyframes degrade {
    0% {
        background-position-x: 0%;
    }
    
    100% {
        background-position-x: 200%;
    }
}

.autoShow{
    animation: autoShowAnimation both;
    animation-timeline: view(70% 5%);
}

@keyframes autoShowAnimation{
    from{
        opacity: 0;
        transform: translateY(200px) scale(0.3);
    }to{
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Sobre */

#curriculo{
    border: none;
}

.about__content2 .col1, .about__content2 .col2 {
    display: flex;
    flex-direction: column;
    text-align: justify;
    gap: 2rem;
}

.about__content2 .col1 .row1, .about__content2 .col1 .row2 {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

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

.about__icons {
    display: flex;
    align-items: center;
    gap: .85rem;
}

.about__icons i {
    font-size: 1.25rem;
}

.card__list, .about__list {
    margin-left: 1.25rem;
}

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


  
  .accordion__item.active .bi-caret-down-fill {
    transform: rotate(180deg);
 }

.accordion__header span {
    color: var(--title-color);
}

.accordion__header.start {
    border-radius: 0.25rem 0.25rem 0rem 0rem;
}

.accordion__header { 
    width: 100%;
    display: flex;
    padding: 0.75rem 1rem;
    justify-content: space-between;
    align-items: center;
    border: 1px solid var(--primary-border-color);
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: ease-in-out.3s;
}


.accordion__body {
    height: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.625rem;
    border: 1px solid var(--primary-border-color);
    opacity: 0;
    transition:  0.7s ease-in-out;
}

.accordion__item.active .accordion__body {
    height: auto;
    opacity: 1;
    padding: 1.25rem;
}