#container {
    grid-template-areas:
        "demo"
        "userInput";
}

#demo {
    grid-area: demo;
    justify-self: center;
}

#userInput {
    grid-area: userInput;
}

#form {
    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-template-rows: auto 1fr 1fr;
    gap: 10px;
}

#submit {
    grid-column: 1 / span 2;
    justify-self: center;
}

input {
    border-radius: 3px;
    font-size: 1.5rem;
}

input[type="text"] {
    padding: 10px;
}

#shortName {
    background-color: #0060df;
    border-color: #ffffff;
    color: #ffffff;
}

label {
    font-size: 1.1rem;
    font-weight: bolder;
}

.label {
    display: grid;
}

.error {
    color: rgba(229, 84, 62, 1);
    align-self: end;
}

.hidden {
    display: none;
}