*,
*:after,
*:before {
    box-sizing: border-box;
}

:root {
    --red: hsl(18 100% 50%);
    --green: hsl(130 52% 46%);
    --yellow: hsl(44 83% 53%);
    --blue: hsl(215 100% 53%);
    --grey: hsl(0 0% 45%);
    --light: hsl(0 0% 80%);
    --dark-gray: hsl(0 0% 20%);
    --transparent-gray: hsla(0 0% 60% / 0.5);
    --text: var(--gray-5);
    --transition: 0.2s;
    --valid: var(--green);
    --invalid: var(--red);
    --focus: var(--yellow);
    --blur: var(--blue-1);
    --disabled: var(--grey);
}

:where(html) {
    color-scheme: none;
}

body {
    display: grid;
    min-height: 100vh;
    font-family: "Genos", 'Google Sans', sans-serif, system-ui;
    place-items: center;
    overflow: hidden;
    margin: 0;
    background-color: var(--dark-gray);
    font-size: 1rem;
}

form {
    width: clamp(58ch, 32vw, 10rem);
    display: grid;
    grid-gap: 1rem;
    outline: 0.5rem inset var(--transparent-gray);
    padding: 2% 0 1.5rem;
    justify-content: center;
    background-image: linear-gradient(142deg, #444 0%, #5559 50%, #5559 65%, #6669 100%);
}

form:before {
    content: "Enter an email and password:";
    font-size: calc(0.25vw + 0.25vh + 1.1em);
    margin: 0.2rem 0.4rem 0.4rem;
    text-align: center;
    font-weight: 700;
    color: var(--light);
}

input {
    border: 4px solid var(--color);
    border-radius: 4px;
    padding: 1rem 2rem;
    font-weight: 400;
    transition: border-color var(--transition);
}

input:focus-visible {
    outline-color: var(--color);
}

input::placeholder {
    color: transparent;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.form-group {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.2em 4em;
}

label {
    font-family: sans-serif;
    display: flex;
    font-weight: bold;
    padding-right: 1rem;
    transform-style: preserve-3d;
    transition: color var(--transition);
    color: var(--color);
    font-size: 1.25rem;
}

button {
    padding: 1rem 2rem;
    border-radius: 4px;
    border: 0;
    cursor: pointer;
    background: var(--disabled);
    font-weight: bold;
    color: var(--gray-5);
    transition: color var(--transition), background var(--transition);
    margin: 0px 1.5em;
}

.form-group:has(:invalid) {
    --color: var(--invalid);
}

.form-group:has(:invalid:not(:focus)) {
    animation: shake 0.65s;
}

.form-group.pwd::after {
    content: "Password should include capitals, lowercase, numbers, and symbols.";
    color: var(--red);
    font-size: 0.75rem;
    font-weight: 400;
    display: flow;
    width: 100%;
    margin-top: 0.25rem;
    text-align: center;
    opacity: 0;
    transition: opacity 2s ease-in-out;
}

.form-group.pwd:has(input:invalid:not(:focus)):has(input:not(:placeholder-shown))::after {
    opacity: 1;
}


.form-group:has(:focus) {
    --color: var(--focus);
}

.form-group:has(:valid) {
    --color: var(--valid);
}

.form-group:has(:valid) span {
    animation: twirl 1s calc(var(--index) * 0.1s);
}

.form-group:has(:placeholder-shown) {
    --color: var(--blur);
}

.form-group:has(:placeholder-shown:not(:focus)) {
    animation: none;
}

label span {
    display: inline-block;
}

form:valid [type="submit"] {
    background: var(--valid);
    color: var(--gray-1);
}

#footer {
    position: absolute;
    bottom: 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--light);
}


@keyframes twirl {
    100% {
        transform: rotateY(360deg);
    }
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(-4%);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(4%);
    }
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: var(--dark-gray);
}

form {
    width: min(90vw, 400px);
    padding: 1.5rem;
    outline: 0.3rem inset var(--transparent-gray);
    display: flex;
    flex-direction: column;
    align-items: center;
    background-image: linear-gradient(142deg, #444 0%, #5559 50%, #5559 65%, #6669 100%);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.form-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 0.5rem;
    padding: 0.5rem;
}

label {
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 1rem;
    padding-right: 0.5rem;
}

input {
    flex-grow: 1;
    width: 100%;
    padding: 0.75rem;
    font-size: 1rem;
    border: 4px solid var(--color);
    border-radius: 4px;
}

button {
    width: 100%;
    max-width: 300px;
    padding: 1rem;
    margin-top: 1rem;
}

#footer {
    position: absolute;
    bottom: 0.5rem;
    width: 100%;
    text-align: center;
    font-size: 0.9rem;
}