/* 
  This file contains styles for desktop and larger screens.
  It overrides the default mobile-first styles from main.css.
*/

/* We define a breakpoint. For example, 768px is a common breakpoint for tablets and larger.
   This means these styles will only apply if the browser window is 768px wide or wider. */
@media (min-width: 768px) and (orientation: landscape) {

  body {
    background-color: #1a1a1a; /* A dark background for desktop */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden; /* Hide scrollbars */
  }

  #GameCanvas {
    /* Ensure the canvas scales down correctly while maintaining aspect ratio */
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); /* Add a subtle shadow for a premium look */
  }

  #root {
    position: absolute; /* Position the Web3Auth UI absolutely */
  }
}