skip to link text is visible on firefox but not on samsung internet? suggestion on css file also Options

[జిందం వాఐి]

* please find any shortcomings on my css code also
* i have skip link text_ "<span lang="te">దయచేసి జిందం వాఐి ఆలోచనల జాగా మార్పులు గురించి అరుసుకొను</span>"
* its hidden on samsung internet, visible on firefox on android device.
* is this normal?
* My Webpage
* css code

CODE

/* Skip link styling */
.text-assistive {
    -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    box-sizing: border-box;
    position: absolute;
    margin: 0;
    padding: 0;
}
.text-assistive.display-at-top-on-focus {
    top: 0;
    left: 0;
    width: 100%;
}
.text-assistive.display-at-top-on-focus:focus {
    -webkit-clip-path: none;
    clip-path: none;
    z-index: 999;
    height: 80px;
    line-height: 80px;
    background: white;
    font-size: 1.2rem;
    text-decoration: none;
    color: #1295e6;
    text-align: center;
}
#skip-link-target:focus {
    background: #084367;
    color: white;
}
/* end of skip link styling */

/* improved keyboard focus visibility */
a:focus {
    border-bottom-color: #1295e6;
}
.menu-right a:focus, .branding a:focus {
    background-color: white;
    color: #1295e6;
}
/* end of improved keyboard focus visibility */


/* basic styles for the rest of the page */
body {
    font-family: sans-serif;
    font-size: 1.5em;
    font-weight: bold;
    font-style: normal;
    margin: 0;
    padding: 0;
    background-color: #F0F0F0;
    color: #000000;
    line-height: 1.5em;
    letter-spacing: 0.12em;
    word-spacing: 0.16em;
    margin-bottom: 2em;
}
.bg-dark {
    background: #FFDBFF;
    color: #fff;
    min-height: 100px;
}
.content-width {
    box-sizing: border-box;
    max-width: 1208px;
    padding: 1rem;
    margin: 0 auto;
}
a {
    outline-color: transparent;
    text-decoration: none;
    color: #1295e6;
    border-bottom: 4px solid transparent;
    padding: 2px 1px 0;
}
a:hover {
    border-bottom-color: #1295e6;
    border-bottom: 1px solid;
}
.menu-right a, .branding a {
    color: white;
}
.menu-right a:hover, .branding a:hover {
    background-color: white;
    color: #1295e6;
}
.branding {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 220px;
    font-size: 2rem;
    font-style: italic;
    height: 68px;
}
.branding a {
    padding: 0 1rem;
}
.flex-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.menu-right {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    height: 68px;
}


.menu-right a {
    display: flex;
    align-items: center;
    padding: 0 1rem;
}


/* end of basic styles for the rest of the page */

/* start old css */

cite {
    font-style: normal;
}

footer {
    padding: 3px;
    background-color: #F6FEF6;
    color: #0d0c0c;
}

a:link {
    color: #3C6D2C;
}

a:visited {
    color: #ff0000;
}

a:active {
    color: #ec00ff;
}

a:focus {
    border-bottom: 1px solid;
}

/* end of old css */

[Christian J]

When tabbing through the links on the page, a blue box with a white link appears at the top.

Also, when using Ctrl+F in Vivaldi for the strings

CODE

ఇటీవలి ఆలోచనలకు వెళ్లండి

or

CODE

దయచేసి తారీఖు లెక్కలు అరుసుకొను

the browser says there's a match, even though I can't see anything on the page.

[pandy]

Yeah, I get the blue and white thing when tabbing too. Is that it? But the OP said it was visible in other browers.

It's darn confusing when you don't know the alphabet.