body{
    background: rgb(238,174,202);
    background: radial-gradient(circle, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%);
    min-height: 100vh;
    max-width: 100vw;
}

.navbar-brand{
    display: flex;
    align-items: center;
    justify-content: center;
}

#logo-image{
    margin-right: 10px;
}

#logo-text{
    font-weight: bold;
    font-size: 1.2em;
}

#inputBox{
    border: 5px solid black;
    border-radius: 15px;
    height: 85vh!important;
    width: 95vw!important;
    margin: 1em auto!important;
    display: flex;
    flex-direction: column;
    align-items: center;
}


#inputBox>h2{
    height: 24%;
}

/* #inputBox .question-title{
    height: 60%;
} */

/* #inputBox .btn-box{
    height: 20%;
} */

.question{
    padding: 1.2em 1.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.question-title{
    text-align: center;
    padding: 10px;
    border: 4px solid black;
    border-radius: 15px;
    margin-bottom: 1.8rem;
    width: 70%;
}

#values-slider{
    width: 90%;
    margin: auto;
}

.value-slider-box{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    width: 70%;
}

#resultBox{
    border: 5px solid black;
    border-radius: 15px;
    height: 85vh!important;
    width: 95vw!important;
    margin: 1em auto!important;
    display: none;
    flex-direction: column;
    align-items: center;
    padding: 2em 2em;
}

.type-box{
    height: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-bottom: 1rem;
}

.desc-box{
    height: 70%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.desc-box p {
    font-size: 1.7rem;
    font-weight: 600;
}

@media (width < 426px){
    #inputBox>h2{
        font-size: 1.6em!important;
    }

    .question-title{
        width: 100%;
        font-size: 1.5em;
    }

    .value-slider-box{
        width: 100%;
    }

    .sbt-btn{
        width: 100%!important;
    }
}

@media (width < 1000px){
    .desc-box p {
        font-size: 1.3rem;
    }
}

@media (width < 670px){
    .desc-box p {
        font-size: 1.18rem;
    }
}

@media (width < 545px){
    .desc-box p {
        font-size: 1.15rem;
    }
}

@media (width < 520px){
    .desc-box p {
        font-size: 1.09rem;
    }
}

@media (width < 462px){
    .desc-box{
        height: 50%;
    }
    .desc-box p {
        font-size: 1.01rem;
    }
}

@media (width < 440px){
    .desc-box p {
        font-size: 0.85rem;
    }
}