/* Style for the whole page */
body {
    font-family: cursive; /* Use a fun, handwritten-like font */
    background-color: #121212; /* Dark background color */
    color: #ffffff; /* White text color */
    margin: 0; /* Remove space around the page */
    display: flex; /* Use flexbox to center everything */
    justify-content: center; /* Center things left to right */
    align-items: center; /* Center things top to bottom */
    height: 100vh; /* Make the body as tall as the screen */
}

/* Box that holds all the content */
.container {
    background: #1e1e1e; /* Dark gray background for the box */
    padding: 20px; /* Space inside the box */
    text-align: center; /* Center all text inside */
    width: 30%; /* Box is 30% of screen width */
    max-width: 400px; /* Don’t let the box get too wide */
}

/* Area where the QR code will appear */
.qrcode-container {
    display: flex; /* Use flexbox to center the QR code */
    justify-content: center; /* Center left to right */
    align-items: center; /* Center top to bottom */
    margin-bottom: 15px; /* Add space below this area */
}

/* Big title at the top */
h1 {
    font-size: 24px; /* Make the text big */
    margin-bottom: 15px; /* Add space below the title */
}

/* Line below the title */
hr {
    border: 1px solid #333; /* Thin dark line */
    margin: 15px; /* Space above and below the line */
}

/* Text box where user types something */
input {
    font-family: cursive; /* Same fun font */
    width: 75%; /* Input box takes up 75% of the container */
    padding: 10px; /* Space inside the box */
    margin-bottom: 15px; /* Space under the box */
    background: #2b2b2b; /* Dark background for the input */
    color: #fff; /* White text */
}

/* Style for the buttons */
button {
    background: #00fff2; /* Bright blue-green color */
    color: #121212; /* Dark text on the button */
    padding: 10px 15px; /* Space inside the button */
    margin: 5px; /* Space between buttons */
    cursor: pointer; /* Mouse pointer changes when hovered */
    transition: background 0.3s ease-out; /* Smooth color change when hovering */
}

/* What happens when you move the mouse over the button */
button:hover {
    background: #00776f; /* Button gets darker */
}