html, body {
    font-family: monospace;
    max-width: 100%;

    padding: 10px;
    }

    .container {
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
    }
    
    h1 {
        color: #333;
    }
    
    ul {
        list-style-type: none;
        padding: 0;
    }
    
    li {
        margin-bottom: 10px;
        font-size: 16px;
    }
    
    form {
        background-color: #fff;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
    
    label {
        display: block;
        margin-bottom: 5px;
    }
    
    input[type="number"] {
        width: 100%;
        padding: 10px;
        margin-bottom: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        box-sizing: border-box;
    }
    
    input[type="submit"] {
        background-color: #007bff;
        color: #fff;
        border: none;
        padding: 10px 20px;
        cursor: pointer;
        border-radius: 5px;
    }
    
    input[type="submit"]:hover {
        background-color: #0056b3;
    }

    select {
        width: 100%;
        padding: 10px;
        margin-bottom: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        box-sizing: border-box;
        background-color: #fff; /* Optional: Add the same background color as other input fields */
    }
    
    select option {
        padding: 10px; /* Adjust padding as needed */
        background-color: #fff; /* Optional: Add the same background color as other input fields */
    }
    
    /* Add hover and focus styles for select element */
    select:hover,
    select:focus {
        border-color: #007bff; /* Optional: Change border color on hover and focus */
        outline: none; /* Optional: Remove default outline on focus */
    }