.topic>a.drop-topic,
.drop-sub-topic {
    display: inline-flex;
    text-decoration: none;
}
.drop-topic:active,
.drop-topic:focus,
.project:active,
.project:focus {
    /* box-shadow: 0 0 20px 2px orange; */
}
.sub-topics-container {
    margin-top: 2.5%;
}
.sub-topics-container .topics-container {
    /* width: 70%; */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20%;
}
.topics-container>.sub-topic {
    /* flex-basis: 50%; */
    display: flex;
    flex-direction: column;
    border: 1px solid whitesmoke;
    /* align-items: flex-start; */
    /* justify-content: space-around; */
    /* margin: 1% 0; */
    flex-basis: 35%;
}
.sub-topic-container .project {
    font-size: 70%;
    text-decoration: none;
    border: 1px solid black;
    display: flex;
    flex-basis: 15%;
    flex-direction: column;
    margin: .5% .5%
}
.drop-sub-topic {
    text-decoration: underline;
    width: fit-content;
}
/* .sub-topic-container>.project {
    text-decoration: none;
    display: flex;
    flex-basis: 15%;
    flex-direction: column;
    margin: 2.5% 1.5%;
    margin-left: 2.5%;
    background-color: lightgrey;
    border: 1px solid black;
    font-size: 95%;
    color: black;
} */
.sub-topic-container .project img {
    max-height: 60px;
    max-width: 100px;
    width: 100%;
    height: 90%;
}
.hide {
    display: none;
}
@media screen and (max-width: 720px) {    
    .sub-topics-container{
        /* margin-top: 10%; */
    }
}