/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   
   /* nao repare no meu codigo, eu faço muitos enjambres pra funfar ≽^•⩊•^≼ */
   
  body {
  margin: 0;
  background-color: #1f1d24;
  background-image: url("/pattern1.png");
  background-repeat: repeat;
  background-size: 100px 100px;
  animation: patternDrift 100s linear infinite;
  overflow-x: hidden;
  font-size: 16px;
  color: #ffffff;
  line-height: 1.7;
  font-family: 'Special Elite', monospace;
}
  
@keyframes patternDrift {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 200px 200px;
  }
}

  .links-title {
    font-size: 20px;
    letter-spacing: 4px;
    font-family: 'IM Fell DW Pica', cursive;
    flex-direction: column;
    text-align: center;
  }
  
  .pagetitle {
    font-family: 'Spectral', serif;
    font-size: 17px;
    line-height: 1.8;
  }
  
  html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
  }
  
  .linkslinks {
    flex-direction: column;
    text-align: justify;
  }
  
  .linkslinks a {
    color: white;
  }
  
  .linkslinks a:visited {
    color: #d0d1d9;
  }
  
   .linkslinks a:hover {
    color: #f5db67;
  }
  
  

.banner {
  position: relative;
  margin-top: 30px;
  width: 100vw;          /* todo o topo completo*/
  height: 300px;         
  overflow: hidden;      /* corta o excesso */

}

.banner-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.catinho {
  position: absolute;
  top: 0px;
  right: 10px;

  width: 180px;
  height: auto;

  transition: transform 0.25s ease-out;
  z-index: 3;
  cursor: pointer;
}

.catinho:hover {
  transform:
    translate(-4px, 2px)
    rotate(-8deg)
    scale(1.05);
}


.ticker {
  background: #1b1b1b;
  width: 100vw;
  margin-left: calc(50% - 50vw); /* full bleed !!!1111!1*/
  color: #fff;
  padding: 6px 0;
  overflow: hidden;
}


.aboveheader {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 40px;
  max-width: 1150px;
  margin: 60px auto 0;
  padding: 0px 25px;
}

.allpage {
  background: #2a2832;
  color: #fff;
  border-radius: 10px;    /* borda arredondada :> */
  padding: 64px 72px;
  outline: 2px solid rgba(255,255,255,0.2);
}

  .pagecontent {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
}


  .block {
  margin-bottom: 40px;
  }
  
  .blocktitle {
  font-family: 'Tiny5', monospace;
  background: #32313b;
  color: #ffffff;
  padding: 10px 18px;
  font-size: 30px;
  letter-spacing: 0px;
  border-radius: 14px 14px 0px 0px;
  margin-bottom: -10px;          
  position: relative;
  z-index: 2;
  text-shadow: 0 1px 1px rgba(0,0,0,0.5);
  }
  
  
  .blockbody {
  background: #43424f; 
  color: #f1f1f1;
  padding: 22px 24px;
  border-radius: 12px;
  line-height: 1.7;
  text-align: justify;
  }
  
  .blockbodyscroll {
  max-height: 200px;
  overflow-y: auto;
  }
  
  .blockbodygrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  }
  
  .panelgrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }

  .imagebutton {
  display: block;
  margin-bottom: 14px;
  text-decoration: none;
  padding: 8px;
  outline: 2px solid rgba(255,255,255,0.35);
  border-radius: 8px;
}

  .imagebutton img {
  display: block;
  width: 100%;
  border-radius: 14px;
  border: 2px solid rgba(255,255,255,0.35);
    transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;
}
 
  .imagebutton:hover img {
  transform: translateY(2px);
}
  
  
  .introrow {
    display: flex;
    gap: 12px;
    align-items: flex-start;
  }
  
  .jotareal {
    width: 400px;
    max-width: 100%;
    border-radius: 4px;
    margin-left: -16px;
    margin-bottom: 2px;
  }
  
    .intromsg p {
    margin-top: 0;
    letter-spacing: -0.2px;
  }



.sidebarleft {
  display: flex;
  flex-direction: column;
  gap: 32px;
  color: #ddd;
  font-size: 14px;
  line-height: 1.5;
  opacity: 0.9;
}

.sidebox {
  padding: 16px 18px;
  background: #2a2832;
  border-radius: 10px;    /* borda arredondada :o */
  outline: 2px solid rgba(255,255,255,0.2);

  
}






.menu-title {
  text-align: center;
  font-family: 'Tiny5', serif;
  font-size: 40px;
  margin-top: 2px;
  letter-spacing: 10px;
  color: #ddd;
  margin-bottom: 1px;
}

.menu-divider {
  margin: 8px 0 18px;
  border-top: 2px dashed rgba(255,255,255,0.45);
}


.menu-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px
}

.menu-buttons a {
  background: #facc1b;
  color: #41465d;
  text-align: center;
  padding: 12px 14px;
  border-radius: 12px;
  font-family: 'Libertinus Mono', monospace, bold;
  font-size: 16px;
  text-decoration: none;
  letter-spacing: 1px;
  outline: 2px solid rgba(255,255,255,0.2);
  
  transition:
  transform 0.15s ease,
  outline 0.15s ease,
  background 0.15s ease;
}

.menu-buttons a::before,
.menu-buttons a::after {
  content: " ✦ ";
  color: #fff;
  opacity: 0.9;
}

.menu-buttons a::before {
  margin-right: 6px;
}

.menu-buttons a::after {
  margin-left: 6px;
}

  .menu-buttons a:hover {
    background: #f2c721;
      transform: translateY(2px);
   box-shadow:
    inset 0 -1px 0 rgba(0,0,0,0.25),
    0 2px 0 rgba(0,0,0,0.4);
  }
  

  
  
  .abadomusicplayer {
    flex-direction: column;
    text-align: center;
  }
  
  .fofocas {
    font-size: 20px;
    letter-spacing: 1px;
    font-family: 'IM Fell DW Pica', cursive;
    flex-direction: column;
    text-align: center;
  }
  
  #botaomediaplayer {
    background: #b58410;
    color: #d0d0d6;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
  
  #botaomediaplayer:hover {
    background: #a6780d;
  }
  
  .player {
    text-align: center;
    flex-direction: column;
    background: #cfac23;
    padding: 2px;
    border-radius: 10px;
    width: 200px;
  }


.footer {
  text-align: center;
  font-size: 13px;
  margin: 40px 0;
  color: #fff;
}