html, body{
    padding:0;
    margin:0;
    overflow:hidden;
    image-rendering: pixelated;
}

button {
    background: none; /* Removes background */
    border: none; /* Removes border */
    padding: 10px 20px; /* Keeps padding */
    outline: none;
}

canvas{
    width:100%;
    background: blue;
}

.card_tab {
    position: fixed;  /* Keeps it in place even when scrolling */
    display: flex;
    top: 0;           /* Aligns to the top of the screen */
    right: 0;         /* Aligns to the right of the screen */
    padding: 10px;    /* Optional: Add padding for spacing */
    color: white;     /* Optional: Text color */
    z-index: 1000;    /* Ensures it's above other elements */
    transform: scale(0.1);  /* 70% of original size */
    transform-origin: top right;
    opacity: 0.7;
} 

/* Hover Effect: Grows & Rotates Slightly */
.card_tab:hover {
    transform: scale(0.12); 
    position: fixed;
    opacity: 1;
}

.container {
    position: relative;  /* Ensures container stays above background */
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: visible;
    height: 100vh;  /* Full height */
}

.card_received {
    position: absolute;
    z-index: 11;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    cursor: default;
    border-radius: 5px;
    margin-top: -50px; /* Adjust the value to move it up more or less */
    color: black;
    font-family: 'Press Start 2P', sans-serif;
    opacity: 0;
    transform: translateY(-700px); 
    animation: appear 4s ease-out 1; 
} @keyframes appear {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

#message {
    font-size: 18px;
    color: rgb(0, 0, 0); /* You can change this to any color */
    text-align: center;
    padding: 10px;
}