/***   LETTERS   ***/
.letters-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 20px;
}

.letter span {
    font-size: 1.75em;
    font-weight: bold;
}

.letter.active {
    color: var(--primary-color);
}

.letter:hover {
    color: var(--primary-color);
    cursor: pointer;
}

/***   SCROLLBAR   ***/
.letters-container.scroll {
    overflow-x: scroll;
    justify-content: flex-start;
    padding-bottom: 20px;
}

.letters-container.scroll::-webkit-scrollbar {
    height: 2px;
}

.letters-container.scroll::-webkit-scrollbar-thumb {
    background:  var(--primary-color); 
}

.horizontal-break {
    width: 33%;
    height: 2px;
    background-color: var(--primary-color);
    margin: 20px auto;
}

/***   DEFINITIONS   ***/
.definitionsByLetter {
    border-bottom: 1px solid #91989C;
    margin-top: 30px;
}

.definitions-header {
    font-size: 1.9em;
    font-weight: bold;
}

.definition-wrapper {
    margin-top: 15px;
}

.definition {
    display: flex;
    flex-direction: column;
    margin-bottom: 30px;
    gap: 5px;
}

.definition .title {
    font-size: 1.25em;
    font-weight: bold;
}

@media screen and (max-width: 459px) {
    .horizontal-break {
        width: 65%;
    }
}