body{
margin:0;
font-family:'Baloo 2', cursive;
text-align:center;
background: linear-gradient(135deg,#ff9a9e,#fad0c4);
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
height:100vh;
overflow:hidden;
}

/* STARS */
.star{
position:absolute;
width:6px;
height:6px;
background:white;
border-radius:50%;
opacity:0.8;
animation: twinkle 2s infinite alternate;
z-index:0;
}

@keyframes twinkle{
from{opacity:0.3;}
to{opacity:1;}
}

/* CLOUD */
.cloud{
position:absolute;
width:120px;
height:60px;
background:white;
border-radius:50px;
opacity:0.9;
animation:cloudMove 40s linear infinite;
z-index:0;
}

.cloud::before,
.cloud::after{
content:'';
position:absolute;
background:white;
width:70px;
height:70px;
border-radius:50%;
}

.cloud::before{ top:-30px; left:10px; }
.cloud::after{ top:-20px; right:10px; }

@keyframes cloudMove{
0%{transform:translateX(-150px);}
100%{transform:translateX(110vw);}
}

/* BALLOONS */
.balloon{
position:absolute;
bottom:-120px;
width:100px;
height:120px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
color:white;
font-size:35px;
cursor:pointer;
animation:fly linear forwards;
box-shadow: inset -5px -10px rgba(0,0,0,0.2);
z-index:1;
}

.balloon img{
width:40px;
}

.balloon::after{
content:'';
position:absolute;
bottom:-25px;
width:2px;
height:35px;
background:#444;
}

@keyframes fly{
0%{transform:translateY(0);}
100%{transform:translateY(-110vh);}
}

.pop{
animation:pop 0.3s forwards;
}

@keyframes pop{
100%{transform:scale(2);opacity:0;}
}

/* DISPLAY */
#bigDisplay{
position:absolute;
top:70px;
left:50%;
transform:translateX(-50%);
text-align:center;
z-index:2;
}

#bigLetter{
font-size:140px;
color:#ff4d6d;
text-shadow:5px 5px 0px #fff;
}

#bigWord{
font-size:60px;
}

#bigImage{
width:220px;
margin-top:10px;
}

/* KEYS */
#mobileKeys{
position:absolute;
bottom:40px;
left:50%;
transform:translateX(-50%);
display:flex;
flex-wrap:wrap;
gap:10px;
width:90%;
justify-content:center;
z-index:2;
}

.key{
padding:10px 14px;
border-radius:12px;
cursor:pointer;
font-size:18px;
color:white;
font-weight:bold;
box-shadow:0 4px 8px rgba(0,0,0,0.2);
transition:0.2s;
}

.key.active{
transform:scale(1.4);
box-shadow:0 0 15px #fff;
}

/* COLORS */
.key:nth-child(1){background:#ff595e;}
.key:nth-child(2){background:#ff924c;}
.key:nth-child(3){background:#ffca3a;}
.key:nth-child(4){background:#8ac926;}
.key:nth-child(5){background:#52b788;}
.key:nth-child(6){background:#1982c4;}
.key:nth-child(7){background:#6a4c93;}
.key:nth-child(8){background:#f72585;}
.key:nth-child(9){background:#b5179e;}
.key:nth-child(10){background:#7209b7;}
.key:nth-child(11){background:#560bad;}
.key:nth-child(12){background:#480ca8;}
.key:nth-child(13){background:#3a0ca3;}
.key:nth-child(14){background:#3f37c9;}
.key:nth-child(15){background:#4361ee;}
.key:nth-child(16){background:#4895ef;}
.key:nth-child(17){background:#4cc9f0;}
.key:nth-child(18){background:#00b4d8;}
.key:nth-child(19){background:#0096c7;}
.key:nth-child(20){background:#0077b6;}
.key:nth-child(21){background:#023e8a;}
.key:nth-child(22){background:#ff006e;}
.key:nth-child(23){background:#fb5607;}
.key:nth-child(24){background:#ffbe0b;}
.key:nth-child(25){background:#8338ec;}
.key:nth-child(26){background:#3a86ff;}