*{ padding:0; margin:0; box-sizing:border-box;}
html{ font-size:62.5%;}
body{ display:flex; justify-content:center; align-items:center; height:100vh; background-image:linear-gradient(45deg, #ffe9e8, #fffae7, #eaf3fd); font-family:"微软雅黑";
}
input { border:none; outline:none; font-family:"微软雅黑";}
input[type="checkbox"] { accent-color:#666;}
input[type="checkbox"]:checked {
  outline: 3px solid #666;
  outline-offset: 1px;
}

/*-------------------------
背景四个圈圈转动
--------------------------*/
.bg-animation {
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:100vh;
  width:100%;
  z-index:-1;
  overflow:hidden;
}
.top{
  position:absolute; max-height:80rem; max-width:80rem; height:100%; width:100%; border-radius:50%;
  background-image: linear-gradient(80deg, #ff7336, #fffbe9);/*转动背景圈圈*/
  filter: blur(40px);
  animation:bottom 30s infinite;
}
.right {
  position:absolute; right:0;
  max-height:50rem; max-width:50rem; height:100%; width:100%; border-radius:50%;
  background:linear-gradient(80deg, #4a6390, #b9cadf);/*转动背景圈圈*/
  filter:blur(30px);
  animation:right 30s infinite;
}
.bottom {
  position:absolute; right:0; max-height:50rem; max-width:50rem; height:100%; width:100%; border-radius: 50%;
  background-image: linear-gradient(80deg, #ffca76, #eede94);/*转动背景圈圈*/
  filter: blur(2rem);
  animation: top 30s infinite;
}
.left {
  position:absolute; max-height:50rem; max-width:50rem; width:100%; height:100%; left:0; border-radius:50%;
  background-image: linear-gradient(80deg, #f14536, #ff8981);/*转动背景圈圈*/
  filter:blur(6rem);
  animation:left 30s infinite;
}
@keyframes top {
  0%,
  100% {
    bottom: -10rem;
  }
  80% {
    bottom: 50rem;
  }
}
@keyframes right {
  0%,
  100% {
    right: -10rem;
  }
  80% {
    right: 80rem;
  }
}
@keyframes bottom {
  0%,
  100% {
    top: -10rem;
  }
  80% {
    top: 50rem;
  }
}
@keyframes left {
  0%,
  100% {
    left: -10rem;
  }
  80% {
    left: 80rem;
  }
}

/*-------------------------
主体内容
--------------------------*/
.container {
  height: 70vh;
  width: clamp(45rem, 52rem, 40%);
  height: clamp(60rem, 80vh, 65rem);
  position: absolute;
  z-index: 2;
}
/*****表单*****/
form.login {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to right bottom,
    rgba(255, 255, 255, 0.6),
    rgba(255, 255, 255, 0.1)
  );
  z-index: 3;
  backdrop-filter: blur(1rem);
  border-radius: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 2rem;
  font-size: 2rem;
  position: absolute;
  border-bottom-left-radius: 20rem;
  border-bottom-right-radius: 20rem;
  box-shadow: 0 1.5rem 0 rgba(255, 255, 255, 0.61),
    inset 0 -1.5rem rgba(238, 238, 238, 0.692), 0 4.5rem 0 rgba(0, 0, 0, 0.05);
}
.ball {
  position: absolute;
  background: linear-gradient(
    to right bottom,
    rgba(255, 255, 255, 0.9),
    rgba(255, 255, 255, 0.1)
  );
  width: 10rem;
  height: 8rem;
  top: 0;
  border-bottom-left-radius: 10rem;
  border-bottom-right-radius: 10rem;
  box-shadow: 0 0.5rem 0 rgba(255, 255, 255, 0.61),
    inset 0 -0.5rem rgba(238, 238, 238, 0.692), 0 1.5rem 0 rgba(0, 0, 0, 0.05);
}
.ball ion-icon.logo {
  position: absolute;
  top: 5%;
  left: 5%;
width:97px; height:72px; background:url("../img/logo.png") center center no-repeat; background-size:75% 75%;
}
.formTitle{
  padding-bottom:20px; color:#333; font-size:2em; font-weight:700; text-align:center;
    text-transform: uppercase;
    text-rendering: optimizeLegibility;
    letter-spacing: 0.15em;
    text-shadow: 0.3px 0px 0 #7f7f7f, -0.3px 0.3px 1px #858585, -0.6px 0.6px 1px #8b8b8b, -0.9px 0.9px 1px #919191, -1.2px 1.2px 1px #979797, -1.5px 1.5px 1px #9d9d9d, -1.8px 1.8px 1px #a3a3a3, -2.1px 2.1px 1px #a9a9a9, -2.4px 2.4px 1px #afafaf, -2.7px 2.7px 1px #b5b5b5, -3px 3px 1px #bbbbbb, -3.3px 3.3px 1px #c1c1c1, -3.6px 3.6px 1px #c7c7c7, -3.9px 3.9px 1px #cdcdcd;
}
.formBox {
  position: relative;
  height: 5rem;
  width: 80%;
}
.inputStyle {
  width: 100%;
  border: none;
  outline: none;
  height: 100%;
  padding: 0 45px;
  font-size: 1.4rem;
  color: #777;
  border-bottom: 4px solid #ccc;
  transition: all 0.3s;
  background: linear-gradient(
    to right bottom,
    rgba(255, 255, 255, 0.9),
    rgba(255, 255, 255, 0.1)
  );
  border-radius: 1rem;
}
.formBox input:is(:focus, :valid) {
  border-bottom-color: #666;
  font-size: 1.6rem;
  color: #666;
}
.formBox input:is(:focus, :valid) ~ .i {
  color:#666;
}
.formBox .i {
  font-size: 2rem;
  position: absolute;
  top: 50%;
  left:15px;
  transform: translateY(-50%);
  color:#999;
}
.formBox img{ position:absolute; right:5px; top:3px;}
/*-------------------------
提交按钮
--------------------------*/
.button, .btn-secondary {
	margin-top:1.5rem;
	width: 80%;
	position: relative;
	cursor: pointer;
	padding: .6em 2em;
	letter-spacing: .1em;
	text-align: center;
	color: #ffffff;
	font-size: 1.8rem;
	background:linear-gradient(45deg, #e64b0e, #e64b0e, #e6790e, #e6920e, #e6a60e);
	background-size: 1100%;
	border-radius: 8px;
	border: none;
	transform: scaleX(1);
	transition: background-position 1s cubic-bezier(.455,.03,.515,.955),-webkit-transform .3s cubic-bezier(.175,.885,.32,1.275);
	transition: transform .3s cubic-bezier(.175,.885,.32,1.275),background-position 3s cubic-bezier(.455,.03,.515,.955);
	transition: transform .3s cubic-bezier(.175,.885,.32,1.275),background-position 3s cubic-bezier(.455,.03,.515,.955),-webkit-transform .3s cubic-bezier(.175,.885,.32,1.275);
}
.button {
	transition: bottom .3s cubic-bezier(.175,.885,.32,1.275),background-position 3s cubic-bezier(.455,.03,.515,.955),-webkit-transform .3s cubic-bezier(.175,.885,.32,1.275);
	transition: transform .3s cubic-bezier(.175,.885,.32,1.275),bottom .3s cubic-bezier(.175,.885,.32,1.275),background-position 3s cubic-bezier(.455,.03,.515,.955);
	transition: transform .3s cubic-bezier(.175,.885,.32,1.275),bottom .3s cubic-bezier(.175,.885,.32,1.275),background-position 3s cubic-bezier(.455,.03,.515,.955),-webkit-transform .3s cubic-bezier(.175,.885,.32,1.275);
}
.button, .button .btn-secondary {
	background-position: 0 50%;
	bottom: 0;
}
.button .btn-secondary {
	left:50%;
	width: 90%;
	margin-left:-45%;
	position: absolute;
	filter: blur(16px);
	opacity: .9;
	z-index: -1;
	transform: scale3d(.9, .9, 1);
	transition: bottom .3s cubic-bezier(.175,.885,.32,1.275),background-position 3s cubic-bezier(.455,.03,.515,.955),-webkit-transform .3s cubic-bezier(.175,.885,.32,1.275),-webkit-filter .3s cubic-bezier(.175,.885,.32,1.275);
	transition: transform .3s cubic-bezier(.175,.885,.32,1.275),filter .3s cubic-bezier(.175,.885,.32,1.275),bottom .3s cubic-bezier(.175,.885,.32,1.275),background-position 3s cubic-bezier(.455,.03,.515,.955);
	transition: transform .3s cubic-bezier(.175,.885,.32,1.275),filter .3s cubic-bezier(.175,.885,.32,1.275),bottom .3s cubic-bezier(.175,.885,.32,1.275),background-position 3s cubic-bezier(.455,.03,.515,.955),-webkit-transform .3s cubic-bezier(.175,.885,.32,1.275),-webkit-filter .3s cubic-bezier(.175,.885,.32,1.275);
}
.button:focus, .button:hover {
	transform: scale3d(1.1, 1.1, 1);
	background-position: 100% 50%;
	outline: none;
	bottom: 2px;
}
.button:focus .btn-secondary, .button:hover .btn-secondary {
	background-position: 100% 50%;
	filter: blur(25px);
	bottom: -5px;
}
::selection {
  color:#ffffff;
  background:#cdd5db;
}
/*登录报错*/
.post-msg { position:absolute; bottom:50px; left:50%; width:50%; margin-left:-25%; padding:5px 20px; font-size:18px; font-weight:500; color:#ff0000; text-align:center; opacity:.5; border:none; background:none;}