body {
    margin: 0;
    padding: 0;
    overflow-x: hidden; 
}


body::before {
    content: "";
    position: fixed; 
    
    top: 50%;
    left: 50%;
    
    width: 300vmax; 
    height: 300vmax;
 
    z-index: -9999;
    
  
    background: repeating-conic-gradient(
        #C1E1C1 0deg 15deg,  /* Verde Claro */
        #77DD77 15deg 30deg  /* Verde Escuro */
    );
    
    
    animation: girar-tela 20s linear infinite;
    
    
    pointer-events: none; 
}

@keyframes girar-tela {
    0% {
       
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        
        transform: translate(-50%, -50%) rotate(360deg);
    }
}
body::after {
    content: "";
    position: fixed;
    bottom: -30px;
    left: -20px;
    width: 250px; 
    height: 250px; 
    
    background-image: url('https://i.imgur.com/QgslAZu.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom left;

    animation: balanco-personagem 3s ease-in-out infinite;
    
    z-index: 999; 
    pointer-events: none; 
}

@keyframes balanco-personagem {
    0%, 100% {
        transform: rotate(5deg) scale(1);
    }
    50% {
        transform: rotate(8deg) scale(1.03);
    }
}

body, td, p, input, div {
    font-family: "MS Sans Serif", "Geneva", sans-serif !important;
    font-size: 11px !important;
}

.container, .column, table, .content, .main {
    border: 1px dotted #2e4d1a !important; 
    background-color: rgba(180, 210, 160, 0.8) !important;
}

.orange, .blue, h1, h2, h3, h4, h5, .heading {
    background: linear-gradient(to bottom, #77DD77, #556b2f) !important; 
    color: #ffffff !important;
    text-shadow: 1px 1px #000000; 
    border: 1px solid #334411 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}

a, a:link, a:visited {
    color: #2e4d1a !important;
    text-decoration: none !important;
}

a:hover {
    color: #ffffff !important;
    background-color: #556b2f !important;
    text-decoration: underline dotted !important;
}

body, a {
    cursor: url('https://cur.cursors-4u.net/games/gam-4/gam372.cur'), auto !important;
}

img {
    image-rendering: pixelated;
    border: 1px solid #556b2f;
}

body, table, td, p, div, input, textarea {
    font-family: Verdana, Arial, Helvetica, sans-serif !important;
    font-size: 11px !important; 
    color: #2e4d1a !important;
    line-height: 1.4 !important;
}

h1, h2, h3, h4, .orange, .blue, .heading {
    font-family: Arial, sans-serif !important;
    font-size: 12px !important;
    text-transform: lowercase !important; 
    letter-spacing: 2px !important; 
    font-weight: bold !important;
    padding: 4px 10px !important;
    background-color: #556b2f !important; 
    color: #ffffff !important;
    border: 1px solid #2e4d1a !important;
}

a, a:link, a:visited {
    color: #4a6d32 !important;
    text-decoration: none !important;
    border-bottom: 1px dotted #4a6d32; 
}

a:hover {
    color: #77DD77 !important;
    background-color: #f0fdf0; /* Fundo verdinho bem claro ao passar o mouse */
    border-bottom: 1px solid #77DD77;
    cursor: crosshair; /* Cursor de "mira" que era febre na época */
}

.container, .column, table {
    border: 1px solid #77DD77 !important;
    background-color: rgba(255, 255, 255, 0.85) !important; /* Branco levemente transparente */
}

b, strong {
    color: #556b2f !important;
}

.fwiendFace img {
    width: 0;
    height: 0;
    padding-left: 100px;  /* Largura */
    padding-top: 100px;   /* Altura */
    background-image: url('https://i.imgur.com/fLSjHmO.gif');
    background-size: cover; 
    background-repeat: no-repeat;
    border: none;
}

.fwiendFace b {
    font-size: 0;
}

.fwiendFace b::after {
    content: "KASANETETO#1FAN";
    font-size: 12px; 
    visibility: visible;
    display: inline-block;
}

#header {
    all: unset;
    font-family: Arial;
    font-size: 15px;
    background: #c1e1c1;
    color: #fff;
    position: fixed;
    width: calc(100% - 15px);
    height: 22px;
    padding: 5px;
    left: 0px;
    top: 0px;
    margin-bottom: 40px;
    border-bottom: 1px solid black;
    padding-left: 10px;
    padding-top: 6px;
    overflow: hidden;
    z-index: 300;
}

#hSub {
    all: unset;
    font-family: Arial;
    font-size: 15px;
    background: #97bb97;
    font-size: small;
    margin: 0px;
    padding: 5px;
    padding-top: 5px;
    padding-left: 5px;
    padding-left: 10px;
    padding-top: 4px;
    position: fixed;
    left: 0;
    top: 34px;
    width: calc(100% - 15px);
    color: #000;
    height: 15px;
    z-index: 300;
}

.rightHead {
    background: #ffcc9900;
    color: #cc6633;
    padding-left: 4px;
}

.boxHead {
    background: #14141400;
    color: white;
    padding: 3px;
    padding-bottom: 4px;
    padding-left: 6px;
}

.tableLeft {
    background: #77dd773d;
    width: 25%;
    padding: 10px;
    vertical-align: top;
    overflow: hidden;
}

.tableRight {
    width: 75%;
    background: rgb(255 255 255 / 0%);
    padding: 10px;
    vertical-align: top;
    overflow-wrap: anywhere;
}

.fwiendCount {
    color: #00a725;
}

.player.box {
    /* Define uma cor branca com 70% de opacidade */
    background-color: rgba(255, 255, 255, 0.7); 
    
    /* Adiciona a imagem da Kasane Teto */
    background-image: url('https://i.imgur.com/EUWX1Uv.gif');
    
    /* Ajustes para a imagem cobrir o fundo sem repetir */
    background-size: cover;
    background-position: center;
    background-blend-mode: overlay; /* Mistura a cor branca com a imagem */
    
    /* Estilização extra para o player */
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #ddd;
}

.songName {
    /* Garante que o texto seja legível sobre a imagem */
    color: #000;
    text-shadow: 1px 1px 2px rgba(255,255,255,0.8);
}

/* 1. Mudar o Nome para KASANETETO#1FAN */
a[href="/?id=1"] div b {
    display: none; /* Esconde o nome "Tom" */
}

a[href="/?id=1"] div::after {
    content: "KASANETETO#1FAN"; /* Insere o novo nome */
    font-weight: bold;
}

/* 2. Mudar a Foto para o GIF da Teto */
a[href="/?id=1"] img {
    box-sizing: border-box;
    padding-left: 150px; /* Mesma largura da imagem para "empurrar" a original */
    width: 150px; /* Ajuste o tamanho conforme preferir */
    height: 150px;
    background-image: url('https://i.imgur.com/fLSjHmO.gif');
    background-size: cover;
    background-position: center;
    display: block;
    border-radius: 8px; /* Opcional: deixa os cantos arredondados */
}

#imgPreview img {
    width: auto;
    height: auto;
    max-height: calc(100% - 10px);
    max-width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border: 5px solid #ffffff00;
    cursor: zoom-out;
    background: #ffffff00;
}