html {
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}
body {
    background-color: #feec00;
    font-size: 1rem;
}
#main {
    width: 100%;
    max-width: 40rem;
    margin-inline: auto;
}
.total {
    font-size: 1.3rem;
    margin: 10px;
}
#logo {
    float: right;
    height: auto;
}
#logo img {
    width: 7em;
    height: auto;
}
#message {
    border: 3px solid #2d2e83;
    margin: 10px;
}
#errors {
    margin: 10px;
    padding: 5px;
    border: 3px solid red;
}
.dynamic-form {
    display: grid;
    /* First column fits the longest text; second column fills the rest */
    grid-template-columns: max-content 1fr; 
    gap: 15px 10px; /* 15px row gap, 10px column gap */
    align-items: center;
}
.dynamic-form label {
    text-align: right;
}
.dynamic-form input {
    padding: 8px;
    box-sizing: border-box;
    width: 100%;
}
.form {
    border: 10px solid #2d2e83;
    padding: 20px;
    width: fit-content;
}
.form form {
    display: flex;
    flex-direction: column;
}
input[type="text"],
input[type="email"],
textarea,
button,
select {
    font-size: 1rem;

    border: 2px solid #2d2e83;
    border-radius: 10px;
}
button {
    border: 2px solid #2d2e83;
    border-radius: 0px;
    margin: 15px;
    font-size: 1.3em;
    background-color: #2d2e83;
    color: #feec00;
}
input:read-only {
    background-color: #f5f5f5;
    color: #717171;
    border-color: #d1d1d1;
    cursor: not-allowed;
}