@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&family=Libertinus+Keyboard&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  border-bottom: 2px solid #ff6b35;
}
body {
  padding-top: 100px; 
  margin: 0;
  background-color: #0c0a09;
}

#cabecalho{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #0c0a09 ;
    border-bottom: 4px solid #FB9E3A;
}
#cabecalho h1{
    font-size: 1.4em;
    font-family: 'Fira Code', monospace;
    color: #FB9E3A;
    margin: 18px;
    transition: all 0.5s;
}
#cabecalho h1:hover{
    transform: scale(1.15);
}
#cabecalho b{
    color: #DFD0B8;
}
#cabecalho ul{
    list-style: none;
    display: flex;
    gap: 18px;
    margin-right: 88px;
}
#cabecalho a{
    display: inline-block;
    text-decoration: none;
    color: #DFD0B8;
    font-weight: bold;
    font-family: 'Fira Code', monospace;
    padding: 10px;
    transition: all 0.5s;
}
#cabecalho a:hover{
    color: #E6521F;
    transform: scale(1.05);
}
#inicio{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #0c0a09 ;
    border-bottom: 4px solid #FB9E3A;
    padding: 48px;
}
#inicio p{
    border: 4px solid #FB9E3A;
    border-radius: 12px;
    background-color: #E6521F;
    box-shadow: 0 0px 12px #E6521F;
    margin: 18px;
    font-family: 'Fira Code', monospace;
    color: #DFD0B8;
    transition: all 0.5s;
    text-align: center;
    font-weight: bold;
}
#inicio p:hover{
    transform: scale(1.05);
    box-shadow: 0px 0px 24px #E6521F;
}
#inicio span{
    font-size: 1.5rem;
    margin: 18px;
    font-family: 'Inter', sans-serif;
    font-weight: bold;
    color: #DFD0B8;
}
#inicio img{
    margin-top: 18px;
    margin-right: 48px;
    width: 350px;
    border-radius: 12px;
    box-shadow: 0 0px 12px #E6521F;
}
#inicio h4{
    font-size: 1.1em;
    margin: 18px;
    font-family: 'Inter', sans-serif;
    color: #927c59;
}
#btn-prod button{
    border: 1px solid #E6521F;
    border-radius: 12px;
    background-color: #E6521F;
    color:#DFD0B8;
    font-family: 'Fira Code', monospace;
    font-weight: bold;
    padding: 10px;
    transition: all 0.5s;
    margin: 12px;
}
#btn-git button{
    border: 1px solid #FCEF91;
    border-radius: 12px;
    background-color: #000000;
    color:#DFD0B8;
    font-family: 'Fira Code', monospace;
    font-weight: bold;
    margin-top: 10px;
    padding: 10px;
    transition: all 0.5s;
    margin: 12px;
}
#btn-git button:hover{
    transform: scale(1.05);
    box-shadow: 0px 0px 24px #FCEF91;
}
#btn-prod button:hover{
    transform: scale(1.05);
    box-shadow: 0px 0px 24px #E6521F;
}
#habilidades{
    background-color: #0c0a09;
    display: flex;
    justify-content: space-between;
    padding: 48px;
    border-bottom: 4px solid #FB9E3A;
}
#info-card{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    border: 4px solid #e6521f;
    border-radius: 12px;
    background-color: rgba(247, 102, 18, 0.583);
    transition: all 0.5s;

}
#info-card:hover{
    transform: scale(1.05);
    box-shadow: 0px 0px 24px #E6521F;
}
#info-card h3{
    font-size: 1.4rem;
    margin: 18px;
    font-family: 'Inter', sans-serif;
    border: 4px solid #000000;
    border-radius: 12px;
    background-color: #000000;
    box-shadow: 0 0px 12px #141313;
    color: #DFD0B8;
    
}
#info-card p{
    margin: 18px;
    font-family: 'Fira Code', monospace;
    color: #DFD0B8;
    font-weight: bold;
}
#experiencias{
    background-color: #0c0a09;
    display: flex;
    justify-content: space-between;
    padding: 48px;
    border-bottom: 4px solid #FB9E3A;
}
#experiencias h2{
    font-size: 1.4rem;
    margin: 18px;
    font-family: 'Inter', sans-serif;
    color: #DFD0B8;
}
#timeline{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
}
#timeline p{
    margin: 18px;
    font-family: 'Fira Code', monospace;
    color: #DFD0B8;
    font-weight: bold;
}
#projetos{
    background-color: #0c0a09;
    display: flex;
    justify-content: space-between;
    padding: 48px;
    border-bottom: 4px solid #FB9E3A;
}
#projetos-title{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
}
#projetos-title h2{
    font-size: 1.4rem;
    margin: 18px;
    font-family: 'Inter', sans-serif;
    color: #DFD0B8;
}
#projetos-card{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    border: 2px solid #e6521f;
    border-radius: 12px;
    background-color: rgba(247, 102, 18, 0.583);
    transition: all 0.5s;
}
#projetos-card:hover{
    transform: scale(1.05);
    box-shadow: 0px 0px 24px #E6521F;
}
#projetos-card h3{
    font-size: 1.4rem;
    margin: 18px;
    font-family: 'Inter', sans-serif;
    color: #DFD0B8;
    border: 1px solid #c84317;
    padding: 8px;
    border-radius: 12px;
    background-color: #c84317;
    transition: all 0.5s;
}
#projetos-card h3:hover{
    transform: scale(1.05);
    box-shadow: 0px 0px 24px #E6521F;
}
#projetos-card p{
    margin: 18px;
    font-family: 'Fira Code', monospace;
    color: #DFD0B8;
    font-weight: bold;
}
#projetos-card legend{
    margin: 18px;
    font-family: 'Fira Code', monospace;
    color: #DFD0B8;
    font-weight: bold;
    border-left: 2px solid #DFD0B8;
    padding-left: 18px;
}
#contatos{
    background-color: #0c0a09;
    display: flex;
    justify-content: space-between;
    padding: 18px;
    border-bottom: 4px solid #FB9E3A;
    color: #DFD0B8;
    font-family: 'Inter', sans-serif;
    padding: 38px;
}
#contatos-card{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    border: 2px solid #e6521f;
    border-radius: 12px;
    background-color: rgba(247, 102, 18, 0.583);
    transition: all 0.5s;
    transition: all 0.5s;
}
#contatos-card a{
    text-decoration: none;
    color: #DFD0B8;
    padding: 14px;
    font-weight: bold;

}
#contatos-card:hover{
    transform: scale(1.05);
    box-shadow: 0px 0px 24px #E6521F;
}