body {
    background-color: black !important;
    display: flex;
    flex-direction: column;
}

.container {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1rem;
    gap: 10px;
}

.monitoring {
    font-weight: bold;
    text-align: center;
    font-size: 2rem;
    display: flex;
    position: relative;
}

.monitoring span {
    color: green;
    width: 100%;
    text-align: center;
}

.monitoring .scoring{
    color: rgb(66, 66, 121);
    position: absolute;
    right: 0;
}

.monitoring #popmsg, .math-container #userInput {
    opacity: 0;
}

.math-container {
    display: flex;
    flex-direction: column;
    text-align: center;
    flex: 2;
}

.math-container .math-question{
    display: flex;
    font-size: 5rem;
    font-weight: bold;
    justify-content: center;
}

.math-question {
    gap: 1rem;
}

.userInput {
    font-size: 5rem;
    font-weight: bold;
}

footer {
    margin-top: auto;
}