html { background-image: url('fundo.jpg'); background-position: left; background-repeat: repeat;
       background-attachment: fixed;  background-size: 100%; }

body { font-family: verdana; padding:2px; margin:2px; font-size: 18px; padding:0px 10px 0px 4px; }
#f { font-size: 22px; }

table { width:100%; }
#branco { color: #999999; }
.linha { border-bottom: 3px solid #FF9800; }
.linha2 { border-bottom: 3px solid #FF9800; }

 .s {  font-weight: bold;  }
.s.branco { color: #999999; }
.s.gold { color: #d3b35a; }
.s.green { color: #4CAF50; }
.s.blue { color: #4fc3f7; }
.s.orange { color: #FF9800; }
.s.red { color: #f44336; }
.s.roxo { color: #953CC7; }
#kd { image:url('kd.png');}

td {  padding-left: 6px; border: none; border-bottom: 3px solid #00ffff; padding-bottom: 2px; }

a:link   {  text-decoration: none; font-size: bold; }
a:hover  { color: #ffffff; text-decoration: none; }
a   { color: #3399ff; text-decoration: none; text-align: center;}
img { vertical-align: bottom;  border: 3px; }
#i {   width: 160px; height: 160px; }

@media only screen and (min-width: 680px) { #menu_menor  { display:none; visibility:hidden; } }
@media only screen and (max-width: 680px) { #menu_maior  { display:none; visibility:hidden; } }

div.d { text-align: center; font-family: Comic Sans MS;  
        text-shadow: 3px 0px 0px #000000, -1px 0px 0px #000000, 0px 1px 0px #3700a6, 0px -1px 0px black;
        font-weight: bold; color: #d3b35a }

.center  { text-align: center; display: block; margin-left: auto; margin-right: auto; }

@media only screen and (max-width: 1200px) { table td:nth-child(4)  { display:none; visibility:hidden; } }
@media only screen and (max-width: 900px)  { table td:nth-child(3)  { display:none; visibility:hidden; } }

.nome { color: #00ffff; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; 
         background: linear-gradient(45deg, red, blue, yellow, green, Goldenrod, SpringGreen, violet, Maroon, Orange, DarkBlue);
    background-size: 300%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: anime-gradiente 30s linear infinite;
}

@keyframes blinker {    10% { opacity: 0; }  }

.piscar { animation: blinker 1s linear infinite;  }

@keyframes anime-gradiente {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}


.animada {
    position: relative;
    display: inline-block;
    
    padding: 5px; /* espessura da borda */
    overflow: hidden;
}

.animada::before {
    content: "";
    position: absolute;
    inset: -50%;
    background: conic-gradient(
        red,
        yellow,
        lime,
        cyan,
        blue,
        magenta,
        red
    );
    animation: girar 2s linear infinite;
}

.animada img {
    position: relative;
    display: block;
    
    z-index: 1;
}

@keyframes girar {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}