@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-10px); }
  50% { transform: translateX(10px); }
  75% { transform: translateX(-10px); }
  100% { transform: translateX(10px); }
}
 
.shake-animation {
  animation: shake .2s; /* 抖动的持续时间 */
  animation-iteration-count: 1; /* 抖动的次数，这里设置为无限次 */
}

.error{
    color: red;
}

.btn{
    border: none;
    color:#fff;
}

.btn-bg{
    background: var(--main-bg);
}

.btn-bg:hover{
    background: #093;
}

/* 按钮禁用状态 */
.disable{
    background:#bbcffa;
    color: #666;
}

.margin{
    margin: .5em;
}

.padding{
    padding: .5em;
}

input{
    padding: .6em;
    margin: .5em;
    border-radius: .2em;
    border: 0.5px solid #666;
}

.align-center{
    text-align: center;
    margin: auto;
}

.align-right{
    text-align: right;
    margin:auto;
}

.code{
    width:9rem;
}

.prompt{
    color: blue;
}

/*桌面端*/
@media (min-width: 1080px){
    .register-box{
        display: flex;
        height: 100vh;
        left: 0px;
        right: 0px;
        align-items: center;
        justify-content: center;
    }

    .register{
        margin: auto;
        background: #fff;
        padding: 3em 6em;
        border-radius: .5em;
    }

    input{
        width: 20rem;
    }

    .btn__singup{
        width:20rem;
    }

    .btn__code{
        width:10rem;
    }

    .logo{
        width:10rem;
    }

}

/*移动端*/
@media (max-width: 1080px){
    .register-box{
        width: 100vw;
        height: 100vh;
        background: #fff;
    }

    .register{
        margin: auto;
        background: #fff;
        padding: 3em 1em;
    }

    input, .btn__singup{
        width: 80vw;
    }

    .logo{
        width:45vw;
    }

}