form { width: 100%; margin-top: 10vh; }
form { display: flex; justify-content: flex-start; align-items: center; flex-direction: column; row-gap: 1rem; }

.home-link { margin-bottom: 10vh; font-size: 2rem; }
.login-button { margin-top: 2rem; }

.input-wrapper { position: relative; }
input { padding: var(--s); font-size: 1.2rem; }
input + label { position: absolute; top: 50%; left: 2px; padding: 0 var(--s); background-color: white; transition: top 0.3s ease-in-out, transform 0.5s ease-in-out; color: var(--text-color); }
input + label { top: 0; transform: translate(0%, -85%); }
input:invalid + label { top: 50%; transform: translate(0%, -50%); }
input:focus + label { top: 0; transform: translate(0%, -85%); }


.login-button { padding: var(--s) var(--l); font-size: 2rem; }
.login-button { border: none; }
.login-button { background-color: var(--accent-color); color: white; text-shadow: 1px 1px rgba(0,0,0,0.1); transition: background 0.3s ease-in-out; cursor: pointer; }
.login-button:hover { background-color: color-mix(in hsl, var(--accent-color), black 10%); }