body {
    background: linear-gradient(#1ea2dc, #16c157);
    min-height: 100vh;
    color: black;
    font-family: Verdana;
    padding: 50px 30%;
    overflow: hidden;
    
  }
  
  .title {
   color:red; 
   width: fit-content;
  
  }
  .top_select{
      background-color: #164ec1; 
      border-radius: 8px;
      border: 2px solid #101b72;
      padding: 10px;
  }
  .selector_button{
      background-color: #5a65c0;
      border: 0px;
      height: 30px;
      color:white;
      
  }
  .selector_button:hover{
      background-color: #7982cf;
  }
  
  .tab_contents{
      display: none;
  }
  .snake_part{
      
      position: absolute;
      width: 50px;
      height: auto;
      
      image-rendering: pixelated;
      
      
  }
  #big_pig{
      image-rendering: pixelated;
  
  }
  
  .shop_opener{
      position: absolute;
  }
  #producer_shop_bttn{
      width: 50px;
      position: relative;
      left:300px;
      top: 50%;
      color:red;
      background-color: black;
  
  }
  #producer_shop{
      position: fixed;    
      left:-300px;
      top: 0;
      height: 100%;
      width: 300px;
      background-color: #CD7F32;
      border-top-right-radius: 10px;
      border-bottom-right-radius: 10px;
      transition: transform 0.5s ease-out;
      z-index: 1;
  
  }
  #slaughter_shop_bttn{
      width: 50px;
      position: relative;
      left:-50px;
      top: 50%;
      color:red;
      background-color: black;
  
  }
  #slaughter_shop{
      position: fixed;    
      right:-300px;
      top: 0;
      height: 100%;
      width: 300px;
      background-color: #A52A2A;
      border-top-left-radius: 10px;
      border-bottom-left-radius: 10px;
      transition: transform 0.5s ease-out;
      z-index: 1;
      
  
  }
  .shop_name{
      color: white;
      
  }
  .upgrade{
      background-color: gold;
      border-radius: 10px;
      width: 100px;
      height:100px;
  }
  
  .item{
      border-radius: 100px;
      background-color: #6495ED;
      width: 100px;
      height:100px;
  }
  .baby_pig{
    z-index: 0;
  }
  #counters {
    pointer-events: none;
    position: fixed;
    width: 50%;
    top: 0rem;
    left: 25%;
    z-index: 2;
    font-weight: bolder;
    -webkit-text-stroke: 2px #d6d6d6;
    
    display: flex;
    justify-content: space-between; 
  }
  
  #pig_counter {
    font-size: 4.0rem;
    text-align: left;
    z-index: 10;
    
    
    /* New updates for alignment inside the counter span */
    display: inline-flex;
    align-items: center;
    gap: 10px; /* Adjust spacing between the image and the number */
    
  }
  
  #tail_counter {
    font-size: 4.0rem;
    text-align: right;
    z-index: 10;
    
    
    /* New updates for alignment inside the counter span */
    display: inline-flex;
    align-items: center;
    gap: 10px; /* Adjust spacing between the image and the number */
  }
  
  #tail_img {
    image-rendering: pixelated;
    height: 4.0rem;
    
    
    /* Removed text-align since it doesn't affect <img> tags */
  }
  #pig_head_img {
    image-rendering: pixelated;
    height: 4.0rem;
    
    
    /* Removed text-align since it doesn't affect <img> tags */
  }
  #small_tail_img{
    image-rendering: pixelated;
    height: 1rem;
    
    
    /* Removed text-align since it doesn't affect <img> tags */
  }