* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    font-family: Arial, sans-serif;
    background: linear-gradient(to right, #87CEFA 0%, #140560 100%);
    background-size: 200% 100%;
    background-position: left;
    transition: background-position 1s linear;
    /*background: linear-gradient(to right, #87CEFA 50%, #02485f 50%); /* Fundo azul claro a azul celeste */
    display: flex;
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente */
    /*background-color: #012030;*/
    height: 100vh;
}
.container {
    width: 50%;
    height: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    vertical-align: middle; /* Alinha verticalmente o conteúdo */
}
.login-box {
    background-color: rgb(85, 135, 160); /* Fundo da caixa de login */
    background: linear-gradient(to right, #81e2f0 0%, #024751 100%);

    padding: 20px;
    width: 400px;
    border-radius: 10px; /* Cantos arredondados da caixa */
    box-shadow: 0 0 20px rgba(174, 41, 41, 0.3); /* Sombra suave */
}
h2 {
    margin-bottom: 20px; /* Espaçamento abaixo do título */
}
.textbox {
    margin-bottom: 15px; /* Espaçamento entre as caixas de texto */
}
.textbox input {
    width: 50%; /* Largura total do campo */
    padding: 10px;
    font-size: 16px; /* Tamanho da fonte */
    border: 1px solid #ccc; /* Bordas padrão */
    border-radius: 5px; /* Bordas arredondadas */
    outline: none; /* Remove contorno padrão */
    transition: border-color 0.3s; /* Transição suave na borda */
/*    box-shadow: 0 0 20px rgba(174, 41, 41, 0.3); /* Sombra suave */

}
.textbox input:focus {
    border-color: #00BFFF; /* Cor da borda ao focar */
}
.btn {
    width: 100%;
    padding: 10px;
    font-size: 12px; /* Tamanho da fonte */
    background-color: #00BFFF; /* Botão azul celeste */
    color: white;
    border: none; /* Remove borda padrão */
    border-radius: 5px; /* Bordas arredondadas */
    cursor: pointer; /* Muda o cursor para indicar que é clicável */
    transition: background-color 0.3s; /* Transição suave na cor */
}
.btn:hover {
    background-color: #008CBA; /* Cor do botão ao passar o mouse */
}