/* =========================
   ROOT VARIABLES
========================= */
:root {
  --header-image: url('https://zika-viruz.neocities.org/a5i0pu.gif');
  --body-bg-image: url('https://zika-viruz.neocities.org/bats.gif');

  --bg: red;
  --text: white;
  
  --panel-dark: #120000;
  --panel-mid: #1a0000;
  --panel-light: #3a0000;
}

/* =========================
   BASE / GLOBAL DEPTH
========================= */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 200vh;

  font-family: "Pirata One", serif;
  color: var(--text);

  background-color: var(--bg);
  background-image: var(--body-bg-image);
  background-size: 65px;

  /* global depth (makes whole site feel “inside screen”) */
  box-shadow: inset 0 0 120px rgba(0,0,0,0.8);
}

/* =========================
   CONTAINER
========================= */
#container {
  max-width: 900px;
  box-shadow:
    0 8px 15px rgba(0, 0, 0, 0.5),
    0 25px 50px rgba(0, 0, 0, 0.35),
    0 50px 90px rgba(255, 0, 0, 0.1)
    ,inset 0 0 80px rgba(0,0,0,0.6);
  margin: 0 auto;
}

/* =========================
   GLOBAL 3D PANEL SYSTEM
========================= */
.top-image {
    position: absolute;
    top: 0;
    left: -2px;
    height: 100%;
    width: auto;
}
#header{
     position: relative;
    height: 150px; /* whatever your header height is */
    overflow: hidden;
  }
#header,
#navbar {
    padding: 10px;
    border: 2px solid #880808;
  border: 2px solid #2b0000;
  background: linear-gradient(
    to bottom,
    var(--panel-light),
    var(--panel-mid),
    var(--panel-dark)
  );

  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,0.18),
    inset -3px -3px 0 rgba(0,0,0,0.85),
    0 8px 18px rgba(0,0,0,0.6);
}

main,
aside,
.caixa-redes {
    padding: 10px;
    margin-bottom: 25px;
    border: 2px solid #880808;
  border: 2px solid #2b0000;
  background: linear-gradient(
    to bottom,
    var(--panel-light),
    var(--panel-mid),
    var(--panel-dark)
  );

  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,0.18),
    inset -3px -3px 0 rgba(0,0,0,0.85),
    0 8px 18px rgba(0,0,0,0.6);
}
.caixa-redes h1 { 
  list-style: none;
    padding-left: 5px;
    margin: 10px;
  
  }


.caixa-redes ul {
    list-style: none;
    padding-left: 5px;
    margin: 20px;
}

.caixa-redes a {
    font-size: 27px;
    text-decoration: none;
}
/* =========================
   HEADER (RAISED BANNER)
========================= */
#header {
  height: 150px;
  background-image: var(--header-image);
  background-size: cover;
  background-position: center;

  border-bottom: 3px solid var(--accent);

  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.2),
    0 10px 25px rgba(0,0,0,0.7);
}

/* =========================
   NAVBAR (CLICKABLE UI BAR)
========================= */
#navbar {
  height: 57px;
  background-color: black;
}

#navbar ul {
  display: flex;
  justify-content: space-evenly;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
  color:red;
}

#navbar li {
  padding-top: 10px;
  padding-bottom: 10px;
}

#navbar a {
  color:red ;
  font-size: 27px;
  font-weight: 900;
  text-shadow: -2px 1px black;
  padding: 2px 6px;
  transition: 0.1s;
}

#navbar a:hover {
  color: white;
  background: linear-gradient(to bottom, #2b0000, #120000);

  border: 1px solid red;

  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,0.15),
    inset -1px -1px 0 rgba(0,0,0,0.8);
}

/* =========================
   FLEX LAYOUT
========================= */
#flex {
  display: flex;
}

aside {
  width: 200px;
  padding: 20px;
  font-size: smaller;

  background-image: url('https://neocities.org/site_thumbnails/18/12/zika-viruz/tapete.gif.210x158.webp');
}

main {
  flex: 1;
  padding: 20px;
}

/* ordering */
#leftSidebar { order: 1; }
main { order: 2; }
#rightSidebar { order: 3; }

/* =========================
   TYPOGRAPHY (DEPTH TEXT)
========================= */
h1, h2, h3 {
  color: #f2f2f2;

  text-shadow:
    1px 1px 0 black,
    0 0 6px rgba(255,0,0,0.4);
}

h1 {
  font-size: 43px;
}

/* =========================
   IMAGE (OBJECT CARD STYLE)
========================= */
#image {
  float: right;
  margin: 10px 0 10px 15px;
  width: 170px;
  padding: 10px;

  position: relative;

  /* thick rounded red frame */
  border-radius: 18px;
  border: 5px transparent #ff2a2a;

  background: linear-gradient(
    to bottom right,
    rgba(255, 40, 40, 0.25),
    rgba(0, 0, 0, 0.55)
  );

  /* heavy 3D depth */
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,0.25),
    inset -4px -4px 0 rgba(0,0,0,0.75),
    0 14px 30px rgba(0,0,0,0.75),
    0 0 18px rgba(255, 0, 0, 0.45);
}

#image::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 6px;
  right: 6px;
  height: 45%;

  border-radius: 14px;

  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.35),
    transparent
  );

  pointer-events: none;
}

#image img {
  width: 100%;
  display: block;
  border-radius: 12px;

  filter: contrast(1.15) saturate(1.2);
}

/* =========================
   TEXT BOX (3D PAPER PANEL)
========================= */
#text-limit p {
  max-width: 500px;
  margin: 10px auto;
  padding: 15px;

  background: linear-gradient(to bottom, darkred, #2b0000);

  border: 2px solid var(--accent);
  border-radius: 7px;

  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,0.15),
    inset -2px -2px 0 rgba(0,0,0,0.8),
    0 8px 15px rgba(0,0,0,0.5);
}

/* =========================
   GALLERY
========================= */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 20px;
}

.gallery img {
 width: 150px;
 height: 150px;
  display: block;
 

  object-fit: cover; /* crops image into square */

  border: 2px solid black;
  cursor: zoom-in;
  transition: transform 0.2s ease;
  position: relative;
  z-index: 1;
}

.gallery img:hover {
  transform: scale(1.05);
}

/* LIGHTBOX (ZOOM) */
.lightbox {
  display: none;
}

.lightbox:target {
  display: flex;
  position: fixed;
  inset: 0;
  background: transparent rgba(0, 0, 0, 0.98);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.lightbox:target a {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.lightbox:target img {
  max-width: 70vw;
  max-height: 70vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  border: 3px solid black;
  box-shadow: 0 0 40px black;
}

/* =========================
   DETAILS BOX
========================= */
details {
  background: #1a0000;
  border: 1px solid #880808;
  padding: 10px;
}

summary {
  cursor: pointer;
  font-size: 22px;
  color: white;
}

summary:hover {
  color: #940025;
}

/* =========================
   LINKS (3D CLICK FEEL)
========================= */
#container a {
  color: var(--accent);
  font-weight: bold;
  text-decoration: none;
}

#container a:hover {
  color: white;
  text-decoration: underline;
}

/* =========================
   LISTS
========================= */
ul {
  margin-top: 10px;
}

/* =========================
   RESPONSIVE
========================= */
@media only screen and (max-width: 800px) {
  #flex {
    flex-wrap: wrap;
  }

  aside {
    width: 100%;
  }

  main {
    order: 1;
  }

  #leftSidebar { order: 2; }
  #rightSidebar { order: 3; }
}

details {
  margin: 10px 0;
}

details > summary {
    height: 40px;
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
}


details > summary:hover {
  color: white;
}

.box {
  display: flex;
  gap: 15px;
  align-items: flex-start;

  padding: 10px;
  margin-top: 10px;

  background: linear-gradient(to bottom, #2b0000, #120000);
  border: 2px solid #5c0009;
  border-radius: 8px;

  box-shadow:
    0 8px 20px rgba(0,0,0,0.6),
    inset 0 0 10px rgba(0,0,0,0.7);
}

.box img {
  width: 100px;
  height: auto;
  border-radius: 6px;
  border: 2px solid #ff2a2a;
  box-shadow: 0 0 10px rgba(0,0,0,0.8);
}

.box h3 {
  margin: 0;
  color: #fff;
}

.box p {
  margin: 5px 0 0 0;
  font-size: 14px;
  color: #f2f2f2;
}