@charset "utf-8";

* {
    margin: 0;
    padding: 0;
    list-style-type: none;
}


html,
body,
#app {
    width: 100%;
    height: 100%;
}

html {
    font-size: calc(100vw / 750 * 100);
}

body {
    font-size: .16rem;
}


/* 普通主题下面的变量 */
:root {
    --primaryColor: #2999FB;
}

/* 暗色主题的变量 */
/* :root[theme="dark"] {
    --primaryColor: #39393C;
} */


.flex-row {
    display: flex;
    flex-direction: row;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

.j-c {
    justify-content: center;
}

.j-s-a {
    justify-content: space-around;
}

.j-s-b {
    justify-content: space-between;
}

.j-s-e {
    justify-content: space-evenly;
}

.a-c {
    align-items: center;
}

.flex-1 {
    flex: 1;
    overflow: auto;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-nowrap {
    flex-wrap: nowrap;
}



/* 
 * 媒体查询
 为了防止移动端的页面在PC端打开的时候变得很大，这个时候要用响应式布局限定#app的大小
*/


@media only screen and (min-width:769px) {
    html {
        font-size: calc(768px / 750 * 100);
    }

    #app {
        width: 768px;
        margin: auto;
    }

    body{
        background-image: linear-gradient(135deg,#fbed96,#abecd6);
        background-attachment: fixed;
        background-size: 100% 100%;
    }
}