body {
font-family: 'Arial', sans-serif;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.tamagotchi-container {
background-color: #ffffff;
border: solid rgb(228, 158, 54) 8px;
border-radius: 50%;
width: 300px;
height: 350px;
padding: 20px;
text-align: center;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}
.status {
margin: 15px 0;
font-size: 18px;
}
.status p {
margin: 5px 0;
}
.button-container {
margin-top: 20px;
}
button {
background-color: #ff6347;
color: white;
border: none;
padding: 10px 20px;
margin: 5px;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #e5533e;
}
#statusMessage {
font-weight: bold;
font-size: 20px;
}
.dead {
color: red;
}
.status-bar {
width: 100%;
height: 10px;
border-radius: 5px;
margin: 5px 0;
background-color: #e0e0e0;
}
.hunger-bar, .energy-bar, .happiness-bar {
height: 100%;
border-radius: 5px;
}
.hunger-bar {
background-color: #f44336;
}
.energy-bar {
background-color: #4caf50;
}
.happiness-bar {
background-color: #ffeb3b;
}