/* Flips the entire canvas */
canvas {
  transform: scaleX(-1);
}

/* Flips the video element if separate from the canvas */
video {
  transform: scaleX(-1);
}

/* Ensure text elements are not flipped */
#score, #highscore, h1 {
  transform: scaleX(1);
}

#score, #highscore {
    font-size: 24px; /* Set the font size to 24 pixels */
    color: black; /* Example to set text color */
    font-family: Arial, sans-serif; /* Example to set the font type */
  background-color: white; /* Sets the background color to white */
    padding: 10px 20px; /* Adds padding around the text */
    border-radius: 10px; /* Rounds the corners of the background */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Optional: adds a subtle shadow for depth */
    margin: 10px; /* Adds some space around the elements */
}

h1{
    font-size: 32px; /* Set the font size to 24 pixels */
    color: black; /* Example to set text color */
    font-family: Arial, sans-serif; /* Example to set the font type */
  background-color: white; /* Sets the background color to white */
    padding: 10px 20px; /* Adds padding around the text */
    border-radius: 10px; /* Rounds the corners of the background */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Optional: adds a subtle shadow for depth */
    margin: 10px; /* Adds some space around the elements */
}

body {
    background-image: url('https://cdna.artstation.com/p/assets/images/images/032/033/766/large/slotopaint-gamedesign-background.jpg?1605280149');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


#defaultCanvas0, video {  /* target the canvas or video element */
    width: 100%;          /* Makes the camera feed fill the container's width */
    border-radius: 20px;  /* Adds rounded corners */
    object-fit: cover;    /* Ensures the feed covers the area without stretching */
    height: auto;         /* Maintains the aspect ratio */
    display: block;       /* Removes extra space below the canvas/video element */
}