<style type="text/css">

* {
margin: 0;
padding: 0;
}

/* render html5 elements as block */
principal, quadTopo, menuTopo, logo, quadCorpo, nav, quadMobil, quadBorda, section, footer {
display: block;
}

body, html{
line-height: 38px;
background-color: #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: #086a87;
  margin: 0 auto;
  padding: 5px;
  border-radius: 6px;
  clear: both;
}

/* ***** Submenu - por Almeida ***** */
.quadLogo {
  background-color: #000;
  padding: 22px;
  text-align: center;
  font-size: 32px;
  font-style: italic;
  font-weight: bold;
  color: white;
}
/* Centralizar o topo e deixar em itálico */
.quadTopo {
  text-align: center;
  font-style: italic;
  background-color: #125103;
  border-top: 4px solid #ddd;
  border-bottom: 4px solid #ddd;
  font-size: 25px;
  color: white;
}
.quadCorpo {
  background-color: #fff;
  width: auto;
  padding: 20px;
  font-size: 25px;
  color: #000;
}
.quadBase {
  text-align: center;
  font-style: italic;
  background-color: #125103;
  border-top: 4px solid #ddd;
  border-bottom: 4px solid #ddd;
}
/* ***** Menu do responsivo verde ***** */
.menu {
  background-color: #125103;
  font-size: 25px;
  color: #fff;
  padding: 15px;
  text-align: center;
  width: auto;
  display: block;
  clear: both;
}
.menu ul {
  margin: 10px;
  padding: 0;
  list-style: none;
}
.menu ul li{
  display:inline-block;
}
.menu a {
  color: #fff;
  text-decoration: none;
  font-weight: 700;
}
.menu ul li a {
  display: block;   
  color: #fff;
}
a:link {color:#000}
a:visited {color:#000}
a:hover {color:#0000ff}

/* ***** Classes - por Almeida ***** */
.but-base {
  width: auto;
  padding: 15px;
  display: inline-block;
  background-color: #ddd;
  font-family: Geneva, Arial, Helvetica, sans-serif;
  font-size: 22px;
  color: yellow;
  border: 2px solid #003399;
  border-radius: 6px;
  box-shadow: 1px 1px 4px #999;
}
.but01 { background-color: #ddd; color: #555; text-align: center; }
.but02 { background-color: #b0e0e6; color: #555; text-align: left; }
.but03 { background-color: #fafafa; color: #555; }
.but04 { background-color: #9acd32; color: #555; }
.but05 { background-color: #ddd; color: #555; }

/* Calculadora */
.bordaInterna {
  max-width: 300px; 
  background-color: #000;
  padding: 10px;
  border-radius: 8px;
  box-shadow: 1px 1px 2px #999;
  clear: both;
}
#display {
  width: 273px;
  height: 45px;
  background-color: #a9e2f3;
  font-size: 32px;
  cursor: pointer;
  margin-bottom: 12px;
  text-align: right;
  padding: 5px;
}
.ticien {
  text-align: center;
  font-size: 32px;
  padding: 12px;
  background-color: rgb(31, 31, 31);
  border: none;
  color: white;
}
.btnTop, .btnNum, .btnMath, .btnOpps {
  color: white;
  font-size: 29px;
  width: 56px;
  height: 68px;
}
.btnTop { background-color: #6f6f6f; }
.btnNum { background-color: black; }
.btnMath { background-color: #ff4561; }
.btnOpps { background-color: #ff9933; }

/* Para o Adress*/
.container-centralizado {
  display: flex;
  justify-content: center;  /* Centraliza horizontalmente o que estiver dentro */
  align-items: center;      /* Centraliza verticalmente (se o container tiver altura) */
  width: 100%;              /* Garante que o container ocupe a largura toda */
}
</style>

