body {
    min-height: 100vh;
    background-color: var(--colour-bg);
    color: var(--colour-text);
    background-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='16' viewBox='0 0 12 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 .99C4 .445 4.444 0 5 0c.552 0 1 .45 1 .99v4.02C6 5.555 5.556 6 5 6c-.552 0-1-.45-1-.99V.99zm6 8c0-.546.444-.99 1-.99.552 0 1 .45 1 .99v4.02c0 .546-.444.99-1 .99-.552 0-1-.45-1-.99V8.99z' fill='%239C92AC' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
}

main {
    position: static;
    padding: 0;
    margin: 0;
}


.content {
    position: absolute;
    top: 20%;
    left: calc(50% - 15em);
    width: 20em;
    border-radius: 1em;
    text-align: center;
    border: 1px solid var(--colour-border-muted);
    background: url("images/workflow-full.png") no-repeat var(--colour-highlight);
    background-size: 10em;
    background-position-x: 50%;
    background-position-y: 1em;
    padding-top: 5em;
}

h2,
hr,
#blazor-error-ui,
.sso-login {
 display: none;
}

form {
    margin: 0 1em 1em 1em;
    padding: 1em;
    border-radius: 1em;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--colour-bg-light);
}

a {
    color: var(--colour-text);
    text-decoration: none;
}

div.form-floating {
    position: relative;
    padding: 0.5em;
}

    div.form-floating label {
        position: absolute;
        left: 1.5em;
        top: -0.1em;
        padding: 0 0.6em 0 0.6em;
        font-size: 0.8em;
        color: var(--colour-text);
        background-color: var(--colour-bg-light); 
    }

    div.form-floating input {
        padding: 0.6em;
        border-radius: 0.3em;
        width: 18em;
        color: var(--colour-text);
        background-color: var(--colour-bg-light);
        border-style: solid; 
    }

button {
    margin-top: 1em;
    padding: 0.6em 1em 0.6em 1em;
    border-radius: 0.3em;
    border: 1px solid var(--colour-border-muted);
    background-color: var(--colour-success);
    width: 16em;
    height: auto;
    font-size: 1em;
    display: inline-block;
}

.login-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation: background-move 180s infinite;
    opacity: 0.1;
}

@keyframes background-move {
    0% { 
        transform: rotate(0deg) scale(1); 
    }
    50% { 
        transform: rotate(180deg) scale(1); 
    }
    100% { 
        transform: rotate(360deg) scale(1); 
    }
}

.login-background div {
    position: absolute;
    font-size: 20vw;
    font-weight: bold;
}

.background-shape1 {
    top: 10%;
    left: 5%;
    animation: shape1-move 3s infinite;
}

@keyframes shape1-move {
    0% { 
        transform: rotate(45deg) scale(1); 
        filter: blur(100px);
        opacity: 0;
    }
    25% { 
        transform: rotate(20deg) scale(1.1); 
        filter: blur(15px);
    }
    50% { 
        transform: rotate(1deg) scale(1.1); 
        filter: blur(0px);
        opacity: 1;
    }
    75% { 
        transform: rotate(-20deg) scale(1.1); 
        filter: blur(15px);
    }
    100% { 
        transform: rotate(45deg) scale(1); 
        filter: blur(100px);
        opacity: 0;
    }
}

.background-shape2 {
    top: 20%;
    left: 80%;
    animation: shape2-move 5s infinite;
}

@keyframes shape2-move {
    0% { 
        transform: rotate(45deg) scale(1); 
        filter: blur(100px);
        opacity: 0;
    }
    25% { 
        transform: rotate(20deg) scale(1.1); 
        filter: blur(15px);
    }
    50% { 
        transform: rotate(1deg) scale(1.1); 
        filter: blur(0px);
        opacity: 1;
    }
    75% { 
        transform: rotate(-20deg) scale(1.1); 
        filter: blur(15px);
    }
    100% { 
        transform: rotate(45deg) scale(1); 
        filter: blur(100px);
        opacity: 0;
    }
}

.background-shape3 {
    top: 70%;
    left: 10%;
    animation: shape3-move 7s infinite;
}

@keyframes shape3-move {
    0% { 
        transform: rotate(45deg) scale(1); 
        filter: blur(100px);
        opacity: 0;
    }
    25% { 
        transform: rotate(20deg) scale(1.1); 
        filter: blur(15px);
    }
    50% { 
        transform: rotate(1deg) scale(1.1); 
        filter: blur(0px);
        opacity: 1;
    }
    75% { 
        transform: rotate(-20deg) scale(1.1); 
        filter: blur(15px);
    }
    100% { 
        transform: rotate(45deg) scale(1); 
        filter: blur(100px);
        opacity: 0;
    }
}

.background-shape4 {
    top: 65%;
    left: 75%;
    animation: shape4-move 11s infinite;
}

@keyframes shape4-move {
    0% { 
        transform: rotate(45deg) scale(1); 
        filter: blur(100px);
        opacity: 0;
    }
    25% { 
        transform: rotate(20deg) scale(1.1); 
        filter: blur(15px);
    }
    50% { 
        transform: rotate(1deg) scale(1.1); 
        filter: blur(0px);
        opacity: 1;
    }
    75% { 
        transform: rotate(-20deg) scale(1.1); 
        filter: blur(15px);
    }
    100% { 
        transform: rotate(45deg) scale(1); 
        filter: blur(100px);
        opacity: 0;
    }
}

.background-shape5 {
    top: 5%;
    left: 55%;
    animation: shape5-move 13s infinite;
}

@keyframes shape5-move {
    0% { 
        transform: rotate(45deg) scale(1); 
        filter: blur(100px);
        opacity: 0;
    }
    25% { 
        transform: rotate(20deg) scale(1.1); 
        filter: blur(15px);
    }
    50% { 
        transform: rotate(1deg) scale(1.1); 
        filter: blur(0px);
        opacity: 1;
    }
    75% { 
        transform: rotate(-20deg) scale(1.1); 
        filter: blur(15px);
    }
    100% { 
        transform: rotate(45deg) scale(1); 
        filter: blur(100px);
        opacity: 0;
    }
}