body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    background-color: #253fa7; /* blue background */
  }
  .container {
    background-image: url('background.png');
    background-size: cover; /* Adjusts the image to cover the entire container */
    background-repeat: no-repeat; /* Ensures the image doesn't repeat */
    background-position: center; /* Centers the image */
    width: 100%;
    height: 100vh; /* fallback for browsers that don't support custom properties */
    height: calc(var(--vh, 1vh) * 100);
    position: relative;
    overflow: hidden;
  }
  .book {
    position: absolute;
    width: 100px;
    height: 100px;
    font-size: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10; /* Bring the book to the front */
    left: 100px;
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* Internet Explorer/Edge */
    user-select: none;         /* Standard */
  }
  .pipe {
    position: absolute;
    width: 120px;
    background-image: url('pillar.png');
    background-size: 100% auto; /* Adjust to fit width, auto height */
    background-repeat: repeat-y;
    background-position: center;
    right: -120px;
  }
  
  .pipe.top {
    background-position: bottom center; /* Align the image to the bottom for top pipe */
    top: 0;
  }
  
  .pipe.bottom {
    background-position: top center; /* Align the image to the top for bottom pipe */
    bottom: 0;
  }
  .pipe.top {
    top: 0;
  }
  .pipe.bottom {
    bottom: 0;
  }
  .start-message, .game-over-message {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Courier New', Courier, monospace;
    font-size: 48px;
    font-weight: bold;
    color: white;
    text-align: center;
    z-index: 10;
}
.game-over-message {
  display: none;
}