html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    box-sizing: border-box;
}

canvas {
    display: block !important;
    box-sizing: border-box;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
    
    /* Default behavior: fit based on viewport width (narrow viewports like portrait mobile) */
    width: 100vw !important;
    height: 62.5vw !important; /* 750 / 1200 = 62.5% */
    
    max-width: 1200px !important;
    max-height: 750px !important;
}

/* When the viewport is wider than the 16:10 aspect ratio (landscape desktops/laptops/mobiles) */
@media (min-aspect-ratio: 16/10) {
    canvas {
        width: 160vh !important; /* 1200 / 750 = 1.6 = 160% */
        height: 100vh !important;
        max-width: 1200px !important;
        max-height: 750px !important;
    }
}