.invitation-main { @extend %background-taiga; align-content: center; align-items: center; background-size: cover; display: flex; flex: 1; justify-content: center; z-index: 999; .invitation-container { align-items: center; display: flex; flex-direction: column; } .avatar { align-items: center; display: flex; flex-direction: column; .person-name { @extend %large; @extend %light; color: $white; } img { margin-bottom: .5rem; width: 50px; } } .invitation-text { @extend %larger; @extend %light; color: $white; text-align: center; .project-name { @extend %xxlarge; display: block; text-transform: uppercase; } } .invitation-form { display: flex; flex-basis: 100%; width: 100%; fieldset { margin-bottom: .5rem; } input:focus { +.forgot-pass { opacity: 0; transition: opacity .5s linear; } } .forgot-pass { @extend %small; color: $gray-light; opacity: 1; position: absolute; right: 1rem; top: .5rem; transition: all .3s linear; &:hover { color: $grayer; transition: color .3s linear; } } } .login-form, .register-form { flex: 1; padding: 1rem 3rem; text-align: center; .form-header { @extend %large; @extend %light; color: $white; } } .register-form { fieldset { &:last-child { margin-bottom: 1rem; } } } .button-blackish { &:hover { background: $primary; } } .login-form { border-right: 1px solid rgba($white, .3); } }