body {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: black;
    overflow: hidden; /* Prevent scrolling */
    -webkit-touch-callout: none; /* Prevents callout to copy image, etc when touch long pressed */
    -webkit-user-select: none; /* Prevents select/move functionality */
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; /* Disables selection */
    touch-action: manipulation; /* Prevents zooming */
}

@font-face {
    font-family: 'ConsoleFont';
    src: url('slkscrb.ttf') format('truetype');
}

.scanlines {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: black;
    position: relative;
    
    overflow: hidden;
}

.canvas-container {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: 10%; /* Rounded corners for CRT effect */
    background-color: black; /* Background color for the bezel */
    position: relative;
    aspect-ratio: 4 / 3;
    max-width: 100%;
    max-height: 100%;
    
    clip-path: ellipse(180% 50% at 50% 50%);
}

canvas {
    clip-path: ellipse(50% 180% at 50% 50%);
    filter: blur(1.2px);
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
    pointer-events: none;
    -webkit-touch-callout: none; /* Disable callout, long-press menus */
    -webkit-user-select: none; /* Disable selection/copying of canvas text */
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Letterboxing for landscape mode */
@media (orientation: landscape) {
    .canvas-container {
        width: auto;
        height: 100%;
        margin: auto 0;
    }
}

/* Adjustments for portrait mode */
@media (orientation: portrait) {
    .canvas-container {
        width: 100%;
        height: auto;
        margin: 0 auto;
    }
}