*{padding:0;margin:0;user-select:none}
body{display:flex;justify-content:center;align-items:center;height:100vh;background-color:#f8f9ff}
ul{list-style:none}
.title{
    display:flex;
    flex-direction:column;
    align-items:center;
    width:1000px
    
}
.container{

    display:flex;
    flex-direction:column;
    align-items:center;
    width:1000px;
    
}
.container h1{    
    display:flex;
    flex-direction:column;
    align-items:center;
    font-size: 50px;
    padding:80px;
}

.container .content{display:flex;flex-wrap:wrap}
.container .content li{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    align-items:center;
    width:160px;
    height:160px;
    padding:10px;
}
    .container .content li i{
        display:flex;justify-content:center;align-items:center;width:160px;height:160px;border-radius:8px;font-size:80px;color:#646b8a;background-color:#fff;cursor:pointer;transition:all .3s;box-shadow:0 16px 32px rgba(90,100,130,0.1)
    }
    .container .content li i:hover{color:#6b5bfd;transform:scale(1.2)}
    .container .content li p{font-size:13px;color:#cdd5f7}
    .container .pagination{display:flex;align-items:center;height:50px;margin:30px;border-radius:8px;background-color:#fff;box-shadow:0 16px 32px rgba(90,100,130,0.1)}
    .container .pagination li{display:flex;justify-content:center;align-items:center;width:25px;height:25px;margin:10px;font-size:14px;border-radius:5px;transition:all .3s}
    .container .pagination li.page-btn{color:#cdd5f7;font-size:22px}
    .container .pagination li.page-btn.isClick{color:#646b8a;cursor:pointer}
    .container .pagination li.page-btn.isClick:hover{color:#fff;background-color:#6b5bfd}.container .pagination li.page-number{color:#646b8a;cursor:pointer}
    .container .pagination li.page-number:hover{color:#fff;font-weight:bold;background-color:#6b5bfd}.container .pagination li.page-number.active{color:#fff;font-weight:bold;background-color:#6b5bfd;cursor:default}
    .container .pagination li.page-dot{color:#cdd5f7;font-size:18px;cursor:pointer}.container .pagination li.page-dot:hover{color:#6b5bfd}
    .container .pagination li.page-dot::after{content:"more_horiz"}
    .container .pagination li.page-dot.page-dot-prev:hover::after{content:"first_page"}.container .pagination li.page-dot.page-dot-next:hover::after{content:"last_page"}