:root {
  --day: url("https://st2.depositphotos.com/4022475/8896/v/450/depositphotos_88966914-stock-illustration-pixel-art-sky-seamless-vector.jpg");
  --night: url("https://1-background.com/images/stars-1/beautiful-blue-stars-fill.jpg");
  --sun: url("https://blob.gifcities.org/gifcities/2LTQ3K7DCHXQNDPIX4KOK4EX3J7QFT6T.gif");
  --moon: url("https://blob.gifcities.org/gifcities/CIOJL5VIKBPC7LGQL6H64647SKHIZTMI.gif");

  --bg-img: var(--day);
  --text-color: #000;
  --bg-color: #fff;
}

/* Reset estilo retrô */
body {
    font-family: "Times New Roman", Times, serif;
    color: var(--text-color);
    margin: 8px; 
    background-image: var(--bg-img);
}

/* Conteúdo centralizado dentro da página */
.container {
    width: 800px;
    margin: 0 auto;
    padding: 10px;
    border: 1px solid #000;
    background: rgba(255,255,255,0.9);
}

/* Títulos */
h1 {
    font-family: "Courier New", monospace;
    border: 1px dashed #000;
    padding: 10px;
    text-align: center;

    background: rgba(255, 255, 255, 0.85); /* fundo claro e translúcido */
    color: #000;
}

/* Links retrô */
a:link {
    color: #0000FF;
    text-decoration: underline;
}

/* Menu estilo tabela 90s */
.menu {
    border-collapse: separate;
    border-spacing: 2px;
    margin: 0 auto; /* centraliza a tabela */
}

.menu td {
    background-color: #D3D3D3;
    border: 1px solid #FFFFFF;
    border-top-color: #F0F0F0;
    border-left-color: #F0F0F0;
    border-right-color: #808080;
    border-bottom-color: #808080;
    padding: 5px 15px;
    text-align: center;
}

/* Centralizar imagem */
.center {
    display: block;
    margin: 0 auto;
}

/* Botão fixo no topo direita */
#theme-link {
  position: fixed;
  top: 50px;
  right: 50px;
  width: 100px;
  height: 100px;
  display: block;
  z-index: 9999;
}

#theme-link img {
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
}

/* Tema escuro — sobrescreve variáveis no próprio body quando a classe existe */
body.dark-theme {
  --bg-img: var(--night);
  --text-color: #fff;
  --bg-color: #0a0015;
}

/* Apenas para deixar texto legível no container quando escuro */
body.dark-theme .container {
  background: rgba(10,0,21,0.65);
  border-color: #aaa;
}