<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "å¾®è½¯é›…é»‘" sans-serif;
}

body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #222;
}

body img{
    max-width: 128px;
}

.container{
    position: relative;
    max-width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(300px 1fr));
    grid-template-rows: minmax(100px auto);
    grid-auto-flow: dense;
    margin: 40px;
    grid-gap:10px
}

.container .box{
    background: #333;
    padding: 20px;
    display: grid;
    place-items: center;
    font-size: 20px;
    text-align: center;
    color: #fff;
    transition: .5s;
}

.container .box:hover{
   background: #e91e63;
}

.container .box img{
    position: relative;
    max-width: 100px;
    margin-bottom: 10px;
}

/* columnè®¾ç½®æ‰€å&nbsp;çš„åˆ—å®½ï¼Œrowè®¾ç½®æ‰€å&nbsp;çš„åˆ—é«˜ */
/* æ´—æ‰‹ */
.container .box:nth-child(1) {
    grid-column: span 2;
    grid-row: span 1;
}
/* æ„Ÿå†’ */
.container .box:nth-child(2) {
    grid-column: span 1;
    grid-row: span 2 ;
}
/* é£žæœº */
.container .box:nth-child(3) {
    grid-column: span 2;
    grid-row: span 2;
}
/* åŒ»ç–—åŒ… */
.container .box:nth-child(4){
    grid-column: span 2;
    grid-row: span 4;
}
/* å£ç½© */
.container .box:nth-child(5) {
    grid-column: span 1;
    grid-row: span 1;
}
/* æ–‡å­— */
.container .box:nth-child(6) {
    grid-column: span 3;
    grid-row: span 2;
}
/* åšé¥­ */
.container .box:nth-child(7){
  grid-column: span 1;
  grid-row: span 2;
}
/* å°çŒ« */
.container .box:nth-child(8){
     grid-column: span 1;
     grid-row: span 2;
}

@media(max-width:991px){
    .container{
        grid-template-columns: repeat(auto-fill,mainmax(50%,1fr));
        grid-template-rows: minmax(auto,auto);
    }
    .container .box{
        grid-column: unset !important;
        grid-row: unset !important;
    }
}

.title{     
    font-family: "league-Gothic",Courier;
    font-size: 60px;
    text-transform: uppercase;
    color: #fff;
    text-shadow:0 0 20px #fefcc9,
    10px -10px 30px #feec85,
    -20px -20px 40px #ffae34,
    20px -40px 50px #ec760c,
    -20px -60px 60px #cd4606,
    0 -80px 70px #973716,
    10px -90px 80px #451b0e;
}

.sub-title{
    font-size: 20px;
    text-shadow: 0 0 10px #fff,
    0 0 20px #fff,
    0 0 30px #fff,
    0 0 40px #ff00de,
    0 0 70px #ff00de,
    0 0 80px #ff00de,
    0 0 100px #ff00de,
    0 0 150px #ff00de;
}</pre></body></html>