@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('variables.css'); /* As cores foram colocadas em um arquivo diferente de Css e agora estão sendo importadas */
@import url('header.css'); /*separando o código em partes*/

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'poppins', sans-serif;
}

#container{
    background-image: linear-gradient(rgba(0, 0, 0, 0.55)), url('../imgs/BannerPortfolio.jpeg');
    background-size: center;
    padding-top: 6%;
    background-attachment: fixed; /*faz com que a imagem de fundo fique fixa*/
}


a.btn{
    text-decoration: none;
}

.btn{
    padding: 5px 10px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: clamp(1rem, 2vw, 1.4rem);
    font-weight: 600;
    background-color: white;
    transition: background-color 0.3s ease;
    width: auto;
    display: inline flex;
    justify-content: center;
    gap: 5px;
    transition: all 0.4s ease;
}

.btn-default{
    background-color: var(--color-neutral-0);
    color: var(--color-secondary-1);

    &:hover {
        background-color: var(--color-secondary-1);
        color: white;
        transform: scale(1.05);
    }
}

.btn-outlined{
        background-color: var(--color-secondary-1);
        color: var(--color-neutral-0);

        &:hover{
            background-color: var(--color-neutral-0);
            color: var(--color-secondary-1);
            transform: scale(1.05);
        }
}

#home {
    display: flex;
    flex-direction: column;
    gap: clamp(12px,2vw, 32px);
    align-items: center;
    padding: 40px 4%;
    padding-top: clamp(0px, 2vw, 32px); /*faz com que o padding fique responsivo conforme o tamanho da tela*/
    color: var(--color-neutral-0);
    min-height: calc(100vh - 114px); /*100vh faz com que cubra toda a tela, mas devido a navbar fixa(81px), precisamos subtrair ela pro restante ser a div*/
    height: auto;
    .home-image{
        width: clamp(100px, 50%, 150px);
    }


    .home-title{
        color: var(--color-neutral-0);
        text-align: center;
        font-size: clamp(3rem, 2vw, 4.3rem);
        span{ color: var(--color-secondary-1);}
        
    }

    .home-description{
        text-align: justify;
        font-weight: 300;
        min-width: 50%;
        max-width: 80%;
        font-size: clamp(1rem,1.8vw,2.2rem);
    }

    .home-actions{
        display: flex;
        gap: 12px;
        margin-top: 10px;
        text-align: center;
        .iconbutton{
            width: 20px;
        }
    }


}

.title{
    color: var(--color-neutral-0);
    font-size: 2.5rem;
    text-transform: uppercase;
    font-weight: 700;
    position: relative;
    text-align: center;
&::before{
    content: "";
    width: 231px; /*Determina o tamanho do traço*/
    height: 4px;
    background-color: var(--color-secondary-1);
    position: absolute;
    bottom: 0;  /*Posiciona o traço em baixo do Título*/
    right: 115.5px; /*posicionando o traço exatamente no Meio do Title, que descobri que ficou com 462px*/
}
}

#projects{
 padding: 32px;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 40px; /*distancia entre o 'projetos realizados e os cards*/
 min-height: calc(100vh - 58px); /*100vh faz com que cubra toda a tela, mas devido a navbar fixa(81px), precisamos subtrair ela pro restante ser a div*/
 
 background-image: linear-gradient(rgba(0, 0, 0, 0)), url('../imgs/grid.png');
 background-color: var(--color-primary-1);
 
 .linguagens{ width: 100px;}

 .project-cards{
   
    display: flex;
    flex-direction: column;
    gap: 40px;

      .project-card{
        display: flex;
        flex-direction: column;
        height: 100%;
        max-height: 600px;
        width: 90%;
        max-width: 500px;
        padding: 20px;
        gap: 10px;
        align-items: flex-start; /*Deixa a imagem e as ligugagens usadas na esquerda*/
        background-color: var(--color-neutral-0);
        text-align: center;
        border-radius: 5px;
        border: 3px solid transparent;
        transition: ease 0.1s all;
        margin: 0 auto;
     
        &:hover{
        border: 3px solid var(--color-secondary-1);
        }
        h3, .project-buttons{ /*Deixa o título, os botões e a descrição centralizados*/
            margin-left: auto;
            margin-right: auto;
            text-align: center;
        }

        .project-description{
            text-align:justify;
            min-height: 156px;
            max-height: 156px;
            overflow-y: auto; /* barra de rolagem vertical quando o texto ultrapassar */
            overflow-x: hidden; /* evita scroll horizontal */
            border: 0.5px solid var(--color-neutral-5);
            padding: 8px;
            font-size: 15px;
        }
 

        .Linguagens-usadas {
          display: flex;
          gap: 10px;        /* espaçamento de 20px entre as imagens */
          align-items: center;
          flex-wrap: nowrap; /* força uma única linha */
          align-self: flex-start; /* alinhar as linguagens usadas na esquerda*/
          justify-content: flex-start; /*alinhar as linguagens usadas na esquerda(não centralizado)*/
        }

        .Linguagens-usadas img {
         display: block;
         height: 28px; /* ajuste a altura conforme necessário */
         min-height: 28px;
        }
        
        .project-buttons{
            padding-top: 10px; 
            display: flex;
            gap: 15px;
            align-items: center;
            .btn{
                font-size: 1rem;
                max-width: 160px;
                border: 2px solid var(--color-secondary-1);
            }
            .btn-outlined{
                border: 2px solid var(--color-secondary-1);
            }
            .iconbutton{
                width: 20px;
            }
        }

      }
  }
}

.project-card .print {
         display: block;
         width: 100%;
         height: 50%;
         max-width: 400px;
         max-height: 244px;
         height: auto;
         border: 2px solid var(--color-primary-1);
         border-radius: 5px;
         margin: 0 auto;
}  
          
/* -----Footer------*/
.footer{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: black;
  width: 100%;
  height: 12vh;
  
  .assinatura{
    display: flex;
    font-size: 18px;
    color: white;
    width: fit-content;
    height: fit-content;
  }
}

@media (min-width: 1024px){ /* monitor pequeno/tablet*/
    #projects .project-cards{
        align-items: center;
        justify-content: center;
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* Duas colunas de largura igual (1 fração cada) */
        /* grid-template-rows: repeat(2, 1fr); /* Duas linhas de altura igual (1 fração cada) */
        gap: 40px; /* Espaçamento entre os itens */
    }

}
@media (min-width: 1200px){ /*full HD*/
   #projects .project-cards{
        align-items: center;
        justify-content: center;
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* Duas colunas de largura igual (1 fração cada) */
        /* grid-template-rows: repeat(2, 1fr); /* Duas linhas de altura igual (1 fração cada) */
        gap: 40px; /* Espaçamento entre os itens */
   }
}