@import url('https://fonts.googleapis.com/css2?family=Playfair+Display&family=Smooch+Sans&family=Jura&display=swap');
 
@import url('https://fonts.googleapis.com/css2?family=BBH+Sans+Bogle&family=Nosifer&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Rubik+Moonrocks&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Yellowtail&display=swap');


:root {
    --laranja:#FF6B00;
    --preto-carvao:#1C1C1C;
    --cinza-escuro:#2A2A2A;
    --cinza-esverdiado:#3D403A;
    --cinza-medio:#4A4A4A;
    --cinza-claro:#5A5A5A;
    --cinza-quase-branco:#EDEDED;
    --cinza-claro:#BDBDBD;
    --cinza-neutro:#9E9E9E;
}

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

/* ===== Scrollbar moderna e tecnológica ===== */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: linear-gradient(180deg, #1C1C1C, #2A2A2A);
  border-radius: 10px;
  box-shadow: inset 0 0 5px #000;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #FF6B00, #ff8533);
  border-radius: 10px;
  box-shadow: 0 0 10px #FF6B00, 0 0 20px #FF6B00;
  transition: all 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #ff8533, #ff9f4d);
  box-shadow: 0 0 15px #ff8533, 0 0 30px #ff8533;
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #FF6B00 #1C1C1C;
}



 /* font-family: "BBH Sans Bogle", sans-serif;*/
 


body{
    width: 100vw;
    background-color: black;
    color: var(--cinza-quase-branco);
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow-x: hidden;
}

header {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    height: 100vh;
    margin-bottom: 40px;
    
}

header #imag-header {
    width: 100px;
    height: 100px;
    background-color: var(--cinza-quase-branco);
    border-radius: 50%;
    border: 3px solid var(--laranja);
    margin-top: 20px;
    margin-bottom: 10px;
}

#imag-header img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: contain;
}

#text-header {
    width: 100%;
    text-align: center
}

header h1 {
    font-family: 'Rubik Moonrocks', cursive;
    font-size: 1.3em;
}

header h2 {
    font-family: 'Yellowtail', cursive;
    font-size: 1.5em;
    margin-left: 20px;
     width: 28ch; /* comprimento do texto */
     white-space: nowrap; /* não quebra linha */
     overflow: hidden; /* esconde o que ainda não apareceu */
     border-right: 2px solid orange; /* cursor piscando */
    animation: escrevendo 3s steps(28), escrevendo2 0.5s step-end infinite alternate;
}
#icones-header {
    width: 100%;
    height: 80px;
    margin-top: 10px;
    margin-bottom: 50px;

}

#icones-header img {
    width: 40px;
    height: 40px;
    margin: 20px 15px;
    filter: invert(100%);
    opacity: 0.1;
    cursor: pointer;
}

#icones-header img:hover {
    filter: invert(39%) sepia(98%) saturate(749%) hue-rotate(358deg) brightness(103%) contrast(101%);
    opacity: 1;
    transition: 0.8s;
    width: 2.7em;
}

main {
    width: 90%;
    height: auto;
}

 #links-uteis {
    width: 100%;
    height: auto;
    display: grid;
    gap: 30px;
    margin-bottom: 40%;
}

#links-uteis a {
    text-decoration: none;
    color: var(--cinza-quase-branco);
    font-family: "BBH Sans Bogle", sans-serif;
    border-radius: 5px;
      cursor: pointer;
}

#links-uteis a:hover {
    color: var(--laranja);
    transition: 0.3s;
}

footer {
    position: fixed;
    bottom: 0;  
    width: 100%;
    background-color: black;
    height: 30px;
    font-size: 1.3em;
}


/*-------------------Animaçoes---------------*/

@keyframes escrevendo {
  from { width: 0; }
  to { width: 28ch; }
  from {margin-left: 200px;}
}

@keyframes escrevendo2 {
  50% { border-color: transparent; }
}

/*-------------------Sobre mim----------------*/

#sobre-mim{
    width: 100%;
    height: 100vh;
    text-align: center;
    align-items: center;
    margin-bottom: 10px;
}

#sobre-mim p{
    font-family: 'Jura', sans-serif;
    font-size: 1em;
    margin-top: 5px;
    text-align: justify;
    text-justify: inter-word;
}

#sobre-mim h3{
    font-family: 'Playfair Display', serif;
    font-size: 1.5em;
    padding-bottom: 5px;
  
}

.text-laranja{
    color: var(--laranja);
}

/*---------------Soft Skills--------------------*/
.nomes {
  margin-bottom: 30px;
}

#soft-skills {
    width: 100%;
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* 2 colunas */
    grid-template-rows: repeat(9, 0.090fr);    /* 3 linhas */
    gap: 0px; /* espaço entre os itens */
    place-items: center; /* centraliza os itens */
}


#minha-skill {
  position: relative; /* precisa disso pra posicionar o card dentro */
  display: inline-block;
  width: 80%;
  height: 50px;
  border: 1px solid var(--laranja);
  border-radius: 12px;
  cursor: pointer;
  color: #FF6B00;
  font-weight: bold;
  font-size: .6em;
  padding-top: 10px;
}

/* Card inicialmente escondido */
#card-skill {
  width: 90vw;
  height: 80px;
  background-color: var(--cinza-escuro);
  border: 1px solid var(--laranja);
  padding-top: 10px;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  border-radius: 12px;
  transition: all 0.4s ease; /* transição suave */
}

#minha-skill:hover #card-skill {
  opacity: 1;
  visibility: visible;
  top: -8px;
  left: -40px;
}


/*------------------------Hard Skills---------------------------------*/

#hard-skills {
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 colunas */
    gap: 20px; /* espaço entre os itens */
    place-items: center; /* centraliza os itens */
}

#habilidades {
    width: 150px;
    height: 150px;
    margin-bottom: 50px;
    border-radius: 12px;
    cursor: pointer;
}

#habilidades img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    filter: invert(100%);
    opacity: 0.7;
    margin-top: 30px;
}

#habilidades img:hover {
    filter: invert(39%) sepia(98%) saturate(749%) hue-rotate(358deg) brightness(103%) contrast(101%);
    opacity: 1;
    transition: 0.8s;
  
}

/*------------------------O que posso fazer---------------------------------*/

#oquepossofazer {
    width: 80%;
    height: auto;
   margin-bottom: 100px;
   display: flex;
   flex-direction: column;
    align-items: center;
    margin: auto;
    margin-bottom: 100px;
}

#cards-oque {
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* 3 colunas */
    grid-template-rows: repeat(3, 1fr);    
    gap: 20px;
    place-items: center; 
}

#oquepossofazer .card-oque {
    width: 360px;
    height: 150px;
    background-color: var(--cinza-escuro);
    border-radius: 12px;
    border: 1px solid var(--laranja);
    padding: 10px;
    text-align: center;
}

#oquepossofazer h1 {
    font-size: 1em;
    margin-top: 30px;
}
#oquepossofazer p {
    font-size: .7em;
    margin-top: 10px;
}

/*-------------------Meus Projetos----------------*/

#meus-projetos {
    width: 80%;
    height: auto;
   display: flex;
   flex-flow: column nowrap;
    align-items: center;
    margin: auto;
}


#cards-projetos {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
}

#meus-projetos .card-projeto {
    width: 90vw;
    height: 750px;
    background-color: var(--cinza-escuro);
    border-radius: 12px;
    text-align: center;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    margin: 10px;
    border: 1px solid var(--laranja);
}
.card-projeto h2 {
    width: 80%;
    font-size: 1.3em;
    margin-top: 20px;
}
.card-projeto p {
    font-size: 1em;
}

.cel-pc {
    width: 100vw;
    height: 500px;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
}

.cel-pc img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.celular {
    width: 150px;
    height: 340px;
    border: 10px solid var(--laranja);
    border-radius: 12px;
}

.pc {
    width: 340px;
    height: 260px;
    border: 10px solid var(--laranja);
    border-radius: 12px;
    margin-top: 10px;
}

.botao-projeto button{
    width: 230px;
    height: 40px;
    background-color: var(--preto-carvao);
    color: var(--laranja);
    border-radius: 5px;
    font-size: 1.3em;
    font-family: 'Yellowtail', cursive;
    margin: 60px 10px;
    border: 1px solid var(--laranja);
}

.botao-projeto button:hover{
    transition: all .5s ease;
    background-color: var(--laranja);
    color: var(--cinza-escuro);
    border: 2px solid var(--cinza-quase-branco);
}

/*-------------------Contatos----------------*/

#contatos {
    width: 100%;
    height: 400px;
    margin-top: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#contato{
    width: 100vw;
    height: 300px;
    margin-top: 20px;
    border: 1px solid var(--laranja);
    border-radius: 12px;
}

#contato a img{
    width: 100px;
    height: 100px;
    margin: 20px 10px;
    filter: invert(100%);
    opacity: 0.7;
    cursor: pointer;
}

#contato a img:hover {
    filter: invert(39%) sepia(98%) saturate(749%) hue-rotate(358deg) brightness(103%) contrast(101%);
    opacity: 1;
    transition: 0.8s;
    width: 105px;
}