/* 
-------------------------
TEXT EFFECT
-------------------------
*/
.expanding-word {
    display: flex;
    flex-direction: column;
    gap: var(--size-3);
}

.name-text, .name-text-clicked {
    color: var(--violet-7);
    font-size: var(--font-size-6);
    background-color: whitesmoke;
    border-radius: 5px;
    padding-block: 0.5rem;
    padding-inline: 0.2rem;
    text-align: left;
    cursor: pointer;
    box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
    border: 1px solid black;
}

.name-text-clicked {
    background-color: var(--violet-1);
    box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px;
}

.first-letter, .first-letter-clicked {
    display: inline-block;
    background-color: whitesmoke;
    border-radius: 1rem;

    width: 60px;
    height: 60px;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: var(--font-size-6);
    box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
    border: 1px solid black;

    cursor: pointer;
}

.first-letter-clicked {
    background-color: var(--violet-1);
    box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px;
}

.sentence {
    padding-left: 0.4rem;
    bottom: 0.5rem;
    font-size: var(--font-size-4);
    overflow: hidden;
    box-sizing: border-box;
}

.letter:hover .sentence {
    visibility: visible;
}

@media screen and (max-width: 1020px) {
    .expanding-word {
        width: 100%;
    }
}