*{margin:0;padding:0;box-sizing:border-box}
body{
  min-height:100vh;
  background:linear-gradient(135deg,#f58529,#dd2a7b,#8134af,#515bd4);
  background-size:400% 400%;
  animation:bg 12s ease infinite;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:system-ui;
}
@keyframes bg{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
.card-wrap{perspective:1200px}
.card3d{
  width:420px;
  position:relative;
  transform-style:preserve-3d;
  transition:.8s;
}
.card3d.flip{transform:rotateY(180deg)}
.form-box{
  position:absolute;
  width:100%;
  backface-visibility:hidden;
  background:rgba(255,255,255,.22);
  backdrop-filter:blur(22px);
  padding:30px;
  border-radius:22px;
  color:#fff;
}
.form-box.back{transform:rotateY(180deg)}
.form-control{border-radius:10px;font-size:16px}
.btn{border-radius:12px;font-weight:600}
.switch-btn{
  background:none;border:none;width:100%;
  margin-top:10px;color:#ffe082;
}

/* MOBILE FULL SCREEN */
@media(max-width:768px){
  body{align-items:stretch;justify-content:flex-start}
  .card-wrap,.card3d{width:100%;height:100vh}
  .form-box{min-height:100vh;border-radius:0}
  .form-control{
  padding: 10px;font-size:25px;}
}