.playfair-display {
  font-family: "Playfair Display", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

.montserrat {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

/* mainTI(Trabalhe-Investidores): flexbox apenas para colocar a div e a section lado a lado e definir os tamanhos, cores e font dos h2, p e li */
main#TI {
    background: linear-gradient(rgba(128, 128, 128, 0.6), rgba(128, 128, 128, 0.6)),url(src/imagens/fundo\ do\ form.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
    background-attachment: fixed;
    display: flex;
    flex-direction: row;
    padding: 30px;
    gap: 30px;
    max-width: 100%;
}

main#TI h2 {
    font-size: 2.75rem;
    color: #7A1628;
    white-space: nowrap;
    font-family: "Playfair Display", serif;
}

main#TI p {
    font-size: 1.300rem;
    color: #F5F5DC;
    font-family: "Montserrat", sans-serif;
}

/*div-junta: objetivo principal deixar no estilo caixa vertical, definir cor, espaçamentos e deixar a borda arredondadas*/

div#abaixo3 {
    display: flex;
    flex-direction: column;
}
div#junta2 {
    display: flex;
    flex-direction: column; 
    flex-wrap: nowrap;
    padding: 20px;
    background-color: #5b7044;
    border-radius: 20px;
    height: 100%;
}
/*section.st: alinhar textos no meio, definir cor do LI,  tamanho da fonte e espaçamentos,*/
section.ST {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 10px;
    gap: 20px;
}

section.ST ul {
    margin-left: 30px;
}

section.ST li {
    color: #F5F5DC;
    font-size: 1.100rem;
    padding: 5px;
}

span.emoji {
    font-size: 48px;
    margin-bottom: -20px;
}

/*section-musica: Um card com estilo glassmorphism e bordas arredondadas, desenvolvido com o objetivo de integrar a reprodução de uma música ao layout.*/

section#musica {
    padding: 20px;
    border: 2px solid rgba(197, 160, 89, 0.3);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
    margin-top: 10px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;

}
section#musica h2 {
     color: #C5A059;
     font-size: 2.2rem;
     font-weight: 700px;
    font-family: "Playfair Display", serif;
}

section#musica p {
    color: #F5F5DC;
    font-size: 1rem;
    font-family: "Montserrat", sans-serif;
}

section#musica iframe {
    border: none;
}
section#musica p#musica-status {
    color: #D3C4B1;
    font-size: 0.875rem;
    font-style: italic;
    font-family: 'Montserrat', sans-serif;
}
section#musica strong {
    color:#C5A059;
    font-size: 0.875rem;
    font-style: normal
}

/*Section-formulário: Dois cards de formulário com estilo glassmorphism e bordas arredondadas, posicionados um embaixo do outro.*/

div#um-embaixo-do-outro {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

div#um-embaixo-do-outro h2 {
    color: #C5A059;
    font-size: 1.8rem;
    margin-top: 20px;
    text-align: center;
    font-family: "Playfair Display", serif;
}

div#um-embaixo-do-outro h3 {
    color: #E6D5B8;
    font-size: 1.3rem;
    margin-top: 20px;
    margin-left: 10px;
    font-family: 'Montserrat', sans-serif;
}

div#um-embaixo-do-outro p {
    color: #D3C4B1;
    font-size: 0.95rem;
    line-height: 1.4;
    margin-top: 10px;
    margin-left: 10px;
    font-family: 'Montserrat', sans-serif;
}

section.formulario {
    padding: 20px;
    border: 2px solid #C5A059;
    background-color: rgba(62, 39, 31, 0.85);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
    border-radius: 20px;
}

label#SEPARACAO span{
    margin-left: 30px;
    margin-right: 5px;
}

form label{
    color: #F5F5DC;
    font-size: 1.1rem;
}

form label#separa {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-right: 20px;
}

form label.igualar {
    display: flex;
    align-items: center;
    white-space: nowrap;
    gap: 5px;
}

form input#PEM {
    gap: 50px;
}


form button {
    background-color: #7A1628;
      border: 1px solid  #c59f599b;
      border-radius: 10px;
    font-size: 1.1rem;
    color: #F5F5DC;
}

form input {
    background-color: rgba(255, 255, 255, 0.1);
    color: #F5F5DC;
    font-size: 0.9rem;
    border: 1px solid #c59f599b;
    border-radius: 6px;
     white-space: nowrap;
}

form option {
    color: black;
    background-color: rgba(255, 255, 255, 0.1);
}

form input::placeholder {
    color: gainsboro;
}

form select {
    background-color: rgba(255, 255, 255, 0.1);
     border: 1px solid #c59f599b;
    color: #F5F5DC;
    font-size: 0.9rem;
     border-radius: 6px;
      white-space: nowrap;
}

form.form {
    display: flex;
    flex-direction: column;
    align-items: initial;
    justify-content: center;
    gap: 20px;
    padding: 10px;
    margin-top: 10px;

}

form textarea {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid  #c59f599b;
    color: #F5F5DC;
    font-size: 0.9rem;
    border-radius: 6px;
    resize: none;
    width: 300px;
    height: 80px;
    padding: 8px;
}