* {
    box-sizing: border-box;
    font-family:  "Poppins", sans-serif;
    width: 1005;
}


.padding {
    padding-left: 8%;
    padding-right: 8%;
}

.slidefillcontainer {
    height: 10px;
    margin-inline: auto;
    border-radius: 5px;

}

.margin-inline {
    margin-inline: auto;
}

.fill {
    height: 10px;
    width: 50%;
    border-radius: 5px;
    top: 0;
}

.boxx {
    height: fit-content;
    margin-top: 30px;
    padding-bottom: 5px;
}
.story{
    padding: 16px 24px;
    font-weight: 700;
    font-size: 24px;
    line-height: 100%;
}
.Question{
    padding: 16px 24px;
    font-weight: 900;
    font-size: 24px;
    line-height: 100%;
}
#image{
    padding: 16px 24px;
}
.lisst {
    border: 1px solid rgb(213, 206, 206);
    border-radius: 10px;
    margin: 16px 24px;
    padding: 8px 0 8px 8px;
    box-shadow: 0 0 5px rgb(213, 206, 206);
    display: flex;
    gap: 10px;
    align-items: center; 
    color: rgb(108, 103, 103);
}


.analysis-section {
    display: flex;
}
.analysis-container{
    width: 100%;
    height: 8px;
    border-radius: 5px;
    align-self:last baseline;
}
.analysis{
    height: 8px;
    border-radius: 5px;
    margin-block: auto;
    width: 0%;
}
@media screen and (max-width:750px){
    #back-for, .box {
        width: 70%;
    }
}
@media screen and (max-width:530px){
    #back-for, .box{
        width: 85%;

    }
    .gap{
        gap: 10px;
    }
    .foot{
        flex-direction: column;
        align-items: center;
        gap: 20px
    }

}