body {
    background-color: #141414;
    height: 100vh; /* Alterado para 100vh para preencher a tela inteira */
    margin: 0; /* Remove qualquer margem padrão do body */
    display: flex; /* Habilita o Flexbox */
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente */
}

#container {
    background-color: #9c1f1f;
    width: 120vh;
    height: 80vh;
    border-radius: 20px;
    box-shadow: 0px 20px 50px 20px;
    user-select: none;
    position: relative;
}

#bloco {
    background-color: white;
    width: 50%; /* Largura do bloco, respeitando o container */
    height: 100%; /* A altura do bloco será 100% da altura do container */
    border-radius: 10px 0px 0px 10px;
    position: absolute; /* Posiciona o bloco dentro do container */
    top: 0;  /* Fica alinhado ao topo do container */
    left: 0; /* Fica alinhado à esquerda do container */
    box-sizing: border-box;
}


#voltar {
    width: 100%;
    height: 10vh;
    border-radius: 10px; /* Para um acabamento mais suave */
    background-color: transparent;
    display: flex; /* Ativa o flexbox */
    align-items: center; /* Alinha os itens verticalmente */
    gap: 10px; /* Espaço entre os itens */
    margin-top: 1vh;
    padding-left: 20px;
}

#voltar img {
    width: auto;
    height: 40px; /* Define uma altura para a imagem */
    border: solid #3f0000 5px;
    border-radius: 50%;
    padding: 10px;
    background-color: white;
    cursor: pointer;
    transform: scaleX(-1); /* Espelha horizontalmente */
}

#voltar a {
    color: #9c1f1f;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;
}

h1{
    color: #9c1f1f;
    font-family:'Gill Sans MT', 'Trebuchet MS', sans-serif;
    margin-left: 48px;
    padding-top: 10px;
    font-size: 60px;
    margin-top: 30px;
}
h3{
    color: #9c1f1f;
    font-family: Arial;
    margin-left: 48px;
    padding-top:2px;
    font-size: 30px;
}
#parte2{
    max-width: 50vw;
    height: auto;
    margin-left: 60vh;
    margin-right: 5px;
    align-content: center;
    margin-top: 0px;
    padding-top: 0px;
    text-align: center;
    font-size: 80px;
    user-select: none;

}
.entre{
    color:white ;
    font-size: 30px;
    max-width: 100%;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', 'Geneva', 'Verdana', sans-serif;
    padding-top: 100px;
    margin-left: 0px;
}

#email{
    margin-top: 40px;
}
.email{
    width:22vw ;
    background-color: #eeeeee;
    border-radius: 10px;
    border: none;
    padding: 0px 10px;

    font-size: 35px;
    margin-left: 0px;
    height: 60px;
    }
    #senha{
        margin-top: -50px;
    }
    .senha{
        width: 22vw;
        background-color: #eeeeee;
        border-radius: 10px;
        border: none;
        font-size: 35px;
        padding: 0px 10px;
        margin-left: 0px;
        height: 60px;
        margin-top: -100px;
        }
        #cad{
            align-items: center;
            width: 90px;
            margin-top: -6px;
            height: 90px;
        }
        .cadastrar{
            width: 240px;
            height: 80px;
            margin-left: 36px;
            border-radius: 40px;
            border: solid #dfdfdf;
            background-color: #9c1f1f;
            color: white;
            font-size: 30px;
        }
        #ent{
            align-items: center;
            align-content: center;
            align-self: center;
            text-align: center;
            width: 100px;
            margin-top: 0px;
            height: 90px;
            transition: 1.2s;
        }
        .entrarr{
            width: 180px;
            height: 60px;
            text-align: center;
            margin-left: 10vw;
            border-radius: 20px;
            border: solid #dfdfdf;
            background-color: #9c1f1f;
            color: white;
            font-size: 20px;
        position: flex;
            cursor: pointer;
            transition: 1.1s;
        }
        #esqueceu {
            width: 15vw;
            height: 2vh;
            text-align: center;
            margin-left: 10.3vw;
            margin-top: 1vh;
            background-color: transparent;
            position: relative;
            transition: 1.2s; 
        }
        
        #esqueceu a {
            color: white;
            font-size: 20px;
            text-decoration: none;
            text-align: center;
            position: absolute;  /* Usando posição absoluta para alinhar o link corretamente */
            top: 0;  /* Alinha o link ao topo de #esqueceu */
            left: 0;  /* Garante que o link se alinhe à esquerda do elemento #esqueceu */
            margin-top: 0vh;  /* Ajuste conforme necessário para o posicionamento vertical */
        }
        

        .entrarr:hover{
            text-decoration: none;
            color: #9c1f1f;
            background-color: #ffffff;
            box-shadow: #3f0000 0px 2px 5px 2px;
        }
        .nome:hover{
            box-shadow: #3f0000 0px 2px 5px 2px;
        }
        .cpf:hover{
            box-shadow: #3f0000 0px 2px 5px 2px;
        }
        .senha:hover{
            box-shadow: #3f0000 0px 2px 5px 2px;
        }
        .cadastrar:hover{
            box-shadow: #3f0000 0px 2px 5px 2px;
            cursor: pointer;
        }
        .voltar:hover{
            color: #3f0000;
        }
        .esqueci:hover{
            color: #3f0000;
        }
        @media (max-width: 600px) {
            body {
                background-color: #141414;
                height: auto; /* Alterado para 100vh para preencher a tela inteira */
                margin: 0; /* Remove qualquer margem padrão do body */
                display: flex; /* Habilita o Flexbox */
                justify-content: center; /* Centraliza horizontalmente */
                overflow-y: auto;
                align-items: center; /* Centraliza verticalmente */
            }
            
            #container {
                background-color: #9c1f1f;
                width: 80%;
                height: 98dvh;
                left: 10%;
                margin: 0;
                margin-top: 2%;
                border-radius: 20px;
                box-shadow: 0px 20px 50px 20px;
                user-select: none;
                position: fixed;
            }
           
            
            #bloco {
                background-color: white;
                width: 100%; /* Largura do bloco, respeitando o container */
                height: auto; /* A altura do bloco será 100% da altura do container */
                border-radius: 10px 10px 0px 0px;
                left: 0; /* Fica alinhado à esquerda do container */
                box-sizing: border-box;
            }
            
            
            #voltar {
                width: 100%;
                height: 10vh;
                border-radius: 10px; /* Para um acabamento mais suave */
                background-color: transparent;
                display: flex; /* Ativa o flexbox */
                align-items: center; /* Alinha os itens verticalmente */
                gap: 10px; /* Espaço entre os itens */
                margin-top: 1vh;
                padding-left: 20px;
            }
            
            #voltar img {
                width: auto;
                height: 25px; /* Define uma altura para a imagem */
                border: solid #3f0000 2px;
                border-radius: 50%;
                padding: 10px;
                background-color: white;
                cursor: pointer;
                transform: scaleX(-1); /* Espelha horizontalmente */
            }
            
            #voltar .voltar {
             display: none;
            }
            
            h1{
                width: 100%;
                height: auto;
                color: #9c1f1f;
                font-family:'Gill Sans MT', 'Trebuchet MS', sans-serif;
                margin-left: 30%;
                padding-top: 0px;
                font-size: 120%;
                margin-top: -16%;
            }
            h1 br{
                display: none;
            }
            h3{
                max-width: 100%;
                text-align: center;
                color: #9c1f1f;
                font-family: Arial;
                margin-left: 5%;
                padding-top:2px;
                font-size: 150%;
            }
            #cad{
                background-color: transparent;
                align-content: center;
                border-radius: 20px;
                width: 50%;
                height: 8vh;
                margin-left: 28%;
                margin-top: -2vh;
            }
            .cadastrar{
                width: 100%;
                height: 100%;
                margin-left: 0;
                border-radius: 40px;
                border: solid #dfdfdf;
                background-color: #9c1f1f;
                color: white;
                font-size: 20px;
            }
            #parte2{
                max-width: 100%;
                height: 0dvh;
                margin-left: 0vh;
                margin-right: 0px;
                align-content: center;
                margin-top: 80%;
                padding-top: 80%;
                text-align: center;
                font-size: 0px;
                user-select: none;
            
            }
            .entre{
                width: 100%;
                background-color: transparent;
                color:white ;
                margin-top: -100%;
                font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', 'Geneva', 'Verdana', sans-serif;
                padding-top: 10%;
            }
            .entre h4{
                font-size: 60%;
            }
            
            #email{
                margin-top: 10%;
            }
            .email{
                width:80% ;
                background-color: #eeeeee;
                border-radius: 10px;
                border: none;
                padding: 0px 10px;
                font-size: 20px;
                margin-left: 0px;
                height: 60px;
                }
                #senha{
                    margin-top: 20%;
                }
                .senha{
                    width: 80%;
                    background-color: #eeeeee;
                    border-radius: 10px;
                    border: none;
                    font-size: 20px;
                    padding: 0px 10px;
                    margin-left: 0px;
                    height: 60px;
                    margin-top: -100px;
                    }
                    #ent{
                        align-items: center;
                        align-content: center;
                        align-self: center;
                        text-align: center;
                        width: 100px;
                        margin-top: 2vh;
                        height: 90px;
                        margin-left: 8%;
                        transition: 1.2s;
                    }
                    .entrarr{
                        width: 180px;
                        height: 60px;
                        text-align: center;
                        border-radius: 20px;
                        border: solid #dfdfdf;
                        background-color: #9c1f1f;
                        color: white;
                        font-size: 20px;
                    position: flex;
                        cursor: pointer;
                        transition: 1.1s;
                    }
                    #esqueceu {
                        width: 50vw;
                        height: 2vh;
                        text-align: center;
                        margin-left: 32%;
                        margin-top: 1vh;
                        background-color: transparent;
                        position: relative;
                        transition: 1.2s; 
                    }
                    
                    #esqueceu a {
                        width: 100%;
                        color: white;
                        font-size: 20px;
                        text-decoration: none;
                        text-align: center;
                        position: absolute;  /* Usando posição absoluta para alinhar o link corretamente */
                        top: 0;  /* Alinha o link ao topo de #esqueceu */
                        left: 0;  /* Garante que o link se alinhe à esquerda do elemento #esqueceu */
                        margin-top: 0vh;  /* Ajuste conforme necessário para o posicionamento vertical */
                        transition: 1.1s;
                    }
                    
            
                    .entrarr:hover{
                        text-decoration: none;
                        color: #9c1f1f;
                        background-color: #ffffff;
                        box-shadow: #3f0000 0px 2px 5px 2px;
                    }
                    .nome:hover{
                        box-shadow: #3f0000 0px 2px 5px 2px;
                    }
                    .cpf:hover{
                        box-shadow: #3f0000 0px 2px 5px 2px;
                    }
                    .senha:hover{
                        box-shadow: #3f0000 0px 2px 5px 2px;
                    }
                    .cadastrar:hover{
                        box-shadow: #3f0000 0px 2px 5px 2px;
                        cursor: pointer;
                    }
                    .voltar:hover{
                        color: #3f0000;
                    }
                    #esqueceu a:hover{
                        color: #ffd000;
                    }              
        }