/* Estilos Globais */

/* Start https://www.cursors-4u.com */ * {cursor: url(https://cur.cursors-4u.net/food/foo-3/foo258.ani), url(https://cur.cursors-4u.net/food/foo-3/foo258.png), auto !important;} /* End https://www.cursors-4u.com */

body {
    /* Troque 'sua-imagem-de-fundo.gif' pelo seu padrão! */
    background-image: url('images/dango.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    height: 100%;
    margin: 0;
    
    background-attachment: fixed;
    font-family: 'VT323', monospace;
    font-size: 16px;
    color: #5d6e4f;
    /* Adicione um cursor customizado! */
    cursor: url('https://cursors.cursors-4u.net/cursors/cur-2/cur116.cur'), auto;
}

/* Estilo para o banner FIXO e CENTRALIZADO */
.banner-fixo-central {
    position: fixed; /* << A propriedade chave para fixar o elemento na tela */
    top: 0px;       /* Distância do topo da janela (ajuste como quiser) */
    
    /* Define a mesma largura do seu container principal */
    width: 932px; 
    
    /* Truque para centralizar um elemento de posição fixa */
    left: 50%;
    transform: translateX(-50%);
    
    z-index: 2000; /* Garante que o banner fique na frente de TUDO */
    
    /* Estilos visuais extras (opcional) */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    border: 2px solid white;
}

.layout-colunas {
    margin-top: 300px; /* << EMPURRA AS COLUNAS PARA BAIXO */
}

/* Container Principal */
.main-container {
    position: relative;
    display: flex; /* A mágica do layout em colunas! */
    justify-content: center;
    gap: 15px; /* Espaço entre as colunas */
    width: 980px;
    margin: 20px auto; /* Centraliza o container na página */
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.6); /* Fundo branco semi-transparente */
    border: 2px dotted #ff99cc;
    backdrop-filter: blur(2px); /* Efeito de vidro fosco (opcional) */
}

/* Estrutura das Colunas */
.left-column { width: 200px; }
.center-column { width: 500px; }
.right-column { width: 200px; }

.icone-texto {
    height: 20px; /* Ou o tamanho que preferir. 1em também é uma boa opção para se ajustar ao texto. */
    width: auto;  /* A largura se ajusta para não distorcer */
    
    /* A mágica do alinhamento: */
    vertical-align: middle; /* Alinha o meio da imagem com o meio do texto */
    
    /* Um espacinho para não ficar colado no texto: */
    margin-right: 8px; 
}

/* O estilo da "Caixinha" / Widget - A parte mais importante! */
.widget {
    background-color: rgba(255, 245, 250, 0.8); /* Rosa bem clarinho e semi-transparente */
    border: 1px dashed #ff99cc;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 15px; /* Espaço entre os widgets */
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
}

.dot-art-hellokitty {
    color: #ff66b2; /* Cor rosa */
    font-size: 12px;
    text-align: center; /* Centraliza a arte */
    line-height: 1.2; /* Ajusta o espaço entre as linhas */
}

.gif-fixo-topo {
    position: fixed;   /* << A propriedade mais importante! Fixa o elemento na tela. */
    
    top: 723px;         /* Distância do TOPO da tela. */
    right: -15px;       /* Distância da DIREITA da tela. */
    
    width: 461px;      /* << LARGURA do GIF. Mude este valor para redimensionar! */
    height: auto;      /* Mantém a proporção do GIF para não distorcer. */
    
    z-index: 9999;     /* Garante que o GIF fique na frente de todos os outros elementos. */
}

.widget-title {
    background-color: #f9d0ce;
    color: #c71585;
    padding: 3px 8px;
    margin: -10px -10px 10px -10px; /* Faz o título ocupar a largura toda */
    font-size: 18px;
    border-bottom: 1px dashed #ff99cc;
    text-align: center;
}

/* Estilos Específicos */
.header-image img {
    width: 100%;
    border: 2px solid #fff;
    box-shadow: 0 0 5px #ff99cc;
}

.profile-pic {
    width: 150px;
    display: block;
    margin: 0 auto 10px auto;
    border-radius: 5px;
    border: 1px solid #ffcce6;
}



.status-widget {
    text-align: center;
}

.nav-links {
    list-style-type: "♡"; /* Adiciona um coração como marcador */
    padding-left: 20px;
}
.nav-links a {
    text-decoration: none;
    color: #e06ea9;
}
.nav-links a:hover {
    background-color: #ffcce6;
}

.gif-decorativo {
    width: 199px; /* << AUMENTE ESTE VALOR até ficar do tamanho que você quer */
    height: auto; /* Mantém a proporção correta */
}

.visitor-counter {
    font-family: 'Press Start 2P', cursive;
    text-align: center;
    color: #ff66b2;
    letter-spacing: 5px;
}

/* Imagem decorativa que "flutua" na página */
.floating-sticker-1 {
    position: relative; /* Posição absoluta em relação à página */
    top: -238px;
    left: 977px; /* Ajuste os valores para posicionar onde quiser */
    width: 120px;
    animation: float 6s ease-in-out infinite; /* Animação de flutuação */
}

/* Animação para a imagem flutuante */
@keyframes float {
	0% { transform: translatey(0px); }
	50% { transform: translatey(-20px); }
	100% { transform: translatey(0px); }
}

/* Estilos para a imagem da garota anime que vai ficar na frente */
.anime-front {
    position: absolute; /* Permite posicionar a imagem livremente */
    top: 211px; /* Distância do topo da página. Ajuste este valor. */
    right: 964px; /* Distância da direita da página. Ajuste este valor. */
    width: 305px; /* Largura da imagem. Ajuste para o tamanho desejado. */
    height: auto; /* Mantém a proporção da imagem */
    z-index: 1000; /* << Este é o MAIS IMPORTANTE! Coloca a imagem no topo */
}

.twilight1 {
    position: relative; /* Permite posicionar a imagem livremente */
    top: 1200px; /* Distância do topo da página. Ajuste este valor. */
    right: 100px; /* Distância da direita da página. Ajuste este valor. */
    width: 305px; /* Largura da imagem. Ajuste para o tamanho desejado. */
    height: auto; /* Mantém a proporção da imagem */
    z-index: 1000; /* << Este é o MAIS IMPORTANTE! Coloca a imagem no topo */
}

.under-construction {
    position: relative; /* Permite posicionar a imagem livremente */
    top: 66px; /* Distância do topo da página. Ajuste este valor. */
    right: -20px; /* Distância da direita da página. Ajuste este valor. */
    width: 792px; /* Largura da imagem. Ajuste para o tamanho desejado. */
    height: auto; /* Mantém a proporção da imagem */
    z-index: 1000;
}