* {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: Arial, sans-serif;
      background: #f3f4f6;
      color: #111827;
    }

        .main {
      margin-left: 250px;
      padding: 24px 18px;
    }

 /* Tipografia */

 @font-face {
  font-family: ahm;
  src: url(ahm.otf) format('truetype')
}
.ahm::before, .ahm3::before {
  font-family: ahm;
  font-size: 1.2em;
}

.ahm.atencao::before { content: 'A'; }
.ahm.breja::before { content: 'B'; }
.ahm.camera::before { content: 'C'; }
.ahm.windows::before { content: 'D'; }
.ahm.equipamento::before { content: 'E'; }
.ahm.pdf::before { content: 'F'; }
.ahm.graph::before { content: 'G'; }
.ahm.home::before { content: 'H'; }
.ahm.ideia::before { content: 'I'; }
.ahm.txt::before { content: 'J'; }
.ahm.tree::before { content: 'K'; }
.ahm.lupulo::before { content: 'L'; }
.ahm.malte::before { content: 'M'; }
.ahm.snow::before { content: 'N'; }
.ahm.book::before { content: 'O'; }
.ahm.prancheta::before { content: 'P'; }
.ahm.globo::before { content: 'Q';}
.ahm.lupa::before { content: 'R'; }
.ahm.skull::before { content: 'S'; }
.ahm.town::before { content: 'T'; }
.ahm.user::before { content: 'U'; }
.ahm.link::before { content: 'V'; }
.ahm.processo::before { content: 'W'; }
.ahm.linux::before { content: 'X'; }
.ahm.yeast::before { content: 'Y'; }
.ahm.svg::before { content: 'Z'; }
.ahm.preco::before { content: 'a';}
.ahm.terminal::before { content: 'b'; }
.ahm.menu::before { content: 'c'; }
.ahm.run::before { content: 'd'; }
.ahm.drop::before { content: 'e'; }
.ahm.calendario::before { content: 'f'; }
.ahm.lista::before { content: 'g'; }
.ahm.nota::before { content: 'h'; }


h1, h2, h3, h4, h5, h6{
  font-family: "Verdana, Geneva, sans-serif";
  color: #003050;
} 

h3, h4{
border-bottom: solid 2px #003050;
padding: 0 0 2px 6px;
} 

p {
  color: #404040;
 } 

em { 
  font-style: italic;
  color: #003050;
  font-weight: bold;

}
cite {
  font-style: oblique 20deg;
  color: #003050;
}
    /* Menu - Botão e cabeçalho aparecem apenas no mobile */
    .mobile-header {
      display: none;
      align-items: center;
      gap: 12px;
      padding: 14px 18px;
      background: #003050;
      color: #FFF;
    }

    .menu-toggle {
      font-size: 24px;
      cursor: pointer;
      line-height: 1;
    }

    #menu-checkbox {
      display: none;
    }

    .layout {
      min-height: 100vh;
    }
/* Sidebar - Menu */
    .sidebar {
      position: fixed;
      inset: 0 auto 0 0;
      width: 250px;
      padding: 20px 12px;
      overflow-y: auto;
      background: #003050;
      color: #FFF;
    }

    .sidebar h2 {
      margin: 0 10px 24px;
      font-size: 20px;
    }

    .sidebar a,
    .sidebar summary {
      display: block;
      padding: 6px;
      border-radius: 6px;
      color: #FFF;
      text-decoration: none;
      cursor: pointer;
    }

    .sidebar a:hover,
    .sidebar summary:hover {
      background: #EEE;
      color: #003050;
    }

    .sidebar details {
      margin-top: 4px;
    }

    .sidebar summary {
      list-style: none;
    }

    .sidebar summary::-webkit-details-marker {
      display: none;
    }

    .sidebar summary::after {
      content: "▸";
      float: right;
      transition: transform 0.2s;
    }

    .sidebar details[open] summary::after {
      transform: rotate(90deg);
    }

    .submenu {
      padding-left: 14px;
    }

    .submenu a {
      padding: 10px 14px;
      font-size: 14px;
    }

.melhor{
  font-size: 12px;
        padding: 2px 6px;
        text-align: left;
}
    /* Galeria de Imagens*/
div.gallery img {
  width: 100%;
  height: auto;
  margin-bottom: 8px;

}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.responsive {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}
.responsive_horizontal {
  padding: 0 6px;
  float: left;
  width: 100%;
}

.nav_rod{
float: right;  
background-color:#003050;
color: #FFF;
padding: 4px;
border-radius: 5px;
}

.navega > a {
color:#FFF;
text-decoration: none;
padding: 0 2px;
font-style: oblique;
text-align: center;
border-radius: 5px;
}


.controls {
  display: flex;
  align-items: center;
  overflow: hidden;
  width: 100%;
  height: auto;
  position: relative;
}
@media only screen and (max-width: 900px) {
  .responsive {
    width: 32.99999%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 700px) {
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}

.em_linha  {
  display: flex;
  flex-direction: row;
   justify-content: space-around;
}
    /* Menu - Layout para telas pequenas */
    @media (max-width: 768px) {
      .mobile-header {
        display: flex;
      }

      .sidebar {
        top: 56px;
        width: min(280px, 85vw);
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        z-index: 2;
      }

      #menu-checkbox:checked ~ .layout .sidebar {
        transform: translateX(0);
      }

      /* Fundo escurecido atrás do menu */
      .menu-overlay {
        display: none;
        position: fixed;
        inset: 56px 0 0;
        background: rgb(0 0 0 / 40%);
        z-index: 1;
      }

      #menu-checkbox:checked ~ .layout .menu-overlay {
        display: block;
      }

      .sidebar h2 {
        display: none;
      }
    .main {
      margin-left: 0;
      padding: 24px 18px;
    }
.em_linha  {
  display: flex;
  flex-direction: row;
   justify-content: space-around;
}
    }