@keyframes buttonShrink{
    from{width: 51%; height: 45px}
    to{width: 49%; height: 40px}
}

@keyframes buttonSwell{
    to{width: 51%; height: 45px}
    from{width: 49%; height: 40px}
}

.answerDiv{
    visibility: hidden;
}

body{
    background-color: #232c25;
    overflow: hidden;
}

.title{
    color: #63bed2;
    text-align: center;
    font-size: 40px;
    font-family: "Bevan", serif;
}

.problemDiv{
    border: 1.5px solid #332453;
    box-sizing: border-box;
    padding: 15px;
    background-color: #ae93e782;
}

.flex{
    display: grid;
    grid-template-rows: 20vh 78vh;
}

.btnFlex{
    display: flex;
    width: 100%;
    justify-content: space-around;
}

button{
    width: 49%;
    height: 40px;
    background-color: #4f838f;
    color: #a6d8e3;
    font-weight: 900;
    border: 2px #335158 solid;
    animation: buttonShrink 0.5s ease-out;
}

button:hover{
    background-color: #406770;
    animation: buttonSwell 0.5s ease-out;
    width: 51%;
    height: 45px;
}

button:not(hover){
    width: 49%;
    height: 40px;
    background-color: #4f838f;
    color: #a6d8e3;
    border: 2px #335158 solid;
    animation: buttonShrink 0.5s ease-out;
}

.text{
    color: #332453;
    font-family: "M PLUS Rounded 1c", sans-serif;
}