.problem {
    text-align: left;
        background-image: none;
    background-color: #222222;
    color: #FFFDF5;
    padding: 8vw;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10vw;
}

.solution {
    text-align: center;
    background-color: #FFFDF5;
    color: black;
    padding: 8vw;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10vw;
}

.problem-title {
    text-align: left;
    font-family: "Agrandir Variable";
    font-style: italic;
    font-weight: 617;
    font-size: 3vw;
    line-height: 100%;
    color: #FFFDF5;

}

.tabbed-title {
    font-size: 4vh;
    text-align: center;
    font-family: "Agrandir Variable";

}

.solution-title {
    text-align: center;
    float: left;
    font-family: "Agrandir Variable";
    font-style: italic;
    font-weight: 617;
    font-size: 3vw;
    line-height: 100%;

}

.problem-context {
    font-size: 3vh;
    font-family: "Agrandir Variable";
}

.solution-context {
    margin: 5%;
    margin-left: 1%;
    width:90%;
    text-align: left;
    font-size: 2.5vh;
    font-family: "Agrandir Variable";
}

@media (max-width: 767px) { 
    .problem-title {
        text-align: left;
        display: flex;
        font-family: "Agrandir Variable";
        font-style: italic;
        font-weight: 617;
        font-size: 7vw;
        line-height: 100%;
        text-align: left;
        margin: 5%;
        margin-left: 20%;
        color: #FFFDF5;
        margin-left: 0%;
    
    }
    .navbar{
        width:75%;
        margin-left: 5%;
    }
    .tabbed-title {
        font-size: 4vh;
        text-align: center;
        font-family: "Agrandir Variable";
    
    }
    
    .solution-title {
        text-align: center;
        float: left;
        padding: 2%;
        font-family: "Agrandir Variable";
        font-style: italic;
        font-weight: 617;
        font-size: 7vw;
        line-height: 100%;
        text-align: right;
        margin: 5%;
        display: block;
        margin-top: 40%;
       
    }
    
    .problem-context {
        margin: 3%;
        margin-right: 1%;
        font-size: 2vh;
        font-family: "Agrandir Variable";
        text-align: right;
        margin-right:7%;
    }
    
    .solution-context {
        margin: 5%;
        margin-left: 1%;
        text-align: left;
        font-size: 2vh;
        font-family: "Agrandir Variable";
    }

    .problem {
        
        text-align: center;
        background-color: #222222;
        color: #FFFDF5;
        padding: 2vw;
        width:100%;
        height: fit-content;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}