body{
margin:0;
font-family:Arial,sans-serif;
background:#eef0f5;
display:flex;
flex-direction:column;
align-items:center;
}
h1{
margin-top:40px;
margin-bottom:30px;
font-size:42px;
}
.grid{
display:grid;
grid-template-columns:repeat(4,140px);
gap:18px;
}
.card{
width:140px;
height:140px;
border-radius:24px;
display:flex;
align-items:center;
justify-content:center;
text-decoration:none;
color:#fff;
font-size:56px;
box-shadow:0 10px 20px rgba(0,0,0,.15);
transition:.2s;
}
.card:hover{transform:scale(1.05);}

.card:nth-child(1){background:#e1306c;}
.card:nth-child(2){background:#000;}
.card:nth-child(3){background:#1d1d38;}
.card:nth-child(4){background:#ff0000;}
.card:nth-child(5){background:#1877f2;}
.card:nth-child(6){background:#000;}
.card:nth-child(7){background:#9146ff;}
.card:nth-child(8){background:#48ff00;color:#000;}
.card:nth-child(9){background:#179cde;}
.card:nth-child(10){background:#ff6a00;}
.card:nth-child(11){background:#e60023;}
.card:nth-child(12){background:#0a66c2;}
.card:nth-child(13){background:#1db954;}
.card:nth-child(14){background:#5865f2;}
.card:nth-child(15){background:#333;}
.card:nth-child(16){background:#fffc00;color:#000;}
.card:nth-child(17){background:#e60023;}
.card:nth-child(18){background:#3f516d;}

.loading{
margin:35px;
font-size:22px;
animation:pulse 1s infinite;
}
@keyframes pulse{
50%{opacity:.4;}
}

@media(max-width:700px){
.grid{grid-template-columns:repeat(2,140px);}
}