#topics {
    display: flex;                
    flex-wrap: wrap;             
    gap: 16px;                   
}

.topic {
    flex: 1 1 calc(33.33% - 16px); 
    box-sizing: border-box;       
    background-color: #f0f0f0;    
    padding: 10px;
    text-align: center;
    align-content: center;
    border-radius:6px;    
    transition: all .5s;
    font-family: 'Courier New', Courier, monospace;       
}

.topic:hover {       
    cursor: pointer;
    background-color: #DCA123;
    transition: all .5s;
}

.topic.active {
    background-color: #DCA123;
    transition: all .5s;
}

.topic.active:hover {
    background-color: #ecbc55;
    transition: all .5s;
}