/*Novo menu*/
body{
    background-color: #333;
    margin-top: 80px;
  }
main{
  max-width: 97%;
}
h1{
  text-transform: uppercase;
  text-align: center;
  color: white;
  margin-top: -55px;
  font-size: 2.5rem;
  flex-grow: 1;
}
@media (max-width: 980px) {
  h1{
  margin-top: -50px;
  font-size: 1.2rem;
}
}
  div.menu2 {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 80px;
 background-color: black;
 z-index: 1000;
 box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}

.menu-toggle {
 position: absolute;
 top: 0;
 left: 0;
 width: 80px;
 height: 100%;
 display: flex;
 align-items: center;
 justify-content: center;
 cursor: pointer;
}
.menu-toggle:hover .toggle-icon .bar {
 background-color: #ccc;
}

.toggle-icon {
 position: relative;
 width: 30px;
 height: 20px;
}

.toggle-icon .bar {
 position: absolute;
 top: 50%;
 left: 0;
 width: 100%;
 height: 2px;
 background-color: #fff;
 transition: transform 0.2s ease;
}

.toggle-icon .bar:first-child {
 transform-origin: left;
}

.toggle-icon .bar:last-child {
 transform-origin: right;
}

.menu-items {
 margin-left: -90px;
 position: absolute;
 position: fixed;
 top: 80px;
 left: 0;
 width: 0;
 height: calc(100vh - 80px);
 overflow-y: auto;
 /*background-color: #f2f2f2;*/
 z-index: 999;
 transition: width 0.3s ease;
}

.menu-items li {
border-radius: 20px;
 margin: 1px 0;
 text-align: center;
 margin-left: 60px;
 background-color: black;
 /* background-image: linear-gradient(to left, transparent, black, black ); */
}

.menu-items li a { 
  font-weight: bold;
 display: block;
 padding: 4px 0;
 font-size: 15px;
 color: white;
 text-decoration: none;
padding-top: 3px;

}

.menu-items li a:hover {
 color: yellow;
 background-color: rgba(128, 128, 128, 0.445);
 border-radius: 10px;
 text-transform: uppercase;
box-shadow: 2px 2px black;

}


.toggle-icon .bar {
 position: absolute;
 top: 50%;
 left: 0;
 width: 100%;
 height: 2px;
 background-color: #fff;
 transition: transform 0.2s ease;
}

.toggle-icon .bar:first-child {
 transform: translateY(-6px);
}

.toggle-icon .bar:last-child {
 transform: translateY(6px);
}
ul {
 list-style: none;
 margin: 0;
 padding: 0;
}  
img#logo{
   
    margin-top: 8px;
    display: block;
    margin: left;
    margin-left: 20px;
}


img#logo{
    width: 60px;
    margin-top: 8px;
    display: block;
    margin: auto;
    margin-top: 5px;
    margin-right: 20px;
}
legend#lg{
color: white;
margin-top: -19px;
margin-left: -5px;
font-size: 15px;
}
#tituL{
  text-decoration: none;
}
footer{
  background-color: black;
  padding: 10px;
  text-align: center;
 
}
footer>p>a{
  color: white;
  text-decoration: none;
  font-weight: bold;
}

@media (max-width: 600px) {
    #tituL h1 {
        font-size: 1.2rem; /* Título menor em celulares */
    }
}