/* Tag mencionada "*" responsavel vitalmente em manter o painel centralizado dentro da pagina, com todos os seus elementos de forma responsiva.*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Classe "fundo" responsavel pelo proprio fundo da página, utilizando algumas tags para o desenvolver desse padrão.
Tendo alguns edições aplicadas:
-background-img: Essa declaração é para a inxersão de uma imagem no fundo, uitlizando "./" para navegacão dos arquivos.
-background-size: cover; Essa declaração é para atribuir um fundo, de uma forma de preenchimento.
*/

.fundo {


    background-image: url('./Acessts_CC/Prancheta\ 5.jpg');
    background-size: Cover;

}



/* Classe "centralizar" desenvolvida com um unico intuito de manter todos os elementos da propria página centralizados.
Tendo alguns edições aplicadas:

-Display: flex; Essa declaração responsavel pelo alinhamento do painel ser auto ajustavel,
-Justify-content: center, align-items:center e min-height:100vh; Essas declarações são focadas para deixar o painel ailnhado tanto verticalmente, quanto horizontalmente e com uma distancia do topo da página, tendo suas funcões explicadas respectivamente.
*/

.centralizar {

    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;

}

/* Font-face sendo uma tag para trazer uma fonte externa para dentro da propria linha de código.

-font-family a definição do nome dessa nova fonte.
-src com url sendo a extração da própria fonte para dentro da linha de código, utilizando "./" para iniciar a navegação da pasta.
*/

@font-face {
    font-family: fontealpha;
    src: url(./Acessts_CC/zekton\ rg.otf);
}


/*Classe "bloco" desenvolvida com um unico intuito, de organizar todos os elementos do formulario input, dentro de um painel central criada pela propria classe, em outras palavras ela seria o proprio corpo do painel log.
Tendo alguns edições aplicadas:


-Box-shadow: Essa declaração é responsavel por aplicar sombras em torno de todo o painel, sendo o seu primeiro 0 a direção da sombra como esqueda ou direita, seu segundo 0 sendo outro direcionamento da sombra para cima ou para baixo, enquanto o 10 representa a intensidade dessa sombra.
-Padding: Essa declaração atribui um preenchimento interno no elemento usado tendo sua forma resumida, focada declarar o 30px no seu top e Bottom "Cima e baixo" e 45px no seu left, right (Esquerda e direita).
-border-radius: Essa declaração atribuida para, a definição do aredondamento das pontas da propria borda do elemeneto.
-Width e heigth: Essas declarações são as suas medidas de largura e altura respectivamente.
-border: Essa declaração é usada para originar uma borda no elemento aplicando sua espessura 3px, depois a definindo em padrão solido “Solid” e por ultimo definindo sua cor atraves do rgb (255, 255, 255)= White.
 -background-color: Essa declaração foi usada para definir a cor do fundo do painel no caso definindo sua cor atraves do rgb(255, 255, 255)=White.
*/

.Bloco {

    box-shadow: 0 0 10px black;
    padding: 30px 45px;
    border-radius: 20px;
    width: 750px;
    height: 600px;
    border: 3px solid rgb(255, 255, 255);
    background-color: rgb(255, 255, 255);


}

/*Classe "logo" responsavel pelo alinhamento da imangem com logo da empresa na parte superior do painel log.
Tendo alguns edições aplicadas:

-text-align: center;, align-items:center; Essas declarações são focadas para deixar o elemento alinhado tanto verticalmente, quanto horizontalmente no centro.
*/

.logo {

    align-items: center;
    text-align: center;

}

/*Classe "Login_central"" focada principalmente na organização e edição da palavra login, entre a logo e os campos imputs.
Tendo alguns edições aplicadas:

-text-align: center;, align-items:center; Essa declarações são focadas para deixar o elemento alinhado tanto verticalmente, quanto horizontalmente no centro. 
-Color: Essa declaração foi usada para aplicação de um color para diretamente na fonte.
-font-family:fontealpha, Essas declaração altera a tipografia da fonte, para propria que foi trazida para a linha de código, sendo ela a fontealpha.
-font-size: Essa declaração é para aumentar o tamanho da fonte.
 -Padding: Essa declaração atribui um preenchimento interno no próprio elemento, tendo sua aplicação de forma resumida com esse padrão top "Cima", left"Esquerda", bottom "baixo", rigth "Direita".
.*/

.login_central {


    align-items: center;
    text-align: center;
    color: rgb(0, 0, 0);
    font-family: fontealpha;
    font-size: 20px;
    padding: 5px 0px 10px 0px;

}

/*Classe "Login" desenvolvida com o objetivos de alinhar todos os elementos relacionados com o campo email.

Tendo alguns edições aplicadas:

-Align-items: center; Essas declaração alinha todo o grupo, no centro do painel.
-Width: 100%; Essa declaração corresponde a largura de um elemento, a defini com 100% pegando a referencia do largura maxima do painel não da página, levando ela automatica sempre se adapitar com o tamanho do painel.
*/

.Login {

    align-items: center;
    width: 100%;

}

/*Classe "login_label"" focada na organização e edição do conteudo label, antes do proprio input de email.
Tendo alguns edições aplicadas:

-Display:inline-block, Essa declaração aplica uma organização do elemento em blocos, que ficam na mesma linha, ou seja um do lado do outro, mais aplicando br na linha de código do html, o elemento fica um em cima do outro.
-Margin: 5px 5px 0px 0px; Essa declaração sendo para o expasamento externo do elemento diante aos outros que estão no painel, sendo em ordem respectiva top "Cima", left"Esquerda", bottom "baixo", rigth "Direita".
-font-family:fontealpha, Essa declaração altera a tipografia da fonte, para propria que foi trazida para a linha de código, sendo ela a fontealpha.
-font-size: Essa declaração é para aumentar o tamanho da fonte.
 -Padding: Essa declaração atribui um preenchimento interno no próprio elemento, tendo sua aplicação de forma resumida com esse padrão top "Cima", left"Esquerda", bottom "baixo", rigth "Direita".
*/


.Login_label {

    display: inline-block;
    margin: 5px 5px 0px 0px;
    font-size: 20px;
    font-family: fontealpha;
    padding: 10px 10px 10px 0px;
    color: rgb(0, 0, 0);

}


/*Classe "login_input" focada na organização e edição do conteudo input do email.
Tendo alguns edições aplicadas:

-width e heigth: Essa declaração são paras medidas, de largura e altura respectivamente, sendo que a largura foi aplicada um 100% da largura maxima da classe Login, para se adapitar naturalmente com classe e próprio painel.
-font-size: Essa declaração é para aumentar o tamanho da fonte.
 -padding: Essa declaração atribui um preenchimento interno no próprio elemento, tendo sua aplicação de forma resumida com esse padrão top "Cima", left"Esquerda", bottom "baixo", rigth "Direita".
-color: Essa declaração foi usada para aplicação de um color, diretamente na fonte que é revalada durante o preenchimento do campo.
-margin: 0px 0; Essa declaração está sendo para o expasamento externa do elemento diante aos outros que estão no painel, no entanto só foram declaradas o 0px no seu top e Bottom "Cima e baixo" e 0 no seu left right.
-border: none; Essa declaração é uma utilizacão da tag para retirar o elemento definido, ou seja a propria borda do input, que vem de forma padronizada pelor proprio formulario.
-outline: none; Essa declaração é uma utilizacão da tag para retirar o elemento definido, ou seja a propria linha do campo input, que vem de forma padronizada pelor proprio formulario.
-border-radius: Essa Tag atribuida para, a definição do aredondamento das pontas da propria borda do elemeneto.
-border: Essa declaração é usada para originar uma borda no elemento aplicando sua espessura 3px, depois a definindo em padrão solido “Solid” e por ultimo definindo sua cor atraves do rgb (255, 255, 255)= White.

*/


.Login_input {

    width: 100%;
    height: 50px;
    padding: 20px 10px 20px 20px;
    font-size: 16px;
    color: black;
    margin: 0px 0;
    border: none;
    outline: none;
    border: 3px solid rgb(0, 0, 0);
    border-radius: 10px;

}

/*
Edição focada usando a classe "Login_input" focando na tag "input", todas as edições dentro dessa abertura de classe serão focadas somente no campo input e nenhum outro elemento.
Tendo alguns edições aplicadas:

-Width:100%; height:100%; Essa declaração é a largura e altura com a extensão maximas focadas no campo input sobre a extensão  de sua propria classe, sendo mais uma garantia para a adaptação do campo input.
-Background: transparent; Essa declaração é usada para retirar um fundo do elemento, no caso retirando o fundo do campo input.

*/

.Login_input input {

    width: 100%;
    height: 100%;
    background: transparent;

}

/*"Login_input":hover defini somente uma interação do campo input com a mouse, onde ao passar do mouse sobre o elemento ele realizara uma ação.
-Definida aqui como a mudaça de cor do próprio border
*/

.Login_input:hover {

    border: 4px solid rgb(30, 121, 132);

}

/*Edição usando a classe "Login" focando na tag "input" sendo ainda mais especifico no atributo placeholder.
Tendo alguns edições aplicadas:

-Color: Essa declaração foi usada para aplicação de um color para diretamente na fonte, presetando antes do preenchimento dentro do campo input.
-font-family:fontealpha, Essa declaração altera a tipografia da fonte, para propria que foi trazida para a linha de código, sendo ela a fontealpha, presetanda antes do preenchimento do campo input, dentro do próprio.
-font-size: Essa declaração é para aumentar o tamanho da fonte, presetanda antes do preenchimento do campo input, dentro do próprio.
 */

.Login input::placeholder {

    color: rgb(0, 0, 0);
    font-family: fontealpha;
    font-size: 15px;

}

/*Classe "Senha" desenvolvida com um objetivos para o alinhamento dos os elementos de campo relacionados com a senha.
Tendo alguns edições aplicadas:


-Align-items: center; Essa declaração alinha todo o grupo, no centro do painel.
-Width: 100%; Essa declaração corresponde a largura de um elemento, a defini com 100% pegando a referencia do largura maxima do painel não da página, levando ela automatica sempre se adapitar com o tamanho do painel.
*/


.Senha {

    align-items: center;
    width: 100%;
}


/*Classe "Senha_label"" focada na organização e edição do conteudo label antes do proprio input de Password.
Tendo alguns edições aplicadas:

-Display:inline-block, Essa declaração aplica uma organização do elemento em blocos, que ficam na mesma linha, ou seja um do lado do outro, mais aplicando br na linha de código do html, o elemento fica um em cima do outro.
-Margin: 5px 5px 0px 0px; Essa declaração sendo para o expasamento externo do elemento diante aos outros que estão no painel, sendo em ordem respectiva top "Cima", left"Esquerda", bottom "baixo", rigth "Direita".
-font-family:fontealpha, Essa declaração altera a tipografia da fonte, para propria que foi trazida para a linha de código, sendo ela a fontealpha.
-font-size: Essa declaração é para aumentar o tamanho da fonte.
 -Padding: Essa declaração atribui um preenchimento interno no próprio elemento, tendo sua aplicação de forma resumida com esse padrão top "Cima", left"Esquerda", bottom "baixo", rigth "Direita".
*/



.Senha_label {

    display: inline-block;
    margin: 5px 20px 0px 0px;
    font-size: 20px;
    font-family: fontealpha;
    padding: 10px 10px 10px 1px;
    color: rgb(0, 0, 0);
    padding: 10px 20px 10px 0px;

}

/*Classe "Senha_input" focada na organização e edição do conteudo input do Senha.
Tendo alguns edições aplicadas:

-width e heigth: Essa declaração são paras medidas, de largura e altura respectivamente, sendo que a largura foi aplicada um 100% da largura maxima da classe Login, para se adapitar naturalmente com classe e próprio painel.
-font-size: Essa declaração é para aumentar o tamanho da fonte.
 -padding: Essa declaração atribui um preenchimento interno no próprio elemento, tendo sua aplicação de forma resumida com esse padrão top "Cima", left"Esquerda", bottom "baixo", rigth "Direita".
-color: Essa declaração foi usada para aplicação de um color, diretamente na fonte que é revalada durante o preenchimento do campo.
-margin: 0px 0; Essa declaração está sendo para o expasamento externa do elemento diante aos outros que estão no painel, no entanto só foram declaradas o 0px no seu top e Bottom "Cima e baixo" e 0 no seu left right.
-border: none; Essa declaração é utilizacão da tag para retirar o elemento definido, ou seja a propria borda do input, que vem de forma padronizada pelor proprio formulario.
-outline: none; Essa declaração é utilizacão da tag para retirar o elemento definido, ou seja a propria linha do campo input, que vem de forma padronizada pelor proprio formulario.
-border-radius: Essa declaração atribuida para, a definição do aredondamento das pontas da propria borda do elemeneto.
-border: Essa declaração é usada para originar uma borda no elemento aplicando sua espessura 3px, depois a definindo em padrão solido “Solid” e por ultimo definindo sua cor atraves do rgb (255, 255, 255)= White.

*/


.Senha_input {

    width: 100%;
    height: 50px;
    padding: 20px 10px 20px 20px;
    font-size: 16px;
    color: black;
    margin: 0px 0;
    border: none;
    outline: none;
    border: 3px solid rgb(0, 0, 0);
    border-radius: 10px;

}

/*Edição focada usando a classe "Senha_input" focando na tag "input", todas as edições dentro dessa abertura de classe serão focadas somente no campo input e nenhum outro elemento.
Tendo alguns edições aplicadas:

-Width:100%; height:100%; Usando essas tags largura e altura com a extensão maximas focadas no campo input sobre a extensão  de sua propria classe, sendo mais uma garantia para a adaptação do campo input.
-Background: transparent; Essa tag é usada para retirar um fundo do elemento, no caso retirando o fundo do campo input.
*/

.Senha_input input {

    width: 100%;
    height: 100%;
    background: transparent;

}

/*Classe "Senha_input":hover defini somente uma interação do campo input com a mouse, onde ao passar do mouse sobre o elemento ele realizara uma ação.

-Definida aqui como a mudaça de cor do próprio border.
*/

.Senha_input:hover {

    border: 4px solid rgb(30, 121, 132);

}

/*Edição usando a classe "Senha" focando na tag "input" sendo ainda mais especifico no atributo placeholder.
Tendo alguns edições aplicadas:


-Color: Essa declaração foi usada para aplicação de um color para diretamente na fonte, presetando antes do preenchimento dentro do campo input.
-font-family:fontealpha, Essa declaração altera a tipografia da fonte, para propria que foi trazida para a linha de código, sendo ela a fontealpha, presetanda antes do preenchimento do campo input, dentro do próprio.
-font-size: Essa declaração é para aumentar o tamanho da fonte, presetanda antes do preenchimento do campo input, dentro do próprio.
*/

.Senha input::placeholder {

    color: rgb(0, 0, 0);
    font-family: fontealpha;
    font-size: 15px;

}

/*Classe "botao" focada principal no alinhamento do botão, enquanto também aplica algumas mudanças no seu designer.
Tendo alguns edições aplicadas:

-Margin-top: Essa declaração usada somente para expasamentos externos focalizados sobre o topo do elementos, aplicando assim 40px para dar um espaçamento do botão para o input senha.
-width: 100%, height: 50px: Essa declaração é para definir tanto lagura quanto altura do próprio botão, tendo a largura do botão adapitativa a largura total do painel.
-border-radius: 20px; Essa declaração é para definir o aredondamento da propria borda do botão.
-background-color: rgb(28, 173, 180); Essa declaração para definir a cor de fundo desse botão.
-Color: Essa declaração foi usada para aplicação de um color para diretamente na fonte, presetando antes do preenchimento dentro do campo input.
-font-family:fontealpha, Essa declaração altera a tipografia da fonte, para propria que foi trazida para a linha de código, sendo ela a fontealpha, presetanda antes do preenchimento do campo input, dentro do próprio.
-font-size: Essa declaração é para aumentar o tamanho da fonte, presetanda antes do preenchimento do campo input, dentro do próprio.
-border: none; e outline: none; para retirar o padrão do botão para uma melhor edição.
*/

.botao {

    margin-top: 40px;
    width: 100%;
    height: 50px;
    border-radius: 20px;
    background-color: rgb(28, 173, 180);
    font-family: fontealpha;
    font-size: 20px;
    color: rgb(0, 0, 0);
    border: none;
    outline: none;

}

/*classe "Senha_input":hover defini somente uma interação do campo input com a mouse, onde ao passar do mouse sobre o elemento ele realizara uma ação.

-Definido uma declaração de uma nova cor de backgroud, e uma nova cor de font para o botão.
*/

.botao:hover {

    background-color: rgb(30, 121, 132);
    color: white;

}