<style type="text/css">

* {
margin: 0;
padding: 0;
}
/* render html5 elements as block */
header, footer, section, bannertopo, aside, nav, article, bannerbase, quadMobil, quadBorda, quadNav, but {
display: block;
}
body, html{
line-height: 38px;
background-image: url(../img/fundogeral.png) repeat;
background: #4682b4;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

/* Codigo responsivo */
* 
img, picture, video, embed {
 max-width:100% !important;
 height:auto !important;
}
/* header */
header {
 height: auto;
 margin: 0px;
}

/* Envolve tudo */
.principal{
  max-width: 900px;
  min-width: auto;
  background-color: #086a87;
  margin: 0 auto;
  padding: 6px;
  border-radius: 4px;
  clear: both;
}

/* ***** Submenu - por Almeida ***** */
.logo {
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: #000;
  font-weight: bold;
  font-style: italic;
  font-size: 25px;
  color: white;
}
.quadTopo{
  background-color:#125103;
  border-top:4px solid #ddd;
  border-bottom:4px solid #ddd;
  font-size: 1.5em;
  line-height: 1.3em;
  color:#fff;
}
.quadTitulo{
  background-color:#b0e0e6;
  padding-top: 10px;
  padding-bottom: 10px;
  font-style: italic;
  color: white;
}
.quadBorda {
  background-color: #ffd700;
  padding: 10px;
  border-radius: 6px;
  box-shadow: 1px 1px 2px #999;
}
.quadCorpo{
  width:auto;
  background-color: #f0ffff; 
  padding: 15px;
  line-height: 1.3em;
  font-size: 1.5em;
  color: #555;
}
.quadNavega {
  min-height: 600px;
  margin: 20px;
  line-height: 1.3em;
  font-size: 1.5em;
  color:#fff;
  text-shadow: 0px 2px 3px #ddd;
}
.quadBase{
  background-color: #fffaf0;
  border-top:4px solid #ddd;
  border-bottom:4px solid #ddd;
}
/* Vídeo */
.boxvideo{
  background-color: #fafafa;
  max-width:500px; 
  max-height:300px;
  padding: 15px;
  margin-top: 1em;
  border-radius: 6px;
  font-size: 1.5em;
  line-height: 1.3em;
  color:#555;
}
.video-container { 
  position:relative; 
  padding-bottom:56.25%; 
  height:0;  
  overflow:hidden; 
  max-width:100%; 
  height:auto; 
} 
.video-container iframe, 
.video-container object, 
.video-container embed {
   position:absolute; 
   top:0; 
   left:0; 
   width:100%; 
   height:100%; 
}

/* ***** Dispĺay Grid ***** */
.container-box {
  display: grid;
  grid-template-columns: 33.3% 33.3% 33.3%;
  grid-template-rows:25% 25% 25% 25%;
  grid-column-gap:1px;
  grid-row-gap:1px;
}
/* ***** Menu do responsivo verde ***** */
.menu{
  background-color:#125103;
  font-size: 1.5em;
  color:#fff;
  line-height: 1.3em;
  padding:1px;
  text-align:center;
  width:99.8%;
  display:block;
  clear:both;
}
.menu ul{
  margin:10;
  padding:0;
  list-style:none;
}
.menu a{
  text-decoration:none;
  font-weight:700;
  color:#fff;
}
.menu ul li{
  display:inline-block;
}
.menu ul li a{
  display:block;  
  color:#fff;
}
a:link {color:#00f}
a:visited {color:#000}
a:hover {color:#000}

/* Container Code */
.container-code {
  background-color: #2d2d2d; /* Fundo escuro */
  color: #fff; /* Cor do texto padrão */
  border-radius: 8px; /* Borda arredondada */
  padding: 1.5rem; /* Espaçamento interno */
  font-family: 'Fira Code', 'Roboto Mono', monospace; /* Fonte monoespaçada */
  line-height: 1.6;
  overflow: auto; /* Adiciona scroll se o código for muito grande */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra sutil */
}
.container-code pre {
  margin: 0;
}

/* Formula-card */
.formula-card {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    max-width: 600px;
    width: 100%;
    text-align: center;
    border-left: 5px solid #4a90e2;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.formula-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

/* ***** Playlist ***** */
    .player-container {
      background-color: white;
      padding: 10px;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      text-align: center;
    }

    audio {
      margin-top: 20px;
    }

    .playlist {
      margin-top: 20px;
      list-style: none;
      padding: 0;
    }

    .playlist li {
      padding: 5px;
      cursor: pointer;
      margin-bottom: 5px;
      background-color: #f0f0f0;
      border-radius: 4px;
      transition: background-color 0.3s;
    }

    .playlist li:hover {
      background-color: #007bff;
      color: white;
    }

    .playlist li.active {
      background-color: #007bff;
      color: white;
    }

    .controls button {
      font-size: 0.9em;
      padding: 8px;
      margin: 10px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }

    .controls button:disabled {
      background-color: #ccc;
    }

.formula-title {
    font-size: 1.3em;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 10px;
}

.formula-body {
    font-size: 1.2em;
    color: #555;
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 8px;
    overflow-x: auto; /* Adiciona scroll horizontal para fórmulas longas */
}

/* Estilo para as fórmulas renderizadas pelo MathJax/KaTeX */
.formula-body .MathJax_Display, .formula-body .katex-display {
    margin: 0 !important;
}

/* ***** Classes - por Almeida ***** */
.but01, .but02 , .but03 {
  display: inline-block;
  width:auto;
  padding: 10px;
  border:2px solid #003399;
  background-color: #ddd;
  font-family: Geneva, Arial, Helvetica, sans-serif;

  color: #555;
  margin: 5px;
  border-radius: 4px;;
  box-shadow: 1px 1px 2px #999;
}
.but01 { background-color: #ddd; color: #555; }
.but02 { background-color: #ddd; color: #555; }
.but03 { background-color: #ddd; color: #555; }

</style>
