html {
    /* 渐变底色只给 html：body 若不透明会盖住 z-index:-1 的粒子层 */
    background: radial-gradient(
            at center, #e9ecef, #e9ecef
    );
}

html,
body {
    height: 100%;
    width: 100%;
    /*background-color: #d3d3d3;*/
}

body {
    background: transparent;
}

.col {
    flex-grow: 0;
    flex-basis: auto;
}
.jumbotron {
    width: 70%;
    margin-left: 15%;
}
.lead {
    font-size: 40px;
    text-align: center;
}
#groups {
    width: 100%;
    margin: 0;
}
#Learn_more {
    margin-top: 30px;width: 135px;height: 50px;float: left
}
#Login_out {
    width: 135px;height: 50px; margin-top: 30px;margin-left:50px;float: left
}
#Login_in {
    width: 135px;height: 50px; margin-top: 30px;float: left
}
#Register {
    margin-top: 30px;margin-left:50px;width: 135px;height: 50px;float: left
}

/* 移动端 */
@media screen and (max-width: 767px) {
    .rounded {
        width: 100px;
    }
    #h1 {
        font-size:2.5rem;
    }
    #lead {
        padding: 1%;
        font-size: 20px;
    }
    #jumbotron {
        padding: 0;
    }
    #Login_out {
        float: none;
    }
    #Learn_more {
        float: none;
    }
    #Login_in {
        float: none;
    }
    #Register {
        float: none;
    margin-left:0;
}


}