*,::before,::after{margin:0;padding:0;box-sizing:border-box;font-family:"Source Sans Pro",sans-serif}html,body{height:100%;width:100%}body{display:grid;justify-content:center;align-items:center;background:#1b1b1b}.container{padding:150px 120px;display:grid;align-content:center;border-radius:6px;animation:appear 2s forwards}input{text-align:center}form{display:grid;justify-items:center;row-gap:10px}input.login_ui,button.login_ui{font-size:1.1rem;padding:.75rem 1.5rem;background-color:#ffffff20;color:#ffffffaa;text-align:center!important;border:none;border-radius:2rem}input.login_ui::placeholder{color:#ffffff80;text-align:center!important;letter-spacing:0}input.login_ui[type="password"]{letter-spacing:.1rem}input.login_ui:focus{text-align:center;color:#fff;outline:none}button.login_ui{margin-top:1rem;padding:.75rem 2.5rem;text-align:center;background-color:#fff;color:#bc375c;font-weight:bold;cursor:pointer;transition:background-color .4s}button.login_ui:hover{background-color:#ffffffcc}h1{text-align:center}h3{margin-bottom:10px;text-align:center}.logo{margin:0 auto 1rem;position:relative;width:3rem;height:3rem;background-color:#ffffff80;border-radius:.2rem;animation:appear 1s forwards}.logo::before{content:"";position:absolute;left:0;bottom:0;height:80%;width:80%;background-color:#ffffff80;border-radius:.2rem;transform-origin:left bottom;animation:logo1 1s forwards}.logo::after{content:"";position:absolute;right:0;bottom:0;height:80%;width:80%;background-color:#ffffff80;border-radius:.2rem;transform-origin:right bottom;animation:logo2 1s forwards}@keyframes appear{from{opacity:0;transform:translateY(2rem)}to{opacity:1;transform:translateY(0)}}@keyframes logo1{from{transform:rotateZ(0deg)}to{transform:rotateZ(-19deg)}}@keyframes logo2{from{transform:rotateZ(0deg)}to{transform:rotateZ(19deg)}}@media screen and (min-width: 426px){.container{box-shadow:1px 0 8px rgba(0,0,0,.5),5px 8px 8px rgba(0,0,0,.3)}}