@import url('/css/variables.css');
@import url('/css/overlay-hamburger.css');

body {
margin: 0;
font-family: var(--primary-font-family, Arial, sans-serif);
background-color: var(--secoundary-blue-color);
color: var(--secoundary-text-color);
width: auto;
height: auto;
}

main {
display: flex;
justify-content: center;
margin-top: 5%;
width: 100%;
font-family: var(--primary-font-family);
}

.main-content {
display: flex;
flex-direction: column;
width: 70%;
background-color: var(--CoolGray);
text-align: center;
border-radius: 20px;
padding: 2rem;
}

.log-reg-h1 {
font-size: 2.5rem;
text-decoration: underline;
color: var(--secoundary-blue-color);
}

.quote {
  color: var(--secoundary-blue-color);
  margin-top: -20px;
}

.tagline-login {
width: 100%;
color: var(--secoundary-blue-color);
margin-bottom: 1rem;
}

form div {
display: flex;
flex-direction: column;
gap: 5px;
width: 60%;
margin: 0 auto;
line-height: 50px;
}

form div label {
display: block;
text-align: left;
font-size: 1rem;
font-weight: bold;
color: var(--secoundary-blue-color);
margin-bottom: -10px;
}

form div input {
width: 100%;
height: 40px;
background-color: var(--secoundary-blue-color);
color: gray;
padding: 0 0.5rem;
border: 1px solid var(--secoundary-blue-color);
border-radius: 4px;
}

form div input:not(:placeholder-shown) {
  font-size: 1.2rem;
  color: var(--secoundary-text-color);
}

form .login-btn {
background-color: var(--primary-blue-color);
width: 50%;
height: 40px;
font-weight: bold;
display: block;
margin: 20px auto 0;
border-radius: 20px;
color: var(--secoundary-text-color);
}

div.btm-text {
display: flex;
flex-direction: row;
align-items: center;
padding: 20px;
margin-bottom: -40px;
}

div.btm-text p,
div.btm-text a {
margin-right: 10px;
color: var(--secoundary-blue-color);
}

div.btm-text a:hover,
a.log-in-ref:hover {
background-color: var(--Green);
border-radius: 20px;
padding: 5px;
color: var(--secoundary-text-color);
}

.log-in-ref {
color: var(--secoundary-blue-color);
}

form .login-btn:hover {
background-color: var(--Green);
}

fieldset.compact {
color: var(--secoundary-text-color);
border: none;
padding: 0;
margin: 10px auto;
width: 60%;
display: flex;
flex-direction: column;
gap: 5px;
}

fieldset.compact legend {
color: black;
font-weight: bold;
margin-bottom: 4px;
}

.p-btm {
color: var(--secoundary-blue-color);
}

@media (max-width: 768px) {
.main-content {
width: 90%;
padding: 20px;
}

h1 {
font-size: 2rem;
}

form div {
width: 100%;
}

form .login-btn {
width: 70%;
height: 45px;
}
}

@media (max-width: 480px) {
main {
margin-top: 5%;
flex-direction: column;
align-items: center;
}

h1 {
font-size: 1.8rem;
}

form div label {
font-size: 0.9rem;
}
}