main {padding: 25px 40px;}

table a {color: #0066cc; background: transparent; text-decoration: none; font-weight: 500;}

table {
border-spacing: 0px;
padding: 0;
table-layout: auto;
width: 100%;
}

input {
background-clip: padding-box; 
background-color: white; 
border: 1px solid black; 
border-radius: 0;
font-family: inherit;
font-size: 0.875rem; 
margin-bottom: 2rem; 
padding: 0.375rem 0.625rem; 
box-sizing: border-box; 
width: 25vw; 
min-width: 220px;
}

td {padding-right: 0.75rem; text-indent: 0; text-align: left; font-weight: normal; font-size: 1rem; height: 40px;}
td:first-child {width: fit-content; padding-right: 0; text-align: right; max-width: 19px; overflow: hidden;}
 img {width: auto; height: 25px; margin: 0; vertical-align: middle;}
td:nth-child(2) {width: 100%; padding-left: 0.625rem; color: #999999; font-weight: bold;}
td:nth-child(3) {width: fit-content; font-size: 0.875rem; white-space: nowrap;}
td:nth-child(4) {width: fit-content; font-size: 0.875rem; padding-right: 0; white-space: nowrap;}

th {border-bottom: 2px solid #333333; color: #333333; font-size: 0.75rem; font-weight: 600; text-align: left; padding: 15px 1px; text-transform: uppercase;}
 .letra {font-size: 1.25rem; padding-top: 3rem; padding-left: 0.25rem;}
 .primeira {padding-top: 0;}

@media (max-width: 640px) {
main {padding: 40px;}
input {width: 100%; margin-bottom: 40px;}
}

@media (max-width: 408px) {
td:nth-child(3) {display: none;}
}

#a::before {content: 'A';}
#b::before {content: 'B';}
#c::before {content: 'C';}
#d::before {content: 'D';}
#e::before {content: 'E';}
#f::before {content: 'F';}
#g::before {content: 'G';}
#h::before {content: 'H';}
#i::before {content: 'I';}
#j::before {content: 'J';}
#k::before {content: 'K';}
#l::before {content: 'L';}
#m::before {content: 'M';}
#n::before {content: 'N';}
#o::before {content: 'O';}
#p::before {content: 'P';}
#q::before {content: 'Q';}
#r::before {content: 'R';}
#s::before {content: 'S';}
#t::before {content: 'T';}
#u::before {content: 'U';}
#v::before {content: 'V';}
#w::before {content: 'W';}
#x::before {content: 'X';}
#y::before {content: 'Y';}
#z::before {content: 'Z';}

/*
@media screen and (prefers-color-scheme: dark) {
 main {background-color: #111111; color: #fafafa;}
 main a:link {color: #83a1cd;}
 main a:hover {color: #4281a4;}
 main a:active {color: #83a1cd;}
 main a:visited {color: #83a1cd;}
 img {filter: brightness(0.8) contrast(1.2);}
 th, input {background-color: inherit; color: inherit; border-color: #fafafa;}
}*/