/* ==========================================================
   ATELIÊ :: folha de estilo
   estética GeoCities ~2000, 100% CSS, nenhum JavaScript
   ========================================================== */

/* todas as cores do site moram aqui: a paleta do ghuron.com (One Dark) */
:root {
  --fundo: #282c34;
  --texto: #dcdfe4;
  --azul: #61afef;
  --roxo: #c678dd;
  --verde: #98c379;
  --amarelo: #e5c07b;
  --vermelho: #e06c75;
  --ciano: #56b6c2;
  --cinza: #808080;

  --link: var(--azul);
  --link-visitado: var(--roxo);
  --link-hover: var(--fundo);
  --link-hover-fundo: var(--azul);
  --caixa: #21252b;          /* um tom abaixo do fundo */
  --caixa-projeto: #1d2026;
  --titulo: var(--roxo);
  --titulo-sombra: #16181d;
  --sombra: #16181d;          /* sombra dura das caixas */
  --projeto-titulo: var(--verde);
  --info: var(--ciano);
  --letreiro: var(--verde);
}

/* cursor de estrelinha (SVG embutido, sem imagem externa) */
html {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpolygon points='10,1 12.6,7.2 19.5,7.6 14.2,12 15.9,18.7 10,15 4.1,18.7 5.8,12 0.5,7.6 7.4,7.2' fill='%23e5c07b' stroke='%23282c34' stroke-width='1'/%3E%3C/svg%3E") 10 1, auto;
}

/* céu estrelado repetido, feito só com gradientes */
body {
  margin: 0;
  padding: 12px;
  color: var(--texto);
  background-color: var(--fundo);
  background-image:
    radial-gradient(1px 1px at 20px 30px, #fff, transparent),
    radial-gradient(1px 1px at 80px 120px, #fff, transparent),
    radial-gradient(2px 2px at 150px 60px, #e5c07b, transparent),
    radial-gradient(1px 1px at 200px 180px, #fff, transparent),
    radial-gradient(1.5px 1.5px at 120px 210px, #61afef, transparent),
    radial-gradient(1px 1px at 40px 160px, #fff, transparent),
    radial-gradient(2px 2px at 220px 100px, #c678dd, transparent);
  background-size: 240px 240px;
  font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", "Comic Neue", cursive;
  font-size: 15px;
  line-height: 1.4;
}

a { color: var(--link); cursor: pointer; }
a:visited { color: var(--link-visitado); }
a:hover { color: var(--link-hover); background: var(--link-hover-fundo); text-decoration: none; }

h2 { color: var(--titulo); text-shadow: 2px 2px 0 var(--titulo-sombra); margin: 18px 0 10px; }
h3 { color: var(--projeto-titulo); margin: 0 0 4px; }

hr {
  border: 0;
  height: 4px;
  background: linear-gradient(90deg, #e06c75, #e5c07b, #98c379, #56b6c2, #61afef, #c678dd);
  margin: 12px 0;
}

.centro { text-align: center; }
.pequeno { font-size: 12px; }

/* ---------- estrutura ---------- */

#tudo { max-width: 860px; margin: 0 auto; }

#meio {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 12px 0;
}

#menu { width: 190px; flex-shrink: 0; }
#conteudo { flex: 1; min-width: 0; }

/* caixa com borda dupla e sombra "de pixel", bem anos 2000 */
.caixa {
  background: var(--caixa);
  border: 4px double var(--azul);
  box-shadow: 4px 4px 0 var(--sombra);
  padding: 10px;
}

/* ---------- cabeçalho ---------- */

#topo h1 {
  font-weight: bold;
  font-size: 54px;
  letter-spacing: 3px;
  margin: 6px 0 0;
}

.arco-iris {
  background: linear-gradient(90deg, #e06c75, #e5c07b, #98c379, #56b6c2, #61afef, #c678dd, #e06c75);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: arco-iris 4s linear infinite;
}
@keyframes arco-iris { to { background-position: 200% 0; } }

.subtitulo { color: var(--link); font-style: italic; margin: 0 0 8px; }

.letreiro {
  background: #000;
  color: var(--letreiro);
  border: 2px solid var(--azul);
  font-family: "Courier New", monospace;
  font-weight: bold;
  padding: 3px 0;
}

/* ---------- menu ---------- */

.menu-titulo {
  margin: 0 0 6px;
  text-align: center;
  font-weight: bold;
  color: var(--fundo);
  background: var(--amarelo);
}
#menu ul { list-style: none; margin: 0; padding: 0; }
#menu li { margin: 4px 0; }

.contador { margin: 4px 0; }
.contador span {
  display: inline-block;
  background: #000;
  color: var(--letreiro);
  font-family: "Courier New", monospace;
  font-size: 18px;
  font-weight: bold;
  padding: 1px 3px;
  margin: 0 1px;
  border: 1px solid #3e4451;
}

/* ---------- efeitos clássicos ---------- */

.pisca { animation: pisca 1s steps(1) infinite; }
@keyframes pisca { 50% { opacity: 0; } }

.novo {
  display: inline-block;
  background: var(--vermelho);
  color: var(--fundo);
  text-shadow: none;          /* não herda a sombra do título */
  border: 1px solid var(--fundo);
  font-family: Arial, sans-serif;
  font-size: 11px;
  font-weight: bold;
  line-height: 1.4;
  padding: 0 5px;
  vertical-align: middle;
  transform: rotate(-8deg);
}

/* ---------- projetos ---------- */

/* cada projeto é uma "janelinha" com barra de título */
.projeto {
  width: 100%;
  margin: 0 0 14px;
  background: var(--caixa-projeto);
  border: 2px solid var(--azul);
  box-shadow: 4px 4px 0 var(--sombra);
}
.projeto td { vertical-align: top; padding: 8px; }
.projeto-barra {
  padding: 3px 8px;
  text-align: left;
  background: linear-gradient(90deg, var(--roxo), var(--azul));
  border-bottom: 2px solid var(--azul);
}
.projeto-barra h3 { display: inline; color: var(--fundo); margin: 0; font-size: 17px; }
.projeto-foto { width: 124px; }
.projeto-foto img { border: 1px solid var(--cinza); display: block; max-width: 120px; height: auto; }
.projeto-info { font-size: 12px; color: var(--info); margin: 0; }
.projeto-links { margin: 6px 0 0; }
.projeto p { margin: 6px 0 0; }

.sem-foto {
  width: 120px;
  height: 90px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--cinza);
  background: repeating-linear-gradient(45deg, #1d2026 0 6px, #2c313a 6px 12px);
  border: 1px solid var(--cinza);
  font-size: 12px;
}

.selo {
  font-family: Arial, sans-serif;
  font-size: 11px;
  font-weight: bold;
  vertical-align: middle;
  padding: 1px 5px;
  border: 1px solid var(--fundo);
}
.selo-pronto { background: var(--verde); color: var(--fundo); }
.selo-obras { background: var(--amarelo); color: var(--fundo); animation: pisca 1s steps(1) infinite; }
.selo-abandonado { background: #3e4451; color: var(--texto); }

.vazio { font-style: italic; color: var(--cinza); }

/* ---------- rodapé ---------- */

.selos88 { line-height: 1; }
.botao88 {
  display: inline-block;
  width: 88px;
  height: 31px;
  box-sizing: border-box;
  margin: 2px;
  padding: 3px 2px;
  border: 2px outset #c0c0c0;
  font: 9px/1.2 Verdana, Tahoma, sans-serif;
  text-align: center;
  vertical-align: middle;
  overflow: hidden;
}
.botao88 b { font-size: 10px; }
.b-bloco { background: var(--texto); color: var(--fundo); }
.b-js { background: #000; color: var(--vermelho); }
.b-css { background: var(--azul); color: var(--fundo); }
.b-comic { background: var(--roxo); color: var(--fundo); }

/* ---------- celular ---------- */

@media (max-width: 640px) {
  body { padding: 8px; }
  #topo h1 { font-size: 34px; }
  #meio { flex-direction: column; }
  #menu { width: auto; box-sizing: border-box; align-self: stretch; }
  .projeto td, .projeto th { display: block; }
}

/* respeita quem desativou animações no sistema */
@media (prefers-reduced-motion: reduce) {
  .arco-iris, .pisca, .selo-obras { animation: none; }
}