body {
    background-color: #131317;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 8rem;
}

span, p {
    color: aliceblue;
    font-family: 'Source Sans 3';
    font-size: 1rem;
}

hr {
    color: aliceblue;
    margin: 2rem;
}

.title {
    font-weight: bolder;
    font-size: 3.2rem;
}

.heading {
    font-weight: bold;
    font-size: 2.4rem;
}

.small-heading {
    font-size: 1.6rem;
}

.main-div, .study-section {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    flex-direction: column;
    width: min(40rem, 90vw);
}

.collections, .topics {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    box-sizing: border-box;
    gap: 0.4rem;

}

.collection:hover, .topic:hover {
    transform: scale(1.1);
}

.collection:active, .topic:active {
    transform: scale(0.94);
}

.collection, .topic {
    width: min(16rem, 100%);
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
    background-color: #131317;
    border: 0.15rem #272732 solid;
    padding: 0.8rem;
    border-radius: 0.8rem;
    transition: 0.4s cubic-bezier(0.075, 0.82, 0.165, 1) 0.04s;
}

.progress {
    display: flex;
    box-sizing: border-box;
    width: min(24rem, 90%);
    height: .6rem;
    background-color: #0b0b10;
    border-radius: 0.8rem;
    clip-path: fill-box;

}

.progress-fill {
    background-color: aliceblue;
    min-width: 0%;
    max-width: 100%;
    height: 100%;
}

.topic-view {
    width: 100%;
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
    border: 0.15rem #272732 solid;
    padding: 0.8rem;
    border-radius: 0.8rem;
}

.button {
    width: fit-content;
    background-color: #272732;
    border-radius: 0.8rem;
    padding: 0.8rem;
    border: none;
    color: aliceblue;
    align-self: flex-end;
}

#topic-text {
    display: flex;
    flex-direction: column;
}

@media (max-width: 768px) {
    .title {
        font-size: 2.5rem;
    }

    .heading {
        font-size: 2rem;
    }

    .small-heading {
        font-size: 1.4rem;
    }

    .collection,
    .topic {
        width: 100%;
    }
}