body{
margin:0;
height:100vh;
background:linear-gradient(180deg,#2c3e50 0%,#3498db 100%);
font-family:Arial,sans-serif;
text-align:center;
}

h2{
color:#fff;
margin-top:50px;
font-size:36px;
text-shadow:2px 2px 4px rgba(0,0,0,.5);
}

p{
color:#fff;
font-size:18px;
margin-top:20px;
text-shadow:1px 1px 2px rgba(0,0,0,.3);
}

ul{
list-style:none;
padding:20px;
margin-top:20px;
}

li{
color:#fff;
display:flex;
justify-content:center;
margin:10px auto;
padding:10px 20px;
background:#4d9ee0;
border-radius:20px;
box-shadow:0 2px 5px rgba(0,0,0,.1);
cursor:pointer;
width:200px;
animation:scaleUp .5s ease-in-out;
transition:transform .3s ease-in-out;
}

div{
margin:30px 0;
color:#fff;
text-shadow:1px 1px 2px rgba(0,0,0,.3);
}

@keyframes animationSlideIn{
from{transform:translateX(-30px);opacity:0}
to{transform:translateX(0);opacity:1}
}

.menu-item{
position:relative;
}

.menu-item::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-image:var(--img);
background-position:center;
background-size:contain;
background-repeat:no-repeat;
transform:scale(.5);
transition:.3s;
z-index:-1;
}

.menu-item:hover::before{
transform:scale(1);
animation:animationSlideIn .9s ease-in-out;
}

.menu-item:hover{
transform:scale(1.5);
color:transparent;
}

.es-buah{--img:url("img/es buah.png")}
.es-cappucino{--img:url("img/CAPUCCINO.png")}
.es-teh{--img:url("img/teh.png")}
.es-buah-alpukat{--img:url("img/alpukat.png")}
.es-buah-mangga{--img:url("img/mangga.png")}
.es-buah-sirsak{--img:url("img/sirsak.png")}
.es-thaitea{--img:url("img/thaitea.png")}
.es-taro{--img:url("img/taro.png")}
.es-buah-melon{--img:url("img/melon.png")}
.dan-masih-banyak{--img:url("img/anti galau.png")}

.footer-row{
display: flex;
justify-content: center;
gap: 20px;
margin-top: 30px;
margin-bottom: 30px;
}
.footer-row :hover {
transform: scale(1.2);
animation: 0.9s ease-in-out;
}

.item-ig {
width: 40px;
height: 40px;
background-image: url(img/ig.png);
background-size: contain;
background-repeat: no-repeat;
}
.item-fb {
width: 40px;
height: 40px;
background-image: url(img/fb.png);
background-size: contain;
background-repeat: no-repeat;
}
.item-tiktok {
width: 40px;
height: 40px;
background-image: url(img/tiktok.png);
background-size: contain;
background-repeat: no-repeat;
}
.item-wa {
width: 40px;
height: 40px;
background-image: url(img/wa.png);
background-size: contain;
background-repeat: no-repeat;
}