*{ margin: 0; padding: 0; } body{ display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0; color: #fff; font-family: 'Source Sans Pro'; font-size: 16px; & > #WRAPPER{ display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0; background-color: #36393e; } } // LOGIN LAYOUT body > #WRAPPER.login{ display: flex; flex-direction: row; justify-content: space-around; align-items: center; background: url('https://discordapp.com/assets/fa7ba7a4c3d8665d3343fee590382bb9.jpg') center center no-repeat; background-size: 100% auto; & > .login-box{ display: flex; position: absolute; width: 39.5em; // height: 24.5em; border-radius: 5px / 5px; flex-direction: row; justify-content: stretch; align-items: stretch; flex-wrap: nowrap; overflow: hidden; // blur background hack &:before{ content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('https://discordapp.com/assets/fa7ba7a4c3d8665d3343fee590382bb9.jpg') center center no-repeat; background-size: 100% auto; background-attachment: fixed; -webkit-filter: blur(.3em); -moz-filter: blur(.3em); -o-filter: blur(.3em); -ms-filter: blur(.3em); filter: blur(.3em); z-index: 0; } z-index: 100; & > div.icon{ flex: 0 1 14em; background-color: rgba(221, 221, 221, 0.9); z-index: 101; } & > div.form{ flex: 1 0 0; display: flex; position: relative; padding: 2em; flex-direction: row; justify-content: stretch; align-content: flex-start; flex-wrap: wrap; background-color: rgba(30, 30, 30, 0.9); z-index: 101; & h3{ display: block; margin: auto; margin-bottom: 1em; text-transform: uppercase; font-weight: bold; } & label{ flex: 100%; display: block; color: #949494; font-weight: bold; font-size: .6em; margin-bottom: 1.5em; margin-top: 1.2em; letter-spacing: .2em; &.invalid{ color: #f04747; } &.link{ color: #5e5e5e; transition: color .2s ease-in-out; cursor: pointer; &:hover{ color: #fff; } } } & button{ display: block; flex: 100%; padding: 1.5em 1em; margin-top: 1.5em; margin-bottom: .5em; } & > span{ display: block; margin: .5em 0; color: #666; font-size: .8em; } & hr{ display: block; position: relative; width: 100%; height: 2px; margin: .5em 0; border: none; background-color: #333; } } } }