:root {
    font-size: 1.2em;
}

.page-heading {
    display: none;
}

.fancy {
    font-family: monospace;
    animation: sleutelframes 2s ease-in-out infinite, rainbow 5s linear infinite;
    position: relative;
    font-size: 1.5em;
    color: hsl(0deg, 100%, 70%);
    text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.4);
    margin: var(--gap);
}

@keyframes sleutelframes {
    0%, 100% {
        bottom: -.4em;
    }
    50% {
        bottom: .4em;
    }
}

@keyframes rainbow {
    0% {
        filter: hue-rotate(0deg);
    }
    100% {
        filter: hue-rotate(360deg);
    }
}

main {
    width: fit-content;
    height: fit-content;
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: calc(2 * var(--gap));
    margin: var(--gap);
}

.flex-hcenter {
    height: 100%;
    align-items: center;
}

.invalid-password {
    color: red;
}

form > * {
    margin-bottom: var(--smallgap);
}

label {
    display: block;
}