body {

margin:0;
min-height:100vh;

display:flex;
justify-content:center;
align-items:center;

background:
linear-gradient(
rgba(0,0,0,.25),
rgba(0,0,0,.25)
),
url("../img/main-bg.jpeg");

background-size:cover;
background-position:center;

font-family:Arial, sans-serif;

}


.card {

width:320px;

padding:20px;

border-radius:30px;

text-align:center;

background:

rgba(255,255,255,.35);

backdrop-filter:blur(4px);

box-shadow:

0 15px 40px rgba(0,0,0,.25);

border:2px solid rgba(255,255,255,.5);

}


h1 {

margin-top:5px;

font-size:28px;

}


button {

width:100%;

margin:7px 0;

padding:14px;

border:none;

border-radius:18px;

font-size:17px;

font-weight:bold;

background:

rgba(255,255,255,.85);

color:#333;

box-shadow:

0 5px 15px rgba(0,0,0,.25);

}


button:active {

transform:scale(.96);

}


.pet {

font-size:75px;

filter:drop-shadow(
0 5px 5px rgba(0,0,0,.25)
);

}


.stats {

display:flex;

justify-content:space-around;

margin:18px 0;

font-size:18px;

}


hr {

border:none;

height:1px;

background:rgba(0,0,0,.15);

margin:15px 0;

}

h1,
.stats,
.pet {

color:white;

text-shadow:
0 3px 8px rgba(0,0,0,.7);

}

.hidden {

display:none;

}

.info {

margin-top:15px;

background:rgba(255,255,255,0.7);

padding:12px;

border-radius:15px;

font-size:15px;

line-height:1.8;

}



.popup {

display:none;

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,.55);

justify-content:center;
align-items:center;

z-index:100;

}


.popup-card {

background:white;

width:300px;

padding:25px;

border-radius:25px;

text-align:center;

box-shadow:0 10px 30px rgba(0,0,0,.3);

}


.popup-card h2 {

margin-top:0;

}

.bar-box{
    margin:15px 0;
    font-size:16px;
}


.stat-bar{
    width:100%;
    height:18px;
    background:#ddd;
    border-radius:20px;
    overflow:hidden;
    margin-top:5px;
}


.stat-fill{
    height:100%;
    width:100%;
    transition:0.5s;
}


.health{
    background:#ff5252;
}


.hunger{
    background:#ffc107;
}


.happy{
    background:#00c853;
}


.energy{
    background:#2196f3;
}

.stat-fill{
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
    font-weight:bold;
    font-size:12px;
    text-shadow:0 1px 2px black;
    transition:0.5s;
}