@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
* {
    margin: 0;
    padding: 0;
    user-select: none;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
body {

    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: #008d45;
    perspective: 1000px;
    transform-style: preserve-3d;
    overflow: hidden;

    background-image: url(/src/img/background.jpg);
    /*background-repeat属性定义了图像的平铺模式*/
    /* background-repeat: repeat; */
    /*默认值，背景图像将在垂直方向和水平方向重复,即全屏平铺*/
    background-repeat: no-repeat;
    /*这个时候就会不重复平铺*/
    background-size:auto 100%;
    /* 指定背景图片大小 */
    background-attachment: fixed;
    /* 设置背景图像是否固定或者随着页面的其余部分滚动。 */
}
.card {
    background: white;
    height: 380px;
    width: 300px;
    margin: auto;
    border-radius: 5px;
    padding: 20px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-style: preserve-3d;
}
.card .content {
    color: #202020;
    text-align: center;
    transform-style: preserve-3d;
}
.content .user {
    height: 100px;
    width: 100px;
    background: #008d45;
    border: 1px solid #1affc9;
    border-radius: 50%;
    margin: 10px auto;
    transform: translateZ(50px);
}
.content .user img {
    border-radius: 50px;
    height: 100%;
}
.user .fa-user {
    color: white;
    font-size: 40px;
    line-height: 100px;
}
.content header {
    margin: 20px 0;
    font-size: 32px;
    font-weight: 600;
    transform: translateZ(50px);
}
.content .follow-us {
    font-size: 12px;
    font-weight: 600;
    transform: translateZ(50px);
}
.content .icons {
    margin: 20px 0 10px 0;
    transform: translateZ(50px);
}
.icons a {
    margin: 0 2px;
}
.icons a span {
    height: 45px;
    width: 45px;
    background: #008d45;
    border: 1px solid #008d45;
    line-height: 44px;
    border-radius: 50%;
    color: white;
    font-size: 20px;
}
tate {
    transform: rotate(-180deg);
}
input {
    display: none;
}
#mytitle {
    position: absolute;
    color: #000000;
    font-size: 14px;
    padding: 4px;
    background: rgba(0, 141, 69, 0.8);
    border-radius: 5px;
    z-index: 999;
}

@keyframes fadenum{

    0%{
        opacity: 0;
    }
    20%{
        opacity: 0.8;
        border-radius: 50px;
    }
    50%{
        opacity: 1;
        border-radius: 100px;
    }
    80%{
        opacity: 0.8;
        border-radius: 80px;
    }
    100%{
        opacity: 0;
        border-radius: 0px;
    }

}
.alert {
    position : fixed;
    margin : 0 auto;
    left : 0;
    right : 0;
    top : 5%;
}