/*[('#151515'),
 ('#141414'),
 ('#0a0a0a'),
 ('#131313'),
 ('#121212'),
 ('#161616'),
 ('#111111'),
 ('#090909'),
 ('#0b0b0b'),
 ('#0c0c0c'),
 ('#171717'),
 ('#161515'),
 ('#181818'),
 ('#191919'),
 ('#121111')]*/

 *{
    margin: 0;
    padding: 0;
 }

 body {
    background-color: #0a0a0a;
    font-family: Arial, Helvetica, sans-serif;
    color: #ffffff;
 }

 a {
    text-decoration: none;
    color: #ffffff;
 }

 .navig {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    height: 40px;
    background-color: #2b2b2b;
 }

 .allBtn, .userPost {
    display: flex;
    justify-content: space-around;
 }

 .wishB, .userPost {
    margin: 8px;
 }

 .score {
    margin-right: 8px;
 }

 .appname, .sorce {
   color: #ff6600;
 }

 .appname {
   display: flex;
 }

 .appIcon {
   width: 25px;
   height: 25px;
   margin-right: 5px;
 }

 .today {
   width: 80%;
   margin: 0 auto;
   margin-top: 20px;
 }

 .tdNav {
   padding: 8px;
   display: flex;
   justify-content: space-between;
 }

 .tddesc {
   color: #707070;
 }

 .tdBloq {
   display: flex;
   flex-direction: row;
   background-color: #2b2b2b;
   padding: 10px;
   border: 1px solid black;
}

.postCont {
   margin-left: 20px;
   margin-top: 8px;
   width: 98%;
}

.titlp {
   margin-top: 10px;
   width: 100%;
}

.votesSession {
   padding: 10px;
}

.dataPost {
   display: flex;
   justify-content: space-between;
   margin-top: 10px;
}

.usrsub {
   margin-right: 30px;
}

.datasOne span {
   color: #707070;
}

.vote {
   width: 20px;
   height: 20px;
   cursor: pointer;
}

.vote img {
   width: 100%;
   height: 100%;
}

.subform {
   width: 60%;
   padding: 20px;
   border-radius: 10px;
   background-color: #2b2b2b;
   margin: 0 auto;
   margin-top: 30px;
}

.logins {
   width: 40%;
}

.subform span {
   color: #b0b0b0;
   font-size: 1.2rem;
}

.field, #text {
   background-color: #0a0a0a;
   border: none;
   outline: none;
   border-radius: 8px;
   color: white;
   padding: 10px;
   width: 96%;
   margin-bottom: 10px;
}

.titlep {
   font-size: medium;
   font-weight: bold;
}

.text {
   height: 200px;
   outline: none;
}

.categ {
   background-color: #0a0a0a;
   border: none;
   border-radius: 8px;
   color: white;
   padding: 10px;
   margin-bottom: 10px;
   font-size: 1.1rem;
}

.subBtn {
   width: 98%;
   padding: 10px;
   font-size: 1rem;
   color: white;
   background-color: #ff6600;
   border: none;
   border-radius: 8px;
   cursor: pointer;
}

.postzone {
   width: 80%;
   margin: 0 auto;
}

.vtTitle, .wroteHed {
   display: flex;
   flex-direction: row;
}

/* Aplica estilo ao conteúdo convertido de Markdown */
.textbd {
   color: #f1f1f1;
   /*background-color: #121212;*/
   font-family: system-ui, sans-serif;
   line-height: 1.6;
   /*padding: 1rem;*/
   border-radius: 8px;
   margin-top: 20px;
   color: #b0b0b0;
   width: 100%;
 }
 
 .textbd h1, .textbd h2, .textbd h3 {
   color: #ffffff;
   margin-top: 1em;
   margin-bottom: 0.5em;
   font-weight: bold;
 }
 
 .textbd p {
   margin: 0.5em 0;
 }
 
 .textbd a {
   color: #4da6ff;
   text-decoration: underline;
 }
 
 .textbd strong {
   color: #fff;
   font-weight: bold;
 }
 
 .textbd em {
   color: #ccc;
   font-style: italic;
 }
 
 .textbd code {
   background-color: #1e1e1e;
   color: #fca311;
   padding: 0.2em 0.4em;
   border-radius: 4px;
   font-family: monospace;
 }
 
 .textbd pre {
   background-color: #1e1e1e;
   color: #f8f8f2;
   padding: 1em;
   overflow-x: auto;
   border-radius: 6px;
 }
 
 .textbd blockquote {
   border-left: 4px solid #555;
   padding-left: 1em;
   color: #ccc;
   margin: 1em 0;
   font-style: italic;
 }
 
 .textbd ul, .textbd ol {
   padding-left: 2em;
   margin: 1em 0;
 }
 
 .textbd li {
   margin-bottom: 0.5em;
 }

 #textbd img {
   max-width: 100%;
   height: auto;
   display: block;
   margin: 10px 0;
 }
 /* fim markdown post */

 .wroteBd, .textbd {
   max-width: 68vw;
   overflow-wrap: break-word;
   word-wrap: break-word;
   word-break: keep-all; /* especialmente útil para idiomas ocidentais */
   hyphens: manual; /* ou 'auto' se preferir hifenização automática */
 }

 /* markdown comments */
 .wroteBd h1, .wroteBd h2, .wroteBd h3 {
   color: #ffffff;
   margin-top: 1em;
   margin-bottom: 0.5em;
   font-weight: bold;
 }
 
 .wroteBd p {
   margin: 0.5em 0;
 }
 
 .wroteBd a {
   color: #4da6ff;
   text-decoration: underline;
 }
 
 .wroteBd strong {
   color: #fff;
   font-weight: bold;
 }
 
 .wroteBd em {
   color: #ccc;
   font-style: italic;
 }
 
 .wroteBd code {
   background-color: #1e1e1e;
   color: #fca311;
   padding: 0.2em 0.4em;
   border-radius: 4px;
   font-family: monospace;
 }
 
 .wroteBd pre {
   background-color: #1e1e1e;
   color: #f8f8f2;
   padding: 1em;
   overflow-x: auto;
   border-radius: 6px;
 }
 
 .wroteBd blockquote {
   border-left: 4px solid #555;
   padding-left: 1em;
   color: #ccc;
   margin: 1em 0;
   font-style: italic;
 }
 
 .wroteBd ul, .wroteBd ol {
   padding-left: 2em;
   margin: 1em 0;
 }
 
 .wroteBd li {
   margin-bottom: 0.5em;
 }
 /* fim markdown comments */
 
.cmmtFrm {
   margin-top: 20px;
}

.rpFR {
   width: 100vh;
}

#cmtText {
   width: 98%;
   padding: 5px;
   border-radius: 8px;
   border: none;
   outline: none;
   height: 150px;
}

.cntBtn {
   background-color: #ff6600;
   color: #ffffff;
   padding: 5px;
   border: none;
   border-radius: 5px;
   font-size: 1rem;
   cursor: pointer;
   margin-top: 10px;
}

.cmtDatas {
   margin-top: 20px;
   margin-left: 8px;
}

.wroteBd {
   color: #ffffff;
}

.cmtOptions li{
 display: inline;
 margin-right: 20px;
}

.cmtOptions a{
   text-decoration: underline;
   color: #b0b0b0;
}

.rply {
   margin-left: 20px;
}

.comment-level-1 { margin-left: 0px; }
.comment-level-2 { margin-left: 5px; }
.comment-level-3 { margin-left: 10px; }
.comment-level-4 { margin-left: 15px; }
.comment-level-5 { margin-left: 20px; }


.recZon {
   margin-top: 8px;
}

.recZon span {
   font-size: 1.1rem;
}

.recZon a {
   color: lightblue;
}

.notif {
   width: 25px;
   height: 25px;
   margin-top: -5px;
   margin-right: 8px;
}

.notif img {
   width: 100%;
   height: 100%;
}

.ntPrint {
   position: absolute;
   width: 20px;
   height: 20px;
   border-radius: 50%;
   background-color: red;
   margin-top: -5px;
   margin-left: 10px;
   display: flex;
   justify-content: center;
   align-items: center;
}

.txtAbout, .mailpro {
   width: 50%;
   padding: 6px;
   border: none;
   border-radius: 6px;
   line-height: none;
   margin-top: 10px;
}

.txtAbout {
   height: 200px;
}

.yourKarma {
   display: flex;
   width: 50%;
   margin-top: 10px;
}

.bloqs {
   display: flex;
   flex-direction: column;
   padding: 8px;
   color: #707070;
}

.downbody {
   border-top: 1px solid #ff6600;
   padding: 10px;
   margin-top: 30px;
   text-align: center;
}

.ft li {
   display: inline-block;
   margin: 5px 3px;
   color: #b0b0b0;
}

.ft a{
   color: #b0b0b0;
}

.linkSub, .bloqs:hover {
   color: yellow;
}

.nvBtn {
   width: 80%;
   margin: 0 auto;
   text-align: center;
}
    
    /* =========================
       CELULARES MUITO PEQUENOS (até 320px)
       ========================= */
    @media (max-width: 320px) {
      /* Estilos específicos para celulares muito pequenos */
      .wishB {
         display: none;
      }
      .txtAbout, .mailpro {
         width: 80%;
      }
      .appname h1 {
         display: none;
      }
      .wroteBd {
         max-width: 65vw;
       }
    }
    
    /* =========================
       CELULARES (até 480px)
       ========================= */
    @media (max-width: 480px) {
      /* Estilos para a maioria dos smartphones */
      .navig {
         padding: 5px;
         height: 30px;
      }
      .appname h1 {
         display: none;
      }
      .username, .score, .createPs {
         font-size: smaller;
      }
      .notif {
         width: 20px;
         height: 20px;
         margin-top: -2px;
         margin-right: 3px;
         font-size: small;
      }
      .ntPrint {
         width: 15px;
         height: 15px;
      }
      .wishB {
         display: none;
      }
      .submobile {
         display: block;
      }
      .today {
         width: 100%;
       }
       .usrsub {
         margin-right: 5px;
         font-size: small;
      }
      .dataPost {
         flex-direction: column;
      }
      .dataTwo a {
         font-size: small;
      }
      .postzone {
         width: 100%;
      }
      #cmtText {
         width: 90%;
      }
      .subform {
         width: 90%;
      }
      .recZon span, .recZon a {
         font-size: small;
      }
      .prHed {
         margin-left: 8px;
      }
      .txtAbout, .mailpro {
         width: 80%;
      }
      .wroteBd {
         max-width: 65vw;
       }
    }
    
    /* =========================
       TABLETS (portrait) - de 481px até 768px
       ========================= */
    @media (min-width: 481px) and (max-width: 768px) {
      /* Estilos para tablets em modo retrato */
      .wishB, .userPost {
         margin: 5px;
      }
      .wishB a {
         font-size: 0.90rem;
      }
      .username, .score, .createPs {
         font-size: 0.90rem;
      }
      .subform {
         width: 90%;
      }
      .txtAbout, .mailpro {
         width: 60%;
      }
    }
    
    /* =========================
       TABLETS (landscape) - de 769px até 1024px
       ========================= */
    @media (min-width: 769px) and (max-width: 1024px) {
      /* Estilos para tablets em modo paisagem */
      .wishB, .userPost {
         margin: 5px;
      }
      .wishB a {
         font-size: 0.90rem;
      }
      .username, .score, .createPs {
         font-size: 0.90rem;
      }
      .logins {
         width: 50%;
      }
    }
    
    /* =========================
       LAPTOPS PEQUENOS - de 1025px até 1280px
       ========================= */
    @media (min-width: 1025px) and (max-width: 1280px) {
      /* Estilos para laptops pequenos */
    }
    
    /* =========================
       DESKTOPS MÉDIOS A GRANDES - de 1281px até 1600px
       ========================= */
    @media (min-width: 1281px) and (max-width: 1600px) {
      /* Estilos para desktops médios e grandes */
    }
    
    /* =========================
       TELAS GRANDES / 4K - acima de 1600px
       ========================= */
    @media (min-width: 1601px) {
      /* Estilos para telas muito grandes */
    }