:root {
--cor-clara: #eff0ef;
--cor-escura: #404742;
--cor-verde: #1fa84f;
}
body {
background-color: var(--cor-verde);
background-image: url(../img/batop.png);
color: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
font-family: 'Poppins', sans-serif;
}
.register-container {
width: 100%;
max-width: 400px;
padding: 20px;
}
.register-card {
background: linear-gradient(to top, var(--cor-clara), #f8f9fa);
border-radius: 8px;
padding: 30px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
text-align: center;
color: #343a40;
}
.register-card h2, .register-card p {
font-family: 'Poppins', sans-serif;
color: var(--cor-escura);
}
.alert {
font-size: 0.9rem;
}
.form-control {
color: var(--cor-verde); !important; /* Texto nos campos de entrada */
background-color: #f8f9fa; /* Fundo claro */
box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.1);
border: none;
}
.btn-success {
background-color: var(--cor-verde); /* Botão principal com cor caqui */
border-color: var(--cor-verde);
}
.btn-success:hover {
background-color: var(--cor-escura); /* Cor mais escura ao passar o mouse */
border-color: var(--cor-escura);
}
.register-card a {
color: var(--cor-verde);
text-decoration: none;
}
.register-card a:hover {
color: var(--cor-escura);
text-decoration: underline;
}
.footer {
width: 100%;
text-align: center;
font-size: 0.9rem;
color: white;
position: relative;
margin-top: 20px;
}
.footer a {
color: white;
text-decoration: underline;
}
.toggle-password {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}
@media (max-width: 768px) {
.register-card h2 {
font-size: 24px; /* Ajuste no título em dispositivos móveis */
}
.register-card p {
font-size: 16px;
}
.btn-primary {
font-size: 16px;
padding: 12px 24px;
}
}