index.css

html, body {
    padding: 0;
    font-family: Karla;
    background: #ECF2FF;
    display: flex;
    align-items: center;
    justify-content: center;
}

#main-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#equation-field {
    text-align: center;
    font-size: 2rem;
    background-color: wheat;
    outline: none;
    margin: 0.5rem;
    border-radius: 0.3rem;
    width: 20rem;
}

#solve-button {
    border: none;
    background-color: #4CAF50;
    font-size: 2rem;
    color: white;
    padding: 0.3rem 1rem;
    text-align: center;
    cursor: pointer;
    display: inline-block;
    margin: 0.5rem;
    width: 10rem;
    outline: none;
}


#solution-display {
    display: flex;
}

#solution-display > .equation-component {
    background-color: #333333;
    color: white;
    font-size: 2rem;
    padding: 0.1rem 1rem;
    margin-left: 0.25rem;
    align-self: center;
}

#solution-display > .equation-component-open-brac {
    background-color: #b66700;
    color: white;
    font-size: 2rem;
    padding: 0.1rem 1rem;
    margin-left: 0.25rem;
    align-self: center;
}

#solution-display > .equation-component-close-brac {
    background-color: #b66700;
    color: white;
    font-size: 2rem;
    padding: 0.1rem 1rem;
    margin-left: 0.25rem;
    align-self: center;
}

#solution-display > .equation-component-plus {
    background-color: #00ffea;
    color: rgb(255, 0, 0);
    font-size: 2rem;
    padding: 0.1rem 1rem;
    margin-left: 0.25rem;
    align-self: center;
}

#solution-display > .equation-component-minus{
    background-color: #00ffea;
    color: rgb(255, 0, 0);
    font-size: 2rem;
    padding: 0.1rem 1rem;
    margin-left: 0.25rem;
    align-self: center;
}

#solution-display > .equation-component-times{
    background-color: #00ffea;
    color: rgb(255, 0, 0);
    font-size: 2rem;
    padding: 0.1rem 1rem;
    margin-left: 0.25rem;
    align-self: center;
}

#solution-display > .equation-component-divide{
    background-color: #00ffea;
    color: rgb(255, 0, 0);
    font-size: 2rem;
    padding: 0.1rem 1rem;
    margin-left: 0.25rem;
    align-self: center;
}

#solution-display > .equation-component-equal{
    /* background-color: #008CBA; */
    color: rgb(66, 66, 66);
    font-size: 2rem;
    padding: 0.1rem 1rem;
    margin-left: 0.25rem;
    align-self: center;
}

#solution-display > .equation-component-solution {
    /* background-color: #008CBA; */
    border: red 4px solid;
    color: rgb(255, 0, 0);
    font-size: 2.5rem;
    padding: 0.1rem 1rem;
    margin-left: 0.25rem;
    align-self: center;
}