@media screen and (max-width: 720px) {
    body, html {
        overflow-x: hidden;
    }
    #indexation_plugin .indexation_content {
        flex-direction: column;
    }
    #indexation_plugin .indexation_names_container {
        width: 100%;
    }
    #indexation_plugin .indexation_card_container {
        width: 100%;
    }
    #indexation_plugin .buttons_choice {
        width: 90%;
    }
}

@media screen and (max-width: 620px) {
    .indexation_container {
        position: relative;
    }
    #indexation_plugin .letters{
        overflow: hidden;
        overflow-x: scroll;
        position: relative;
        width: 100%;
    }
    #indexation_plugin .indexation_letters {
        position: absolute;
        left: 0;
        top: 0;
    }

    #indexation_plugin .indexation_letter {
        font-size: 21px;
        margin: 5px 9px;
    }

    #indexation_plugin .shadow_letters {
        position: absolute;
        top: 0;
        margin: auto;
        width: 130px;
        height: 100px;
        background-color: #FFF;
        visibility: visible;
        z-index: 10;
        transition: box-shadow 0.1ms ease-in-out;
        box-shadow: 0 0 0 #FFF;
    }
    #indexation_plugin .shadow_letters.left {
        left: -160px;
    }
    #indexation_plugin .shadow_letters.right {
        box-shadow: -100px 0 30px #FFF;
        right: -160px;
    }

    #indexation_plugin .buttons_choice {
        font-size: 12px;
        justify-content: space-around;
    }

}
