body {
    overflow: hidden;
}

main {
    height: 100vh;
    background: linear-gradient(315deg, var(--blue-600), var(--blue-900));
    position: relative;
}

/*.top-layer {*/
/*    position: absolute;*/
/*    top: 0; left: 0;*/
/*    height: 100vh;*/
/*    width: 100%;*/
/*    background: linear-gradient(225deg, #f8cf6a, #2178dd);*/
/*    animation: background-morph 10s infinite;*/
/*}*/

/*@keyframes background-morph {*/
/*    0%, 100% {*/
/*        opacity: 1;*/
/*    }*/
/*    50% {*/
/*        opacity: 0;*/
/*    }*/
/*}*/

.content {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh
}

.auth-wrapper {
    padding: 1rem 2rem;
    background: var(--primary-white);
    border-radius: var(--radius-large);
    width: 95%;
    max-width: 350px;
    margin: 2rem;
}

.auth-wrapper .title {
    --underline-height: .25rem;
    position: relative;
    margin-bottom: calc(2rem + var(--underline-height));
    padding-bottom: 1px;
    text-align: center;
}

.auth-wrapper .title h2 {
    font-weight: 500;
    border: none;
    outline: none;
}

.auth-wrapper .title h2 a {
    text-decoration: none;
    color: initial;
}

.auth-wrapper .title h1 {
    margin-bottom: .5rem;
}

.auth-wrapper .title::after {
    content: '';
    position: absolute;
    height: var(--underline-height);
    width: 5rem;
    background: linear-gradient(to right, var(--blue-500), var(--blue-900));
    bottom: calc(var(--underline-height) * -1);
    left: 50%;
    transform: translateX(-50%);
}

.auth-wrapper .controls {
    margin: 1rem 0 0;
}

.auth-wrapper .controls > a.btn,
.auth-wrapper .controls > button.btn {
    margin-top: 0;
}

.auth-wrapper .controls > a:not(.form-btn) {
    color: initial;
    text-decoration: none;
}

.auth-wrapper .controls {
    display: flex;
    justify-content: space-between;
}