/* CSS for Babylon.js Project */

/* Global Styles */
/* Basic reset to eliminate default browser styling */
body {
  margin: 0;
  padding: 0;
  overflow: hidden; /* Prevents scrolling to ensure full viewport canvas display */
  display: flex; /* Establishes a flex container for center alignment of child elements */
  justify-content: center; /* Centers children horizontally */
  align-items: center; /* Centers children vertically */
  min-height: 100vh; /* Ensures the body takes up at least the full height of the viewport */
  background-color: #000; /* Sets a black background for the aesthetic of the app */
}

/* Canvas Container */
/* Ensures the canvas zone fills the entire viewport and centers its children */
#canvasZone {
  width: 100vw;
  height: 100vh;
  display: flex; /* Utilizes flexbox for easy centering */
  justify-content: center; /* Horizontally centers the canvas within the container */
  align-items: center; /* Vertically centers the canvas within the container */
}

/* Canvas Element */
/* Specific styles for the renderCanvas used by Babylon.js */
#renderCanvas {
  width: 100%; /* [Has to be % or it breaks inspector!!] */
  height: 100%; /* [Has to be % or it breaks inspector!!] */
  touch-action: none; /* Disables default touch behavior like pinch-zoom and panning for better control over canvas interactions */
}