.app-wrapper {
    display: flex;
    flex-direction: column;
    /* min-height: 100vh; */
  }
  
  main {
    flex-grow: 1;
  }
  
  .footer {
    flex-shrink: 0;
  }
  
  p, h1, ul, li {
    color: rgba(173, 181, 189, 0.75);
  }
  
  main.galaxy-container {
    background-color: transparent; /* Make sure the background is transparent */
    position: relative;
    /* height: 600px; /* You can adjust this height as needed */
    aspect-ratio: 10 / 6;
    margin: 0 auto; /* Center the container */
    width: 100%; /* Adjust width to give margins on left and right */
    max-width: 1200px; /* Set a max-width if necessary */
    background-image: url('/images/galaxie.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    overflow: hidden; 
  }

  #landscape-orientation {
    display: none;
    justify-content: center;
    align-items: center;
    height: 60vh;
    width: 100vw;
    text-align: center;
    flex-direction: column;
  }

  #landscape-orientation img {
    width: 15%;
    height: 15%;
    border-radius: 30%;
    object-fit: cover;
  }
  
  main.galaxy-container:fullscreen {
    height: 100%;
    width: 100%;
    max-width: none;
  }

  .fc-container {
    position: absolute;
    right: 0px;
  }

  .fc-container button {
    color: white !important;
  }

  .js-container {
    position: absolute;
    right: 0px;
    bottom: 0px;
  }

  .js-container button {
    color: white !important;
   }

/* Layout Instruction Screen */
main.black-container {
    background-color: transparent; /* Make sure the background is transparent */
    position: relative;
    /* height: 600px; /* You can adjust this height as needed */
    aspect-ratio: 10 / 6;
    margin: 0 auto; /* Center the container */
    width: 100%; /* Adjust width to give margins on left and right */
    max-width: 1200px; /* Set a max-width if necessary */
    background-image: url('/images/black.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    overflow: hidden;
}
  
  .instructions {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      color: white !important; /* or any desired color for better visibility */
      font-size: 1.5rem; /* default font size for larger screens */
      padding: 0 20px; /* added some padding for better readability */
  }
  
  /* -- */
  
  .spaceship {
      position: absolute;
      bottom: 50%;
      transform: translateY(50%);  /* Offset for spaceship height */
      width: 15%;/* 150px */
  }
  
  .fuel-warning {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      color: white !important; /* or any desired color for better visibility */
      font-size: 1.5rem; /* default font size for larger screens */
      padding: 0 20px; /* added some padding for better readability */
  }
  
  .missile {
      position: absolute;
      width: 5%;  
      height: auto; 
  }
  
  .fire-btn {
      position: absolute;
      bottom: 60px;  /* Space from bottom */
      left: 4%;  /* Space from left */
      z-index: 10;
      background-color: #FF5733;
      border: none;
      border-radius: 50%;
      width: 50px;
      height: 50px;
      color: white;
      font-size: 1.5rem;
      text-align: center;
      line-height: 50px;
      display: none; /* Make it always visible */
  }
  
  .fuel-btn {
      position: absolute;
      bottom: 140px;  /* Space from bottom */
      left: 4%;  /* Space from left */
      z-index: 10;
      background-color: #25e8a4;
      border: none;
      border-radius: 50%;
      width: 50px;
      height: 50px;
      color: white;
      font-size: 1.5rem;
      text-align: center;
      line-height: 50px;
      display: none; /* Make it always visible */
  }
  
  .refuel-btn {
      position: absolute;
      bottom: 220px;  /* Space from bottom */
      left: 4%;  /* Space from left */
      z-index: 10;
      background-color: #25e8a4;
      border: none;
      border-radius: 50%;
      width: 50px;
      height: 50px;
      color: white;
      font-size: 1.5rem;
      text-align: center;
      line-height: 50px;
      display: none; /* Make it always visible */
  }
  
  .fuel-container {
      position: absolute;
      top: 10px; /* Place it at the top */
      right: 10px; /* Place it at the right */
      width: 10%; /* Reduced width to make it smaller */
      text-align: center;
      color: white;
      display: none;
  }
  
  .fuel-gauge {
      background-color: rgba(255, 255, 255, 0.2);
      height: 2vh; /* further reduced height for subtlety */
      width: 100%;
      border: 1px solid white;
      position: relative;
  }
  
  .fuel-label {
      margin-bottom: 5px;
      font-size: 12px;
      text-align: left;
  }
  
  .fuel-bar {
      background-color: green;
      width: 100%;
      height: 100%;
      position: absolute;
      bottom: 0;
  }
  
  .score {
      position: absolute;
      top: 1vw; 
      left: 1vw;
      font-size: 1.5vw; 
      color: #fff;
      z-index: 10;
  }

  .time {
    position: absolute;
    top: 1vw;
    left: 10vw;
    font-size: 1.5vw;
    color: #fff;
    z-index: 10;
   }
  
  .refuelDiv {
      position: absolute;
      top: 3vw; 
      left: 1vw;
      font-size: 1.5vw; 
      z-index: 10;
  }
  
  .star, .rock {
      position: absolute;
      right: -5vw; 
  }

  .star {
    width: 4%;
  }
  .rock {
      width: 12%;
      aspect-ratio: 2 / 1;
  }
  .refuel {
    top: 40px;
    font-style: bold;
  }


  /* break point 1 : 855px */
  
  @media screen  and (orientation: landscape) and (max-width: 855px) {
      .fire-btn, .fuel-btn , .refuel-btn 
      {
          display: block;
      }
      main.galaxy-container:fullscreen .fire-btn,
      main.galaxy-container:fullscreen .fuel-btn,
      main.galaxy-container:fullscreen .refuel-btn{
          display: block;
      }
      
      #fullscreen-btn {
          top: 5px; /* Adjust position for smaller screens */
          right: 5px; 
          font-size: 0.9rem; /* Reduce font size */
      }

      #joystick-btn {
          bottom: 5px; /* Adjust position for smaller screens */
          right: 5px;
          font-size: 0.9rem; /* Reduce font size */
      }
  }
  
  /* @media screen and (orientation: landscape) {
      .star {
        width: 6vw;
      }
      .rock {
          height: 8vw;
          width: 12vw;
      }
  } */

  /* breakpoint 2 767px */
  
  
  @media (max-width: 767px) {
    .spaceship {
      max-width: 120px;
    }
    
    main.galaxy-container:fullscreen .spaceship {
        max-width: 120px;
    }

    .instructions {
        font-size: 1rem; /* smaller font size for smaller screens */
    }
    
    main.galaxy-container:fullscreen .instructions {
        font-size: 1rem;
    }
    
    .missile {
        width: 6%;  
    }
    
    main.galaxy-container:fullscreen .missile {
        width: 6%;
    }
    
    .score {
        font-size: 2vw; 
        top: 0.5vw; 
        left: 0.5vw;
    }

    .time {
        font-size: 2vw;
        top: 0.5vw;
        left: 12vw;
    }
      
    .refuelDiv {
        font-size: 2vw; 
        top: 2vw; 
        left: 0.5vw;
    }
    
    .fire-btn, .fuel-btn, .refuel-btn {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
        line-height: 40px;
    }

    .fire-btn {
        bottom:80px;
    }

    .fuel-btn {
        bottom: 140px;
    }

    .refuel-btn {
        bottom: 200px;
    }

    .fuel-gauge {
        height: 20px;
    }
    
    main.galaxy-container:fullscreen .fuel-gauge {
        height: 20px;
    }

  }
  
  /* breakpoint 3 480px */

  @media (max-width: 480px) {
      .instructions {
          font-size: 0.8rem; /* even smaller font size for very small screens */
      }
      
      main.galaxy-container:fullscreen .instructions {
          font-size: 0.8rem;
      }
      
      .missile {
          width: 8%; 
      } 
      
      main.galaxy-container:fullscreen .missile {
          width: 8%; 
      }
      
      #fullscreen-btn {
          top: 3px; 
          right: 3px; 
          font-size: 0.8rem; /* Further reduce font size for very small screens */
      }

      #joystick-btn {
          bottom: 3px;
          right: 3px;
          font-size: 0.8rem; /* Further reduce font size for very small screens */
       }

      .fire-btn {
          bottom: 20px;
      }

      .fuel-btn {
          bottom: 70px;
      }

      .refuel-btn {
          bottom: 120px;
      }
      
      .score {
          font-size: 2.5vw;
          top: 0.3vw; 
          left: 0.3vw;
      }

      .time {
          font-size: 2.5vw;
          top: 0.3vw;
          left: 15vw;
      }
      
      .refuelDiv {
          font-size: 2.5vw;
          top: 3vw; 
          left: 0.3vw;
      }
      
      .fire-btn, .fuel-btn, .refuel-btn {
         width: 40px;
         height: 40px;
         font-size: 1.2rem;
         line-height: 40px;
      }
  }
    
  
  /* FORCED LANDSCAPE */
  
  @media screen and (max-width: 976px) and (orientation: portrait) 
    {
      #landscape-orientation {
        display: flex;
        justify-content: center; 
        align-items: center;
        height: 60vh;
        width: 100vw; 
        text-align: center;
        flex-direction: column;
      }
      #landscape-orientation img {
        width: 15%; 
        height: 15%; 
        border-radius: 30%;
        object-fit: cover; 
      }
      /*.app-wrapper {
        display: none;
      }*/
    }
    
    
    @media (orientation: landscape) {
      #landscape-orientation {
        display: none;
      }
      .app-wrapper {
        display: block;
      }
    }