body {
	background: linear-gradient(to bottom, black 0%, var(--bg-primary) 62%);
	background-size: cover;
	width: 100vw;
	height: 100vh;
}


div#sign-in-container {width: 28rem;margin: auto;text-align: center;color: var(--text-primary);}

h1#logo-text
{
  background: var(--primary-gradient);
  background-clip: text;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent; 
  -moz-text-fill-color: transparent;
  font-size: 3.5rem;
  font-family: 'Pacifico';
  margin-bottom: 1rem;
}



form#sign-in-form {color: var(--text-primary);padding: 1rem;text-align: center;}

form#sign-in-form fieldset {background-color: transparent;border-width: 0;border-radius: 5px;box-shadow: 1px 24px 26px -12px black;padding: 1rem 2rem 1rem;}

form#sign-in-form legend {font-size: 1.4rem;}

form#sign-in-form label {display: block;position: relative;}

form#sign-in-form label.animate span.input-title {display: block;color: var(--primary-color);position: relative;top: 2rem;left: 0rem;}

form#sign-in-form label.animate input[type="text"], form#sign-in-form label.animate input[type="password"] {background-color: var(--text-primary);width: 90%;color: var(--bg-primary);border-width: 0;border-radius: 10px;padding: 0.5rem 1rem;text-align: center;}


form#sign-in-form label.animate:hover span.input-title, form#sign-in-form label.animate:has(input:focus) span.input-title, form#sign-in-form label.animate:not(:has(input[type="text"]:placeholder-shown)) span.input-title,
form#sign-in-form label.animate:not(:has(input[type="password"]:placeholder-shown)) span.input-title {color: var(--text-primary);top: 0;left: 0;}

form#sign-in-form input[type="submit"] {cursor: pointer;background-image: var(--primary-gradient);width: 90%;padding:  0.25em 1rem;border-width: 0;border-radius: 5px;color: var(--text-primary);margin-top: 1rem;background-size: 100% 90px;transition: background-size 0.3s, color 0.5s;}
form#sign-in-form input[type="submit"]:hover {background-size: 0 0;color: var(--primary-color);}


form#sign-in-form span.Error {display: none;background-color: var(--error-color);width: 15rem;margin: 0.75rem auto;margin-bottom: 1rem;border-radius: 5px;}

div#password-toggle-container {position: absolute;right: 2.5rem;top: 2.6rem;background-color: red;}

div#password-toggle-container:hover span.toggle-password {text-shadow: 0px 0px 3px var(--bg-primary);}

span.toggle-password {cursor: pointer;position: absolute;top: 0;left: 0;color: var(--bg-primary);opacity: 1;transition: all 0.2s;}
span.toggle-password:hover {}
span.toggle-password.visibility_off {opacity: 0;}
span.toggle-password.visible {opacity: 1;text-shadow: none;}


button#download-app-btn {cursor: pointer;display: none;background-image: var(--primary-gradient);width: 90%;margin-top: 1rem;padding:  0.6em 1rem;border-width: 0;border-radius: 5px;color: white;background-size: 100% 90px;transition: background-size 0.3s, color 0.5s;}
button#download-app-btn:hover {background-size: 0 0;color: var(--primary-color);}