body {
    font-family: Arial, sans-serif;
    display: flex; /* Mmm, flexbox... it's like donuts for my code! */
    justify-content: center; /* Gotta center it, like the bullseye on a donut! */
    align-items: flex-start; /* Keep it at the top, like frosting on a donut! */
    min-height: 100vh;
    background-color: #f0f0f0; /* Mmm, background color... */
    margin: 0;
    padding: 20px;
    box-sizing: border-box;
}

header {
    text-align: center; /* Center the header, like my belly! */
    margin-bottom: 20px; /* Space for my beer belly... */
}

header .logo {
    max-width: 100%;
    height: auto;
    width: 150px; /* Perfect size, like a donut! */
    margin-bottom: 10px;
}

.container {
    width: 100%;
    max-width: 600px;
    background: #f0f0f0; /* Mmm, container background... */
    padding: 20px; /* Comfy padding, like my couch! */
    border-radius: 8px; /* Round edges, like my head! */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Shadow, like Moe's tavern at night! */
    margin-top: 20px; /* A little space at the top... */
}

form {
    display: flex;
    flex-direction: column; /* Column layout, like beer cans stacked up! */
    gap: 10px;
    width: 100%;
}

fieldset {
    border: none;
    padding: 0;
    margin-bottom: 10px; /* Space for all the donuts... */
}

legend {
    font-weight: bold; /* Bold, like my opinions! */
}

label {
    text-align: left; /* Labels on the left, just like my heart! */
    display: block;
}

input[type="radio"] {
    margin-right: 5px; /* Space between radio and label, like space between donuts! */
}

input[type="text"] {
    padding: 8px; /* Padding, like a cushion for my fingers! */
    border: 1px solid #ccc;
    border-radius: 4px; /* Round corners, like my belly! */
    width: calc(100% - 18px); /* Width, accounting for padding and border... */
}

button {
    padding: 10px; /* Button padding, nice and comfy! */
    background-color: #007BFF; /* Button color, like blue frosting! */
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer; /* Pointer cursor, like pointing at donuts! */
}

button:hover {
    background-color: #0056b3; /* Hover color, like a blue donut... */
}

#result {
    margin-top: 20px;
    padding: 10px; /* Result padding, like a soft pillow! */
    background-color: #e9ecef; /* Background color, like a cloudy day... */
    border-radius: 4px;
    display: none;
    word-wrap: break-word; /* Wrap words, like wrapping a sandwich... */
}

footer {
    margin-top: 20px;
    text-align: center; /* Center footer, like me in front of the TV! */
}

@media (max-width: 600px) {
    body {
        padding: 10px; /* Smaller padding for small screens, like a mini donut! */
    }

    form {
        gap: 8px;
    }

    button {
        padding: 8px; /* Smaller button padding for small screens... */
    }
}