/* reset the default style of element ol and ul */
ol, ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

/* hide the scroll bar */
::-webkit-scrollbar {
    width: 0 !important;
}

::-webkit-scrollbar {
    width: 0 !important;
    height: 0;
}

body {
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    margin: 0;
    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
    display: grid;
    grid-template-columns: 14rem calc(100vw - 14rem);
    /* forbid select globally */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.sidebar {
    width: 14rem;
    height: 100vh;
    overflow: auto;
    background: #304156;
}

.sidebar ul li {
    padding: 1rem;
    position: relative;
}

.sidebar ul li:hover {
    background: #2B3445;
}

.sidebar ul li img {
    width: 1rem;
    margin-right: 1rem;
    filter: drop-shadow(calc(100vw + 100vh) 0 0 #BFCBD9);
    transform: translate(calc(-100vw - 100vh));
}

.sidebar ul li .arrow_down {
    position: absolute;
    right: 0;
    filter: drop-shadow(calc(100vw + 100vh) 0 0 #909399);
}

.sidebar ul li:first-child img {
    filter: drop-shadow(calc(100vw + 100vh) 0 0 #409EFF);
}

.sidebar ul li span {
    font-size: 1rem;
    color: #BFCBD9;
}

.sidebar ul li:first-child span {
    color: #409EFF;
}

.content {
    height: 100vh;
    overflow: auto;
}

.content .navbar {
    height: 3rem;
    padding: 0 0.7rem;
}

.content .navbar .left {
    height: 3rem;
    float: left;
    display: flex;
    align-items: center;
    color: #97A8BE;
}

.content .navbar .left img {
    height: 1.5rem;
    margin-right: 1rem;
    vertical-align: middle;
}

.content .navbar .right {
    height: 3rem;
    float: right;
    display: flex;
    align-items: center;
}

.content .navbar .right .img-container {
    height: 3rem;
}

.content .navbar .right .img-container:nth-child(2):hover {
    background: #f9f9f9;
}

.content .navbar .right .img-container:nth-child(3):hover {
    background: #f9f9f9;
}

.content .navbar .right .img-container:last-child {
    position: relative;
    width: 1rem;
}

.content .navbar .right .img-container img {
    height: 1.25rem;
    margin: calc(1.75rem / 2) 0.5rem;
    filter: drop-shadow(calc(100vw + 100vh) 0 0 #5A5E66);
    transform: translate(calc(-100vw - 100vh));
}

.content .navbar .right .img-container:nth-child(4) img {
    height: 2.5rem;
    width: 2.5rem;
    margin: 0.25rem 0.5rem;
    border-radius: 0.5rem;
    transform: none;
}

.content .navbar .right .img-container:last-child img {
    transform: rotate(-90deg);
    height: 0.5rem;
    margin: auto 0;
    position: absolute;
    bottom: 0.25rem;
}

.content .navbar span {
    vertical-align: middle;
}

.content .tag-container {
    display: flex;
    border: 1px solid #D8DCE5;
}

.content .tag-container .tag {
    margin: 0.3rem;
    padding: 0.3rem 0.5rem;
    font-size: 0.3rem;
    display: flex;
    align-items: center;
}

.content .tag-container .tag-dashboard {
    margin-left: 0.7rem;
    color: white;
    background: #42B983;
}

.content .tag-container .tag-dashboard div {
    width: 0.5rem;
    height: 0.5rem;
    background: white;
    border-radius: 50%;
    margin-right: 0.3rem;
}

.content .tag-container .tag-documentation {
    border: 1px solid #D8DCE5
}

.content .figure-container {
    background: #F0F2F5;
    position: relative;
}

.content .figure-container .github-container {
    position: absolute;
    top: 0;
    right: 0;
}

.content .figure-container .card-container {
    display: flex;
    flex-flow: row wrap;
}

.content .figure-container .card-container .card {
    background: white;
    height: 5rem;
    width: calc((100vw - 36rem) / 4);
    margin: 3rem 2rem 2rem 0;
    padding: 1rem 1.5rem;
    border-radius: 1rem;
}

.content .figure-container .card-container .card:first-child {
    margin-left: 2rem;
}

.content .figure-container .card-container .card .img-container {
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 1rem;
}

.content .figure-container .card-container .card .img-container img {
    width: 3rem;
    transform: translate(calc(-100vw - 100vh));
}

.content .figure-container .card-container .card .img-container:hover img {
    filter: drop-shadow(calc(100vw + 100vh) 0 0 white);
}

.content .figure-container .card-container .card .img-peoples-container:hover {
    background: #40c9c6;
}

.content .figure-container .card-container .card .img-peoples-container img {
    filter: drop-shadow(calc(100vw + 100vh) 0 0 #40c9c6);
}

.content .figure-container .card-container .card .img-message-container:hover {
    background: #36a3f7;
}

.content .figure-container .card-container .card .img-message-container img {
    filter: drop-shadow(calc(100vw + 100vh) 0 0 #36a3f7);
}

.content .figure-container .card-container .card .img-money-container:hover {
    background: #f4516c;
}

.content .figure-container .card-container .card .img-money-container img {
    filter: drop-shadow(calc(100vw + 100vh) 0 0 #f4516c);
}

.content .figure-container .card-container .card .img-shopping-container:hover {
    background: #34bfa3;
}

.content .figure-container .card-container .card .img-shopping-container img {
    filter: drop-shadow(calc(100vw + 100vh) 0 0 #34bfa3);
}

.content .figure-container .card-container .card .text-container {
    width: 5rem;
    height: 5rem;
    float: right;
    font-weight: bold;
}

.content .figure-container .card-container .card .text-container p:first-child {
    color: rgba(0, 0, 0, 0.45);
}

.content .figure-container .card-container .card .text-container p:last-child {
    color: #666666;
}

.content .figure-container .chart-container-one img {
    width: calc(100vw - 18rem);
    margin: 0 2rem;
}

.content .figure-container .chart-container-three {
    padding: 2rem;
    width: calc(100vw - 18rem);
}

.content .figure-container .chart-container-three img {
    width: calc((100vw - 22.6rem) / 3);
}

.content .figure-container .chart-container-three img:nth-child(2) {
    margin: auto 2rem;
}

@media screen and (max-width: 80rem) {
    .content .figure-container .card-container .card {
        width: calc((100vw - 26rem) / 2);
        margin: 0 2rem 2rem 0;
    }

    .content .figure-container .card-container .card:nth-child(odd) {
        margin-left: 2rem;
    }

    .content .figure-container .card-container .card:nth-child(-n+2) {
        margin-top: 3rem;
    }
}

@media screen and (max-width: 46rem) {
    .content .figure-container .card-container .card {
        width: calc((100vw - 28rem) / 2);
        margin: 0 2rem 2rem 0;
        padding: 1rem 2rem;
    }

    .content .figure-container .card-container .card:first-child {
        margin-top: 3rem;
    }

    .content .figure-container .card-container .card:hover .img-container img {
        filter: drop-shadow(calc(100vw + 100vh) 0 0 white);
    }

    .content .figure-container .card-container .card:nth-child(1):hover {
        background: #40c9c6;
    }

    .content .figure-container .card-container .card:nth-child(2):hover {
        background: #36a3f7;
    }

    .content .figure-container .card-container .card:nth-child(3):hover {
        background: #f4516c;
    }

    .content .figure-container .card-container .card:nth-child(4):hover {
        background: #34bfa3;
    }

    .content .figure-container .card-container .card .img-container {
        margin: auto calc((((100vw - 28rem) / 2) - 4.5rem) / 2);
    }

    .content .figure-container .card-container .card .text-container {
        display: none;
    }

    .content .figure-container .chart-container-three img {
        width: calc(100vw - 18rem);
        margin: 1rem 0;
    }

    .content .figure-container .chart-container-three img:nth-child(1) {
        margin-top: 0;
    }

    .content .figure-container .chart-container-three img:nth-child(2) {
        margin: 0;
    }

    .content .figure-container .chart-container-three img:nth-child(3) {
        margin-bottom: 0;
    }
}

@media screen and (max-width: 34rem) {
    .content .navbar .right {
        display: none;
    }

    .content .figure-container .card-container .card {
        width: calc(100vw - 22rem);
        padding: 1rem 2rem;
    }

    .content .figure-container .card-container .card:nth-child(even) {
        margin-left: 2rem;
    }

    .content .figure-container .card-container .card:nth-child(2) {
        margin-top: 0;
    }

    .content .figure-container .card-container .card .img-container {
        margin: auto calc(((100vw - 22rem) - 4.5rem) / 2);
    }

    .content .figure-container .card-container .card .text-container {
        display: none;
    }
}

@media screen and (max-width: 28rem) {
    .content .navbar {
        min-width: 6rem;
        overflow: auto;
    }

    .content .tag-container {
        min-width: 6rem;
        overflow: auto;
    }

    .content .figure-container .github-container {
        display: none;
    }

    .content .figure-container .card-container {
        overflow: auto;
    }

    .content .figure-container .card-container .card {
        min-width: 6rem;
    }

    .content .figure-container .card-container .card .img-container {
        margin: auto 0.75rem;
    }

    .content .figure-container .chart-container {
        overflow: auto;
    }

    .content .figure-container .chart-container img {
        width: 10rem;
    }
}