body {
margin: 0;
font-family: Verdana, sans-serif;
background: linear-gradient(135deg, #0f0f0f, #3a3a3a);
color: white;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.container {
max-width: 900px;
width: 90%;
background: #111;
border-radius: 20px;
padding: 20px;
box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}

h1 {
text-align: center;
font-size: 2em;
margin-bottom: 10px;
}

.emoji {
font-size: 40px;
text-align: center;
animation: pulse 1.5s infinite;
cursor: pointer;
}

@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 20px;
margin-top: 20px;
}

.card {
background: #222;
border: 1px solid #fff;
border-radius: 10px;
padding: 15px;
text-align: center;
transition: transform 0.3s;
}

.card:hover {
transform: scale(1.05);
}

@media screen and (max-width: 600px) {
h1 {
font-size: 1.5em;
color: #ffdfba;
}
.card {
background: #333;
border-color: #ffdfba;
}
}
span{
    color: yellow;
}