main { position: absolute; top: 2rem; left: 50%; transform: translate(-50%, 0); } .loader { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .loader { margin: 6rem 0 0; } .error { color: #FFFAAA; margin: 1rem 0; } label { align-items: center; display: flex; flex-direction: column; font-size: 1.6rem; } label span { text-shadow: 1px 1px 2px rgba(0,0,0,0.8); } input { margin: 1rem 0 0; font-size: 1.6rem; font-weight: 300; padding: 0.8rem 1rem; color: white; border: 1px solid rgba(255, 255, 255, 0.05); background: rgba(255, 255, 255, 0.05); transition: all 0.3s; box-shadow: 1px 1px 2px rgba(0,0,0, 0.3); -moz-appearance:none; -webkit-appearance:none; outline: none; } input:focus { border: 1px solid transparent; background: rgba(255, 255, 255, 0.08); } ul { padding: 0; margin: 1rem 0 2rem; } ul li { padding: 0.6rem 1rem; margin: 1px 0; line-height: 1.4rem; display: flex; justify-content: space-between; align-items: center; align-content: space-between; text-shadow: 1px 1px 2px rgba(0,0,0,0.8); background: rgba(255, 255, 255, 0.08); box-shadow: 0 0 2px rgba(0,0,0, 0.3); box-sizing: border-box; } ul li:hover, ul li:active, ul li:focus { background: rgba(255, 255, 255, 0.1); } ul li a { margin: 0 0.6rem 0 0; text-decoration: none; color: white; } ul li span { opacity: 0.5; } body { margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial; font-weight: 300; background-size: cover; background-attachment: fixed; background-image: -webkit-radial-gradient(ellipse farthest-corner at top, #661141, #000000); background-image: radial-gradient(ellipse farthest-corner at top, #661141, #000000); color: white; }