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: white;
    width: 140vh;
    height: 90vh;
    border-radius: 20px;
    box-shadow: 0px 20px 50px 20px;
    user-select: none;
    position: relative;
}
#bloco {
    background-color: #9c1f1f ;
    width: 45%; /* 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: 2vh;
    padding-left: 30px;
}

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

#voltar a {
    color: white;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;
}
h1{
    color: white;
    font-family:'Gill Sans MT', 'Trebuchet MS', sans-serif;
    margin-left: 48px;
    padding-top: 10px;
    font-size: 65px;
    margin-top: 30px;
}
 
h3{
    color: white;
    font-family: Arial;
    margin-left: 48px;
    padding-top:2px;
    font-size: 35px;
}
#entrar{
    width: 450px;
    color: #ffffff;
    height: 70px;
    background:transparent;
    font-size: 600px;
    border-radius: 45px;
    border: solid rgb(255, 255, 255);
    margin-left: 30px;
    border-width: 10px;
    margin-top: 40px;
    user-select: none;

}
#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: 70px;
    user-select: none;

}
.crie{
    color: #9c1f1f;
    font-size: 30px;
    max-width: 100%;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', 'Geneva', 'Verdana', sans-serif;
    padding-top:25px;
    margin-left: 0px;
}
#nome,
#segnome,
#cpf,
#email,
#cemail,
#senha, 
#csenha {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: left;
    padding-top: 3vh;
}

.container-toggle {
    display: flex;
    align-items: center;
    margin-left: 15vw;
    margin-top: -1vh;
    gap: 10px; /* Espaço entre o botão e o texto */
}

.txt-info, .txt-info-senha {
    display: none;
    width: auto; /* Ajuste a largura automaticamente */
    height: auto; /* Ajuste a altura automaticamente */
    font-size: 12px;
    font-family: "Roboto", sans-serif;
    margin-left: -8vw;
    color: #000000;
}
#segnome .txt-info{
    margin-left: -10vw;
}
#cpf .txt-info{
    margin-left: -17vw;
}
#email .txt-info{
    margin-left: -18.5vw;
}
#cemail .txt-info{
    margin-left: -22vw;
}
#senha .txt-info{
    margin-left: -15vw;
    margin-top: -2vh;
    text-align: justify;
}
#csenha .txt-info{
    margin-left: -9.5vw;
}

.nome, .segnome, .cpf, .em, .cem, .senha, .csenha {
    display: block;
    margin-top: 1vh;
    width: 15vw;
    background-color: #eeeeee;
    border-radius: 10px;
    border: none;
    padding: 0px 5px;
    font-size: 15px;
    height: 4vh;
}

/* Ajustes de tamanho de fonte específico */
.nome, .senha, .csenha, .segnome, .cpf, .em, .cem {
    font-size: 15px;
    padding-left: 1vw;
}


        .entrar{
            width: 200px;
            height: 80px;
        border-radius: 40px;
        border: solid white;
        background-color: #9c1f1f;
        color: white;
        border-width: 8px;
        margin-left: 35px;
        margin-top: 5px;
        font-size: 25px;
    }
        #ent{
            align-items: center;
            align-content: center;
            align-self: center;
            text-align: center;
            width: 100px;
            margin-top: 0px;
            height: 90px;
            transition: 1.2s;
        }
        #cad{
            margin-top: 0vh;
        }
        .cadastrar{
            width: 180px;
            height: 60px;
            text-align: center;
            margin-left: 0vw;
            border-radius: 20px;
            border: solid #dfdfdf;
            background-color: #9c1f1f;
            color: white;
            font-size: 20px;
            position: flex;
            cursor: pointer;
            transition: 1.1s;
        }
        .entrar:hover{
            text-decoration: none;
            box-shadow: white 0px 0px 10px 0px;
            cursor: pointer;
        }
        .nome:hover{
            box-shadow: #3f0000 0px 2px 5px 2px;
        }
        .segnome:hover{
            box-shadow: #3f0000 0px 2px 5px 2px;

        }
        .cpf:hover{
            box-shadow: #3f0000 0px 2px 5px 2px;
        }
        .em:hover{
            box-shadow: #3f0000 0px 2px 5px 2px;
        }
        .cem: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;
        }

        @media (max-width: 600px) {
            body {
                background-color: #141414;
                height: 69dvh; /* 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 */
            }
            html{
                overflow: scroll;
                height: auto;
            }
            #container {
                background-color: white;
                width: 80%;
                height: 90vh;
                left: 10%;
                margin: 0;
                margin-top: -59%;
                border-radius: 20px;
                box-shadow: 0px 20px 50px 20px;
                user-select: none;
                position: fixed;
            }
            #bloco {
                background-color: #9c1f1f;
                width: 100%; /* Largura do bloco, respeitando o container */
                height:20%; /* 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: 80%;
                height: 8vh;
                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: 15px; /* Define uma altura para a imagem */
                border: solid #3f0000 2px;
                border-radius: 50%;
                padding: 10px;
                cursor: pointer;
                transform: scaleX(-1); /* Espelha horizontalmente */
            }
            #voltar .voltar {
                display: none;
               }
            
             h1{
                width: 100%;
                height: auto;
                color: white;
                font-family:'Gill Sans MT', 'Trebuchet MS', sans-serif;
                margin-left: 30%;
                padding-top: 0px;
                font-size: 100%;
                margin-top: -15%;
            }
            h1 br{
                display: none;
            }
             
            h3{
                max-width: 100%;
                text-align: center;
                color: white;
                font-family: Arial;
                margin-left: 5%;
                margin-top: -2%;
                padding-top:0px;
                font-size: 90%;
            }
            .entrar{
                background-color: #9c1f1f;
                align-content: center;
                border: solid white 4px;
                border-radius: 20px;
                width: 40%;
                height: 40%;
                font-size: 100%;
                margin-top: -2vh;
            }
            #ent{
                align-items: center;
                align-content: center;
                align-self: center;
                text-align: center;
                width: 100%;
                margin-left: -4%;
                margin-top: -4vh;
                height: 90px;
                transition: 1.2s;
                background-color: transparent;
            }
            #parte2{
                max-width: 100%;
                height: 0dvh;
                margin-left: 0vh;
                margin-right: 0px;
                align-content: center;
                margin-top: 0%;
                padding-top: 40%;
                text-align: center;
                font-size: 0px;
                user-select: none;
            }
            .crie{
                color: #9c1f1f;
                font-size: 18px;
                max-width: 100%;
                font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', 'Geneva', 'Verdana', sans-serif;
                padding-top:0px;
                margin-left: 0px;
            }
            #nome,
            #segnome,
            #cpf,
            #email,
            #cemail,
            #senha, 
            #csenha {
                display: flex;
                flex-direction: column;
                align-items: center;
                text-align: left;
                padding-top: 1.5vh;
            }
            
            .container-toggle {
                display: flex;
                align-items: center;
                margin-left: 40vw;
                margin-top: -1vh;
                gap: 10px; /* Espaço entre o botão e o texto */
            }
            
            .txt-info, .txt-info-senha {
                display: none;
                width: auto; /* Ajuste a largura automaticamente */
                height: auto; /* Ajuste a altura automaticamente */
                font-size: 10px;
                font-family: "Roboto", sans-serif;
                margin-left: -8vw;
                color: #000000;
            }
            #segnome .txt-info{
                margin-left: -25vw;
            }
            #cpf .txt-info{
                margin-left: -38vw;
            }
            #email .txt-info{
                margin-left: -38.5vw;
            }
            #cemail .txt-info{
                margin-left: -36vw;
            }
            #senha .txt-info{
                margin-left: -36vw;
                margin-top: -1vh;
                text-align: justify;
            }
            #csenha .txt-info{
                margin-left: -34vw;
            }
            
            .nome, .segnome, .cpf, .em, .cem, .senha, .csenha {
                display: block;
                margin-top: 0.5vh;
                width: 80%;
                background-color: #eeeeee;
                border-radius: 10px;
                border: none;
                padding: 0px 5px;
                font-size: 12px;
            }
            
            /* Ajustes de tamanho de fonte específico */
            .nome, .senha, .csenha, .segnome, .cpf, .em, .cem {
                font-size: 12px;
                padding-left:5vw;
            }
        
                    #cad{
                        margin-top: 0.5vh;
                    }
                    .cadastrar{
                        width: 180px;
                        height: 60px;
                        text-align: center;
                        margin-left: 0vw;
                        border-radius: 20px;
                        border: solid #dfdfdf;
                        background-color: #9c1f1f;
                        color: white;
                        font-size: 20px;
                        position: flex;
                        cursor: pointer;
                        transition: 1.1s;
                    }
                    .entrar:hover{
                        text-decoration: none;
                        box-shadow: white 0px 0px 10px 0px;
                        cursor: pointer;
                    }
                    .nome:hover{
                        box-shadow: #3f0000 0px 2px 5px 2px;
                    }
                    .segnome:hover{
                        box-shadow: #3f0000 0px 2px 5px 2px;
            
                    }
                    .cpf:hover{
                        box-shadow: #3f0000 0px 2px 5px 2px;
                    }
                    .em:hover{
                        box-shadow: #3f0000 0px 2px 5px 2px;
                    }
                    .cem: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;
                    }
             
        }