body {
    font-family: Arial, sans-serif;
}

p b {
    font-family: Arial, sans-serif;
    font-size: 0.7em;
}

h1 {
    font-size: 200%;
}

h2 {
    font-size: 150%;
}

.container {
    width: 80%;
    margin: 0 auto;
    text-align: center;
}

#registrationForm {
    margin-top: 20px;
}

#nameInput {
    margin-right: 10px;
    padding: 10px;
}

#namesList {
    margin-top: 20px;
    border-top: 1px solid #ddd;
    padding-top: 10px;
}

@media screen and (max-width: 768px) {
    body {
        font-size:　12px; /* Adjust as needed for readability */
    }

    p{
       font-size: 80%; 
    }

    b{
        font-size: 85%; 
     }

    .container {
        width: 95%;
        margin: 0 auto;
    }

    #nameInput, #submitBtn {
        margin: 10px 0; /* Stack the input and button vertically with space between */
        padding: 12px;
        width: calc(100% - 24px); /* Adjust width to ensure it fits small screens */
    }

    #namesList {
        padding: 10px;
        margin-top: 15px;
    }
}