body {
font-family: "Comic Sans MS", "Poppins", cursive;
background: linear-gradient(135deg, #fff0f7, #e0f7ff);
padding: 20px;
}
h1 {
text-align: center;
font-size: 32px;
margin-bottom: 25px;
color: #ff7aa2;
text-shadow: 2px 2px #ffe1eb;
}
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 25px;
max-width: 900px;
margin: auto;
background: #ffffff;
padding: 25px;
border-radius: 25px;
box-shadow: 0 10px 20px rgba(255, 170, 200, 0.25);
}
.column {
display: flex;
flex-direction: column;
gap: 15px;
align-items: center;
}
.word {
width: 150px;
padding: 12px;
background: #ffd6e7;
border: 2px solid #ffb7d2;
font-size: 18px;
font-weight: bold;
cursor: pointer;
border-radius: 18px;
text-align: center;
color: #a64d79;
transition: 0.2s ease;
box-shadow: 0 4px 10px rgba(255, 183, 210, 0.5);
}
.word:hover {
background: #ffc2dc;
transform: scale(1.05) rotate(-1deg);
}
.word.selected {
background: #fff1a8;
border-color: #ffd24d;
}
.pic-box {
width: 150px;
height: 150px;
background: #f0fbff;
border: 3px dashed #b6e7ff;
border-radius: 25px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: 0.2s ease;
box-shadow: inset 0 0 10px rgba(182, 231, 255, 0.6);
}
.pic-box img {
width: 95px;
height: 95px;
object-fit: contain;
}
.pic-box:hover {
transform: scale(1.05) rotate(1deg);
background: #fff7fd;
}
.pic-box.correct {
border-color: #9be7a1;
background: #ebfff0;
}
.pic-box.wrong {
border-color: #ff9a9a;
background: #fff0f0;
}