* {
    border: none;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background-color: rgb(0, 48, 59);
}
.container {
    box-sizing: content-box;
    display: flex;
    flex-wrap: wrap;
    height: 500px;
    width: 500px;
    margin: 0 auto;
}

.grid {
    border: 1px solid rgb(10, 52, 63);
    background-color: rgba(53, 18, 18, 0.589);
}

.inputSection {
    margin: 20px auto;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    width: 500px;
}

#input {
    display: block;
    background-color: rgb(199, 199, 218);
    border-radius: 5px;
    width: 300px;
    height: 25px;
    border: 1px solid rgb(193, 214, 213);
}

.submit {
    display: block;
    border-radius: 5px;
    width: 55px;
    height: 25px;
    border: 1px solid rgb(49, 49, 116);
    font-family: monospace;
    font-weight: 800;
}

#input::placeholder {
    font-family: monospace;
    font-weight: 900;
}

section {
    margin: 0 auto;
    width: 600px;
    padding: 50px 0px;
    border: 4px double transparent;
    border-radius: 10px;
}

.grid {
    transition: background-color 400ms ease-in-out 25ms;
}