*{margin:0;padding:0;box-sizing:border-box;font-family:Poppins,sans-serif}body{overflow:hidden}section{display:flex;justify-content:center;align-items:center;min-height:100vh;background:linear-gradient(45deg,#f0f0f0,#fff)}section .color{position:absolute;filter:blur(150px)}section .color:first-child{top:-350px;width:600px;height:600px;background:hsla(0,0%,100%,.8);transform:rotate(45deg)}section .color:nth-child(2){bottom:-150px;left:100px;width:500px;height:500px;background:hsla(0,0%,94%,.8);transform:rotate(45deg)}section .color:nth-child(3){bottom:50px;left:100px;width:300px;height:300px;background:hsla(0,0%,90%,.8);transform:rotate(45deg)}.box{position:relative}.box .square{position:absolute;backdrop-filter:blur(5px);box-shadow:0 25px 45px rgba(0,0,0,.1);border-bottom:1px solid hsla(0,0%,100%,.5);border-right:1px solid hsla(0,0%,100%,.5);border-color:hsla(0,0%,100%,.5) hsla(0,0%,100%,.2) hsla(0,0%,100%,.2) hsla(0,0%,100%,.5);border-style:solid;border-width:1px;background:hsla(0,0%,100%,.1);border-radius:10px;animation:animate 10s linear infinite;animation-delay:calc(-1s * var(--i));transform:rotate(45deg)}@keyframes animate{0%,to{transform:translateY(-40px) rotate(45deg)}50%{transform:translateY(40px) rotate(45deg)}}.box .square:first-child{top:-50px;right:-60px;width:100px;height:100px}.box .square:nth-child(2){top:150px;left:-100px;width:120px;height:120px;z-index:2}.box .square:nth-child(3){bottom:50px;right:-60px;width:80px;height:80px;z-index:2}.box .square:nth-child(4){bottom:-80px;left:100px;width:50px;height:50px}.box .square:nth-child(5){top:-80px;left:140px;width:60px;height:60px}.container{width:400px;min-height:400px;background:hsla(0,0%,100%,.1);border-radius:10px;display:flex;justify-content:center;align-items:center;backdrop-filter:blur(5px);box-shadow:0 25px 45px rgba(0,0,0,.1);border-bottom:1px solid hsla(0,0%,100%,.5);border-right:1px solid hsla(0,0%,100%,.5);border-color:hsla(0,0%,100%,.5) hsla(0,0%,100%,.2) hsla(0,0%,100%,.2) hsla(0,0%,100%,.5);border-style:solid;border-width:1px}.container,.form{position:relative}.form{width:100%;height:100%;padding:40px}.form h2{position:relative;color:#333;font-size:24px;font-weight:600;letter-spacing:1px;margin-bottom:40px}.form h2:before{content:"";position:absolute;left:0;bottom:-10px;width:80px;height:4px;background:#333}.form .inputBox{width:100%;margin-top:20px}.form .inputBox input,.form .inputBox select{width:100%;background:hsla(0,0%,100%,.2);outline:none;padding:10px 20px;border-radius:35px;border:1px solid hsla(0,0%,100%,.5);border-top:none;border-left:none;border-color:hsla(0,0%,100%,.5) hsla(0,0%,100%,.2) hsla(0,0%,100%,.2) hsla(0,0%,100%,.5);border-style:solid;border-width:1px;font-size:16px;letter-spacing:1px;color:#333;box-shadow:0 5px 15px rgba(0,0,0,.05);appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='%23333' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");background-position:right 15px center;background-repeat:no-repeat;background-size:12px}.form .inputBox input::placeholder,.form .inputBox select option{color:#666}.form .inputBox select:focus{background:hsla(0,0%,100%,.8);color:#333}.form .inputBox input[type=submit]{background:#fff;color:#333;max-width:100px;cursor:pointer;margin-bottom:20px;font-weight:600}.forget{margin-top:5px;color:#333}.forget a{color:#333;font-weight:500}