/* ~*~ Sergio Folchini Fã Clube Oficial ~*~ layout by xX_webmaster_Xx */
body{
  margin:0;
  background:#000020;
  background-image:
    radial-gradient(#fff 1px,transparent 1.5px),
    radial-gradient(#ff0 1px,transparent 1.5px),
    radial-gradient(#0ff 1px,transparent 1.5px);
  background-size:60px 60px,90px 90px,130px 130px;
  background-position:0 0,30px 45px,70px 20px;
  font-family:Verdana,Tahoma,Arial,sans-serif;
  font-size:12px;
  color:#000;
  cursor:crosshair;
}
a{color:#0000ee;font-weight:bold}
a:visited{color:#551a8b}
a:hover{color:#ff0080;background:#ffff00}

#tudo{
  width:900px;max-width:calc(100% - 16px);
  margin:10px auto;
  background:#fff;
  border:4px ridge #c0c0c0;
}
#topo{
  background:linear-gradient(#ff66cc,#9900cc);
  padding:16px 10px 10px;
  text-align:center;
  border-bottom:4px ridge #c0c0c0;
}
#topo h1{
  margin:0;
  font-family:"Comic Sans MS","Comic Sans",cursive;
  font-size:44px;
  color:#ffff00;
  text-shadow:3px 3px 0 #ff0000,6px 6px 0 #000;
  letter-spacing:1px;
}
#topo .sub{color:#fff;font-weight:bold;font-size:14px;margin-top:6px;text-shadow:1px 1px #000}
marquee{background:#000;color:#00ff00;font-family:"Courier New",monospace;font-weight:bold;padding:4px 0;font-size:13px}

#menu{background:#ffccff;border-bottom:2px dashed #9900cc;text-align:center;padding:6px}
#menu a{margin:0 6px;font-family:"Comic Sans MS",cursive;font-size:14px}

#colunas{display:flex;flex-wrap:wrap}
#lateral{
  flex:0 0 210px;width:210px;max-width:210px;
  background:#ffffcc;
  border-right:2px dotted #ff9900;
  padding:8px;
  box-sizing:border-box;
}
#conteudo{flex:999 1 400px;padding:12px;min-width:0}

.caixa{border:2px outset #ccc;background:#fff;margin-bottom:10px}
.caixa h3{
  margin:0;padding:3px 6px;
  background:linear-gradient(#3399ff,#0033cc);
  color:#fff;font-size:12px;
  font-family:Tahoma,Verdana,sans-serif;
}
.caixa .dentro{padding:6px;text-align:center}
.caixa ul{margin:0;padding:0 0 0 16px;text-align:left}

.post{border:1px solid #9900cc;margin-bottom:16px;background:#fdf5ff}
.post h2{
  margin:0;padding:6px 8px;
  background:#9900cc;color:#fff;
  font-family:"Comic Sans MS",cursive;font-size:18px;
}
.post .data{font-size:10px;color:#666;padding:2px 8px;background:#eee;border-bottom:1px solid #ccc}
.post .texto{padding:8px;line-height:1.5}
.post .rodape{font-size:10px;padding:4px 8px;border-top:1px dashed #ccc;color:#666}
.post img{border:3px solid #000;max-width:100%;height:auto}

.foto-post{float:right;width:180px;margin:0 0 6px 10px}
.foto-post img{width:100%}
.legenda{font-size:10px;text-align:center;color:#990066;font-style:italic}

.pisca{animation:pisca 1s steps(1) infinite}
@keyframes pisca{50%{visibility:hidden}}
.arco{
  background:linear-gradient(90deg,red,orange,#cc0,green,blue,indigo,violet);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-weight:bold;
}
.new{background:red;color:#ff0;font-weight:bold;font-size:9px;padding:1px 3px;border:1px solid #ff0}

.contador{
  display:inline-block;background:#000;color:#0f0;
  font-family:"Courier New",monospace;font-size:18px;font-weight:bold;
  padding:2px 6px;border:2px inset #888;letter-spacing:3px;
}
.selo{
  display:inline-block;width:88px;height:31px;box-sizing:border-box;
  border:1px solid #000;font-size:9px;line-height:1.1;
  font-family:Verdana,sans-serif;font-weight:bold;
  margin:2px;vertical-align:middle;overflow:hidden;padding:2px;
}
.s1{background:#336;color:#fc0}
.s2{background:#fff;color:#c00}
.s3{background:#0a0;color:#fff}
.s4{background:#000;color:#0ff}
.s5{background:#f60;color:#fff}
.s6{background:#ccc;color:#000}

.player{background:#c0c0c0;border:2px outset #fff;padding:4px;font-size:10px;text-align:left}
.player .tela{background:#000;color:#0f0;font-family:"Courier New",monospace;padding:3px;margin-bottom:3px;white-space:nowrap;overflow:hidden}
.player button{font-size:10px;padding:1px 4px;min-width:24px}

/* galeria */
.galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.galeria figure{margin:0;background:#ffffcc;border:2px solid #ff9900;padding:5px;text-align:center}
.galeria img{width:100%;height:170px;object-fit:cover;border:1px solid #000;display:block}
.galeria figcaption{font-size:10px;margin-top:4px;color:#990066}

/* recados */
.form-recado{background:#e0f0ff;border:2px groove #69c;padding:8px;margin-bottom:12px}
.form-recado label{display:block;font-weight:bold;margin-top:6px}
.form-recado input,.form-recado textarea{width:100%;box-sizing:border-box;font-family:Verdana,sans-serif;font-size:12px;border:2px inset #ccc}
.form-recado button{margin-top:8px;font-weight:bold;padding:4px 12px}
.recado{border:1px dashed #69c;padding:6px;margin-bottom:8px;background:#f5fbff}
.recado b{color:#cc0066}
.recado .quando{font-size:10px;color:#888}

#rodape{
  text-align:center;padding:10px;background:#000;color:#ccc;font-size:10px;
  border-top:4px ridge #c0c0c0;
}
#rodape a{color:#0ff}

.rastro{position:fixed;pointer-events:none;font-size:14px;color:#ff0;z-index:999;text-shadow:0 0 3px #f0f}

@media (max-width:640px){
  #topo h1{font-size:28px}
  #lateral{flex:1 1 100%;width:auto;max-width:none;border-right:0;border-bottom:2px dotted #ff9900}
  .foto-post{float:none;width:auto;margin:0 0 8px}
}