body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f1f1f1;

}
.pet {
    width: 50px;
    height: 50px;
    background-color: #f1f1f1;
    border: 1px solid #ccc;
    animation: heartbeat 2s ease-in-out infinite;
  }
  
  @keyframes heartbeat {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.3);
    }
    100% {
      transform: scale(1);
    }
  }
.app {
    width: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-style: dotted;
    margin: 10px;
    background-color: #f1f1f1;
  
}

.appBeast {
    width: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-style: dotted;
    margin: 10px;
    background-color: rgb(255, 231, 187);
}

.container {
    width: 100px;
    display: flex;
    justify-content: center;
    align-items: center;

}

.stats {
    display: block; 
    justify-content: space-between;
    gap: 20px
}

.inventory{
    display: flex;
    justify-content: center;
    
    
    justify-content: space-between;
    padding: 5px;
}

.pet {
    width: 50px;
    height: 50px;
}

.button {
    margin: 5px;
}

.stat-bar {
 
    justify-content: space-between;
    gap: 5px;
    width: 200px;
    height: 20px;
    background-color: #f1f1f1;
    border: 1px solid #ccc;
    margin-bottom: 10px;
  }
  
  .bar {
    height: 100%;
  }
  
  .hunger-bar {
    background-color: rgb(255, 0, 0);
  }
  
  .filth-bar {
    background-color: rgb(67, 37, 37);
  }

  .energy-bar{
    background-color: rgb(134, 255, 100);

  }
  
  .happiness-bar {
    background-color: rgb(255, 247, 28);
  }

  .high-filth {
    background-color: rgb(56, 56, 56);
  }
  
  .medium-filth {
    background-color:rgb(244, 226, 194);
  }
  
  .low-filth {
    background-color: rgb(255, 255, 255);
  }