* {
      margin: 0;
      padding: 0;
      box-sizing: border-box; /* Essencial para responsividade */
    }
    
    body {
      font-family: "Audiowide", sans-serif;
      font-weight: 400;
      font-style: normal;
      width: 100%;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
      margin: 0; /* Garante que o body tenha a altura da tela */
      align-items: center;
      background-image: url(imagens/background.png);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      background-attachment: fixed;

    }

    .logo-Container{
      width: 550px;
      -webkit-mask-image: linear-gradient(to bottom, transparent 0px, black 80px),
                            linear-gradient(to right, transparent, black 5%, black 85%, transparent),
                            linear-gradient(to top, transparent 0px, black 10px);
      mask-image: linear-gradient(to bottom, transparent 0px, black 30px),
                    linear-gradient(to right, transparent, black 5%, black 85%, transparent),
                    linear-gradient(to top, transparent 0px, black 10px);
        
        /* Essencial para combinar os dois gradientes (horizontal e vertical) */
      -webkit-mask-composite: source-in;
      mask-composite: intersect;

      max-width: 100%; /* Nunca será maior que o container pai */
      height: auto;    /* Mantém a proporção para não achatar */
      display: block;  /* Remove espaços indesejados abaixo da imagem */
      margin: 0 auto;  /* Centraliza a logo se precisar */
    }

    .wrapper {
      width: 55%;
      margin: 0 auto;
      max-width: 900px;
      position: relative;
      border: 2px solid #4A4A4A;
      flex: 1;
      display: flex;
      flex-direction: column;
      min-height: 450px;
      margin-bottom: 3px;
    }

    .wrapper::before{
      content: "";
      position: absolute;
      inset: 0;
      background-image: url(imagens/26129e26f3f55e01b77553fec4809af1.jpg);
      background-position: center;
    }

    .wrapper * {
      position: relative;
      z-index: 1;
    }

    .fragment {
      position: relative;
      border: 1px solid #8E8E8E;
      padding-bottom: 1px;
      left: -1px;
      width: 100%;
      cursor: pointer;
      background: rgba(0, 0, 0, 5);
    }

    .overlay {
      position: absolute;
      align-items: center;
      display: flex;
      font-size: 12px;
      justify-content: center;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      height: 100%;
      width: 100%;
      opacity: 0;
      transition: .5s ease;
      background-color: #b4b2b2;
    }
    
    .fragment:hover .overlay{
      background: rgba(255, 255, 255, 0.05);
      color: #ff3b3b;
      font-size: 0.9em;
      opacity: 0.8;
      
    }
    
    .meta {
      font-size: 8px;
      font-weight: bold;
      color: #9CA3A1;
      margin-top: 5px;
      margin-bottom: 5px;
      margin-left: 10px;
      transform: skewX(-15deg);
      letter-spacing: 1px;
      text-transform: uppercase;
    }
    
    .titleContent {
      font-size: 9px;
      color: #9CA3A1;
      margin-top: 5px;
      margin-left: 10px;
      transform: skewX(-15deg);
      letter-spacing: 2px;
      text-transform: uppercase;
    }

    .terminal {
      font-size: 15px;
      margin-bottom: 15px;
      margin-top: 5px;
      color: #9CA3A1;
      opacity: 0.8;
      margin-left: 10px;
      position: relative;
      min-height: 20px;
      cursor: crosshair;
    }
    .cursor {
      animation: blink 1s step-end infinite;
    }

    @keyframes blink {
      50% { opacity: 0; }
    }

    .navbar {
      display: flex;
      justify-content: space-between; /* Distribui os 3 blocos */
      width: 100%;
      align-items: center;
      margin-top: auto;
      padding-bottom: 5px; /* Respiro interno opcional */
      flex-shrink: 0;
    }


    /* you are already inside[...] */
   .middle-info {
     text-align: center;
     justify-content: space-between;
     margin-bottom: 10px;
     font-size: 15px;
     flex: 15;
     opacity: 0.6;
     width: 100%;
     letter-spacing: 2px;
     color: #9CA3A1;
    }

    .voidbutton{
      font-family: "Audiowide", sans-serif;
      font-size: 10px;
      margin-left: 15px;
      flex: 1;
      margin-bottom: 10px;
      letter-spacing: 1px;
      color: #9CA3A1;
      text-decoration: underline;
      display: none;
    }
    
    #voidbutton{
      background: none;
      border: none;
      padding: 0;
      cursor: pointer;
      outline: inherit;
      border-radius: 5px;
    }

    .voidbutton:hover{
      color: #00ff9f
    }

    .foot{
      left: 0;
      bottom: 0;
      width: 100%;
      background-color: transparent; /* Um preto com transparência */
      color: #6A0DAD; /* Roxo Pulsação */
      text-align: center;
      padding: 1px 10;
      flex-shrink: 0;
    }

    .content-area {
      margin-top: 0px;
      font-family: "Audiowide", sans-serif;
      padding: 5px 15px 15px 15px;
      white-space: pre-wrap; /* Mantém a formatação de texto original */
      line-height: 1.3;
      color: #ffffff;
      transition: background-color 0.2s ease;
      position: relative;
      z-index: 10;
    }

    .content-area.is-active {
      background-color: #000000; /* Preto total */
      color: #00ff00; /* Verde terminal para garantir a leitura */
      padding: 20px;
      border-radius: 5px;
    }

    
    .content-area h2 {
      font-size: 24px; /* Ajuste para o tamanho que desejar */
      margin: 0px;       /* Tira o espaço gigante de cima e baixo */
      margin-top: -20px;
      margin-bottom: 0px;
      text-align: center;
      text-transform: uppercase;
      
    }

    .content-area small {
      display: block;
      margin-bottom: -60px;
      font-size: 10px;
      text-transform: uppercase;
    }

    .content-area .texto-artigo{
      font-size: 13px;
      line-height: 1.7;
      color: #ffffff;
      margin-top: 15px;
      text-align: left;
      font-family: monospace;
      overflow-wrap: break-word; /* Quebra a palavra se ela for maior que o container */
      word-break: break-word;    /* Garante a compatibilidade */
      hyphens: auto;
    }

    .social-container{
      position: fixed;
      top: 10px;
      right: 30px;
      display: flex;
      gap: 10px;
      transition: 0.2s;
      font-size: 40px;
      opacity: 0.4;
      z-index: 9999;
      }

    .social-container a {
      font-size: 40px;
      color: #fd0202;
      transition: 0.2s;
    }

    .social-container a:hover {
      color: #03fa18;
    }

    /* --- RESPONSIVIDADE --- */

    /* 1. Smartphones pequenos (max 600px) */
    @media only screen and (max-width: 600px) {
      body {
        width: 100%; /* Ocupa a largura total */
      }
      .logo-Container {
          width: 90%; /* No mobile, ela ocupa 80% da largura do wrapper */
          margin-top: 20px;
        }
      .wrapper {
        width: 95%; /* Quase toda a tela no mobile */
        min-height: 400px;
      }

      .content-area h2 {
        font-size: 18px;
      }

      .social-container {
        position: absolute;
        top: 40px;
        right: 10px;
        font-size: 20px; /* Ícones menores */
      }

      .social-container a {
        font-size: 25px;
      }
      
      .middle-info {
        font-size: 11px; /* Texto rodapé menor */
      }
    }

    /* 2. Tablets e dispositivos em modo retrato (min 600px) */
    @media only screen and (min-width: 600px) {
      .wrapper {
        width: 85%;
      }
    }

    /* 3. Tablets em modo paisagem e Laptops pequenos (min 768px) */
    @media only screen and (min-width: 768px) {
      .wrapper {
        width: 75%;
      }
    }

    /* 4. Desktops comuns (min 992px) */
    @media only screen and (min-width: 992px) {
      
      .logo-Container {
        width: 550px;
       } /* No desktop você fixa um tamanho que fique elegante */
      .wrapper {
        width: 40%;
      }
    }

    /* 5. Telas grandes / UltraWide (min 1200px) */
    @media only screen and (min-width: 1200px) {
      .wrapper {
        width: 45%; /* Volta ao seu design original */
        max-width: 900px;
      }
    }