body {
    margin: 0;
    font-size: 24px;
    font-family: "Comic Sans MS";
    background-color: rgb(126, 231, 126);
    text-wrap: nowrap;
    color: rgb(11, 63, 11);
    overflow: hidden;
}

header, footer {
    margin: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

header {
    font-size: 28px;
    height: 100px;
    background-color: rgb(28, 114, 28);
    color: rgb(200, 255, 200);
    text-align: center;
    box-shadow: 0 8px 0 rgb(20, 83, 20);
}

main {
    margin: auto 20px auto 20px;
}

footer {
    font-size: 18px;
    font-weight: 500;
    height: 50px;
    background-color: rgb(52, 181, 52);
    position: absolute;
    bottom: 0;
    text-align: center;
    box-shadow: 0 -5px 0 rgb(43, 146, 43);
}

h1 {
    margin: auto;
}

form {
    display: flex;
    margin: 110px auto 50px auto;
    flex-direction: column;
    width: 400px;
    background-color: rgb(165, 255, 165);
    padding: 15px;
    border-radius: 20px;
    box-shadow: 0 8px 0 rgb(107, 180, 107);
}

select, input, button {
    transition: all 0.1s;
}

select:hover, input:hover, button:hover {
    transform: scale(1.02);
}

select, input {
    margin-bottom: 20px;
    padding: 5px;
    font-size: 24px;
    border-radius: 10px;
    font-family: "Comic Sans MS";
    border: none;
    background-color: rgb(240, 255, 240);
    color: rgb(11, 63, 11);
}

select:focus, input:focus {
    outline: none;
}

button {
    margin: auto;
    padding: 5px;
    width: 200px;
    font-size: 24px;
    border-radius: 10px;
    background-color: rgb(84, 221, 84);
    border: none;
    font-family: "Comic Sans MS";
    color: rgb(11, 63, 11);
}

label, button {
    font-weight: 600;
}

.output, .error {
    font-weight: 600;
    text-align: center;
    font-style: italic;
}

.error {
    color: red;
}