377 lines
12 KiB
CSS
377 lines
12 KiB
CSS
/* Estilo para a seção CorpoArtificial dentro do capítulo 2 */
|
|
.capitulo_2 .CorpoArtificial {
|
|
width: 100%;
|
|
/* Largura da seção CorpoArtificial, ocupando 89.6% da largura do seu contêiner */
|
|
height: 88vh;
|
|
/* Altura da seção CorpoArtificial, ocupando 88% da altura da janela de visualização */
|
|
padding-top: 2vw;
|
|
/* Espaçamento à direita de 5% da largura da janela */
|
|
background-color: #D9D9D9;
|
|
/* Cor de fundo branco */
|
|
display: flex;
|
|
/* Flexbox para o layout */
|
|
flex-direction: column;
|
|
/* Organiza os itens em uma coluna */
|
|
align-items: center;
|
|
/* Alinha os itens ao centro horizontalmente */
|
|
gap: 2vh;
|
|
/* Espaçamento de 2% da altura da janela entre os elementos */
|
|
}
|
|
|
|
/* Estilos gerais para os capítulos 1 e 2, alinhando seus elementos */
|
|
.Capitulo_1,
|
|
.Capitulo_2 {
|
|
width: 100%;
|
|
/* Ocupa toda a largura disponível */
|
|
display: flex;
|
|
/* Flexbox para layout */
|
|
justify-content: center;
|
|
/* Alinha os itens horizontalmente ao centro */
|
|
align-items: center;
|
|
/* Alinha os itens verticalmente ao centro */
|
|
gap: 2vw;
|
|
/* Espaçamento de 2% da largura da janela entre os elementos */
|
|
}
|
|
|
|
/* Estilo para a primeira linha no Capítulo 1 */
|
|
.Capitulo_1 .linha_1 {
|
|
width: 34.8vw;
|
|
/* Largura de 30% da largura da janela */
|
|
display: flex;
|
|
/* Flexbox para layout */
|
|
flex-direction: column;
|
|
/* Organiza os itens em coluna */
|
|
align-items: center;
|
|
/* Alinha os itens ao centro */
|
|
row-gap: 2vh;
|
|
/* Espaçamento de 2% da altura da janela entre os itens */
|
|
transition: 1s ease;
|
|
/* Transição suave de 1 segundo */
|
|
}
|
|
|
|
/* Estilo para o painel dentro da linha 1 no Capítulo 1 */
|
|
.Capitulo_1 .linha_1 .painel {
|
|
width: 34.8vw;
|
|
/* Largura de 30% da largura da janela */
|
|
display: flex;
|
|
/* Flexbox para layout */
|
|
flex-direction: column;
|
|
/* Organiza os itens em coluna */
|
|
align-items: center;
|
|
/* Alinha os itens ao centro */
|
|
transition: 1s ease;
|
|
/* Transição suave de 1 segundo */
|
|
}
|
|
|
|
/* Estilo para a seção Corpo dentro do painel da linha 1 no Capítulo 1 */
|
|
.Capitulo_1 .linha_1 .Corpo {
|
|
width: 34.8vw;
|
|
/* Largura de 30% da largura da janela */
|
|
height: 47vh;
|
|
/* Altura de 47% da altura da janela */
|
|
padding-top: 2vh;
|
|
/* Espaçamento superior de 2% da altura da janela */
|
|
background-color: var(--Matriz);
|
|
/* Cor de fundo usando uma variável CSS */
|
|
display: flex;
|
|
/* Flexbox para layout */
|
|
flex-direction: column;
|
|
/* Organiza os itens em coluna */
|
|
align-items: center;
|
|
/* Alinha os itens ao centro */
|
|
justify-content: start;
|
|
/* Alinha os itens ao topo */
|
|
align-content: start;
|
|
/* Alinha o conteúdo ao topo */
|
|
transition: 1s ease;
|
|
/* Transição suave de 1 segundo */
|
|
gap: 1vw;
|
|
/* Espaçamento entre os itens de 1% da largura da janela */
|
|
overflow-y: auto;
|
|
/* Habilita rolagem vertical caso o conteúdo ultrapasse a altura */
|
|
}
|
|
|
|
/* Estilo para o título (h2) dentro do Corpo no Capítulo 1 */
|
|
.Capitulo_1 .linha_1 .Corpo h2 {
|
|
color: var(--Cor_Segundaria_5_1);
|
|
/* Cor do título usando uma variável CSS */
|
|
font-family: var(--font_titulo);
|
|
/* Fonte para o título */
|
|
font-size: 1vw;
|
|
/* Tamanho de fonte de 1% da largura da janela */
|
|
font-size: 1vw;
|
|
/*define o tamanho da fonte*/
|
|
}
|
|
|
|
/* Estilo para a seção 'cap' dentro da linha 1 no Capítulo 1 */
|
|
.Capitulo_1 .linha_1 .cap {
|
|
width: 34.8vw;
|
|
/* Largura de 30% da largura da janela */
|
|
height: 5vh;
|
|
/* Altura de 5% da altura da janela */
|
|
background-color: var(--Cor_Segundaria_5_1);
|
|
/* Cor de fundo usando uma variável CSS */
|
|
font-family: var(--font_titulo);
|
|
/* Fonte usada no texto */
|
|
color: var(--Matriz);
|
|
/* Cor do texto usando uma variável CSS */
|
|
display: flex;
|
|
/* Flexbox para layout */
|
|
align-items: center;
|
|
/* Alinha os itens ao centro verticalmente */
|
|
justify-content: center;
|
|
/* Alinha os itens ao centro horizontalmente */
|
|
transition: 1s ease;
|
|
/* Transição suave de 1 segundo */
|
|
font-size: 1vw;
|
|
/*define o tamanho da fonte*/
|
|
}
|
|
|
|
/* Estilo para a segunda linha no Capítulo 1 */
|
|
.Capitulo_1 .linha_2 {
|
|
width: 20vw;
|
|
/* Largura de 20% da largura da janela */
|
|
display: flex;
|
|
/* Flexbox para layout */
|
|
flex-direction: column;
|
|
/* Organiza os itens em coluna */
|
|
align-items: center;
|
|
/* Alinha os itens ao centro */
|
|
row-gap: 2vh;
|
|
/* Espaçamento de 2% da altura da janela entre os itens */
|
|
transition: 1s ease;
|
|
/* Transição suave de 1 segundo */
|
|
}
|
|
|
|
/* Estilo para o painel dentro da linha 2 no Capítulo 1 */
|
|
.Capitulo_1 .linha_2 .painel {
|
|
width: 20vw;
|
|
/* Largura de 20% da largura da janela */
|
|
display: flex;
|
|
/* Flexbox para layout */
|
|
flex-direction: column;
|
|
/* Organiza os itens em coluna */
|
|
align-items: center;
|
|
/* Alinha os itens ao centro */
|
|
}
|
|
|
|
/* Estilo para a seção Corpo_1 dentro da linha 2 no Capítulo 1 */
|
|
.Capitulo_1 .linha_2 .Corpo_1 {
|
|
width: 20vw;
|
|
/* Largura de 20% da largura da janela */
|
|
height: 34vh;
|
|
/* Altura de 34% da altura da janela */
|
|
transition: 1s ease;
|
|
/* Transição suave de 1 segundo */
|
|
background-color: var(--Matriz);
|
|
/* Cor de fundo usando variável CSS */
|
|
font-family: var(--font_titulo);
|
|
/* Fonte usada no texto */
|
|
color: var(--Matriz);
|
|
/* Cor do texto usando variável CSS */
|
|
display: flex;
|
|
/* Flexbox para layout */
|
|
flex-direction: column;
|
|
/* Organiza os itens em coluna */
|
|
align-items: center;
|
|
/* Alinha os itens ao centro */
|
|
justify-content: center;
|
|
/* Alinha os itens ao centro */
|
|
overflow: hidden;
|
|
/* Impede o transbordamento de conteúdo */
|
|
font-size: 1vw;
|
|
/*define o tamanho da fonte*/
|
|
}
|
|
|
|
/* Estilo para o botão dentro da cap na linha 2 do Capítulo 1 */
|
|
.Capitulo_1 .linha_2 .cap button {
|
|
background: none;
|
|
/* Remove o fundo do botão */
|
|
border: none;
|
|
/* Remove a borda do botão */
|
|
outline: none;
|
|
/* Remove o contorno do botão */
|
|
font-family: var(--font_titulo);
|
|
/* Fonte usada no botão */
|
|
font-size: 1vw;
|
|
/* Tamanho da fonte de 1.7% da largura da janela */
|
|
color: var(--Matriz);
|
|
/* Cor do texto usando variável CSS */
|
|
}
|
|
|
|
/* Estilo para a seção Corpo_2 dentro da linha 2 no Capítulo 1 */
|
|
.Capitulo_1 .linha_2 .Corpo_2 {
|
|
width: 20vw;
|
|
/* Largura de 20% da largura da janela */
|
|
height: 8vh;
|
|
/* Altura de 8% da altura da janela */
|
|
transition: 1s ease;
|
|
/* Transição suave de 1 segundo */
|
|
background-color: var(--Matriz);
|
|
/* Cor de fundo usando variável CSS */
|
|
font-family: var(--font_titulo);
|
|
/* Fonte usada no texto */
|
|
color: var(--Cor_Segundaria_5_1);
|
|
/* Cor do texto usando variável CSS */
|
|
display: flex;
|
|
/* Flexbox para layout */
|
|
align-items: center;
|
|
/* Alinha os itens ao centro verticalmente */
|
|
justify-content: center;
|
|
/* Alinha os itens ao centro horizontalmente */
|
|
font-size: 1vw;
|
|
/*define o tamanho da fonte*/
|
|
}
|
|
|
|
/* Estilo para o botão dentro da cap na linha 2 do Capítulo 1 */
|
|
.Capitulo_1 .linha_2 .cap {
|
|
width: 20vw;
|
|
/* Largura de 20% da largura da janela */
|
|
height: 5vh;
|
|
/* Altura de 5% da altura da janela */
|
|
transition: 1s ease;
|
|
/* Transição suave de 1 segundo */
|
|
background-color: var(--Cor_Segundaria_5_1);
|
|
/* Cor de fundo usando variável CSS */
|
|
font-family: var(--font_titulo);
|
|
/* Fonte usada no botão */
|
|
color: var(--Matriz);
|
|
/* Cor do texto usando variável CSS */
|
|
display: flex;
|
|
/* Flexbox para layout */
|
|
align-items: center;
|
|
/* Alinha os itens ao centro verticalmente */
|
|
justify-content: center;
|
|
/* Alinha os itens ao centro horizontalmente */
|
|
overflow: hidden;
|
|
/* Impede o transbordamento de conteúdo */
|
|
font-size: 1vw;
|
|
/*define o tamanho da fonte*/
|
|
}
|
|
|
|
/* Estilos do painel no Capítulo 2 */
|
|
.Capitulo_2 .painel {
|
|
width: 97%;
|
|
/* Largura de 97% da largura do contêiner */
|
|
height: 40vh;
|
|
/* Altura de 40% da altura da janela */
|
|
}
|
|
|
|
/* Estilo da cap no Capítulo 2 */
|
|
.Capitulo_2 .cap {
|
|
width: 100%;
|
|
/* Ocupa toda a largura disponível */
|
|
height: 5vh;
|
|
/* Altura de 5% da altura da janela */
|
|
background-color: var(--Cor_Segundaria_5_1);
|
|
/* Cor de fundo usando variável CSS */
|
|
font-family: var(--font_titulo);
|
|
/* Fonte usada no título */
|
|
color: var(--Matriz);
|
|
/* Cor do texto usando variável CSS */
|
|
display: flex;
|
|
/* Flexbox para layout */
|
|
align-items: center;
|
|
/* Alinha os itens ao centro verticalmente */
|
|
justify-content: center;
|
|
/* Alinha os itens à direita */
|
|
font-size: 1vw;
|
|
/*define o tamanho da fonte*/
|
|
}
|
|
|
|
/* Estilo para a coluna 1 dentro da cap do Capítulo 2 */
|
|
.Capitulo_2 .cap .Coluna_1 {
|
|
width: 70%;
|
|
/* Largura de 70% da largura da cap */
|
|
height: 5vh;
|
|
/* Altura de 5% da altura da cap */
|
|
background-color: var(--Cor_Segundaria_5_1);
|
|
/* Cor de fundo usando variável CSS */
|
|
font-family: var(--font_titulo);
|
|
/* Fonte usada no texto */
|
|
color: var(--Matriz);
|
|
/* Cor do texto usando variável CSS */
|
|
display: flex;
|
|
/* Flexbox para layout */
|
|
align-items: center;
|
|
/* Alinha os itens ao centro verticalmente */
|
|
justify-content: center;
|
|
/* Alinha os itens à direita */
|
|
font-size: 1vw;
|
|
/*define o tamanho da fonte*/
|
|
}
|
|
|
|
/* Estilo para a coluna 2 dentro da cap do Capítulo 2 */
|
|
.Capitulo_2 .cap .Coluna_2 {
|
|
width: 30%;
|
|
/* Largura de 30% da largura da cap */
|
|
height: 4vh;
|
|
/* Altura de 4% da altura da cap */
|
|
padding-right: 4vw;
|
|
/* Espaçamento à direita de 4% da largura da janela */
|
|
font-family: var(--font_titulo);
|
|
/* Fonte usada no texto */
|
|
color: var(--Matriz);
|
|
/* Cor do texto usando variável CSS */
|
|
display: flex;
|
|
/* Flexbox para layout */
|
|
align-items: center;
|
|
/* Alinha os itens ao centro verticalmente */
|
|
justify-content: right;
|
|
/* Alinha os itens à direita */
|
|
padding-left: 10vw;
|
|
/* Espaçamento à esquerda de 10% da largura da janela */
|
|
font-size: 1vw;
|
|
/*define o tamanho da fonte*/
|
|
}
|
|
|
|
/* Estilo para o botão dentro da coluna 2 no Capítulo 2 */
|
|
.Capitulo_2 .cap .Coluna_2 button {
|
|
color: #D9D9D9;
|
|
/* Cor do texto do botão */
|
|
background-color: var(--Cor_Segundaria_5_1);
|
|
/* Cor de fundo do botão */
|
|
border-radius: 12vh;
|
|
/* Borda arredondada */
|
|
font-family: var(--font_titulo);
|
|
/* Fonte usada no botão */
|
|
border: 0.1vw solid var(--Matriz);
|
|
/* Borda fina e branca */
|
|
transition: 1s ease;
|
|
/* Transição suave de 1 segundo */
|
|
font-size: 1vw;
|
|
/*define o tamanho da fonte*/
|
|
}
|
|
|
|
/* Efeito de hover no botão da coluna 2 do Capítulo 2 */
|
|
.Capitulo_2 .cap .Coluna_2 button:hover {
|
|
color: var(--Cor_Segundaria_5_1);
|
|
/* Muda a cor do texto */
|
|
background-color: #D9D9D9;
|
|
/* Muda a cor de fundo */
|
|
transition: 1s ease;
|
|
/* Transição suave de 1 segundo */
|
|
}
|
|
|
|
/* Estilo do Corpo no Capítulo 2 */
|
|
.Capitulo_2 .Corpo {
|
|
width: 100%;
|
|
/* Ocupa toda a largura disponível */
|
|
height: 25vh;
|
|
/* Altura de 25% da altura da janela */
|
|
background-color: var(--Matriz);
|
|
/* Cor de fundo usando variável CSS */
|
|
font-family: var(--font_titulo);
|
|
/* Fonte usada no texto */
|
|
color: var(--Cor_Segundaria_5_1);
|
|
/* Cor do texto usando variável CSS */
|
|
display: flex;
|
|
/* Flexbox para layout */
|
|
align-items: center;
|
|
/* Alinha os itens ao centro verticalmente */
|
|
justify-content: center;
|
|
/* Alinha os itens ao centro horizontalmente */
|
|
/* Tamanho da fonte de 2.2% da largura da janela */
|
|
font-size: 1vw;
|
|
/*define o tamanho da fonte*/
|
|
} |