header {top: 0; left: 0; width: 28rem; height: 100%; z-index: 1000; position: fixed; margin-left: 20rem; display: flex; flex-flow: column; align-items: center; justify-content: center; text-align: center; border-inline: 2px solid var(--azul); background: var(--bg-header); box-shadow: 0 0 10px var(--azul-escuro-2), 0 0 25px var(--azul-escuro), 0 0 45px var(--azul-medio), 0 0 70px var(--azul);}      
header .menu-apresentacao img {width: 100%; height: auto; max-width: 17rem; object-fit: cover; margin-bottom: 2rem; border-radius: 50%; border: 2px solid var(--amarelo); box-shadow: 0 0 20px var(--azul), 0 0 30px var(--azul-medio); animation: fogoNeon 3s infinite;}
@keyframes fogoNeon {0%,18%,20%,50.1%,65.1%,80%,90.1%,95% {box-shadow: none;} 18.1%,20.1%,50%,65%,80.1%,90%,95.1%,100% {box-shadow: 0 0 10px var(--azul), 0 0 20px var(--azul), 0 0 40px var(--azul), 0 0 80px var(--azul),0 0 160px var(--azul);}}
@keyframes anime_Logo {0%,100% { transform: translate(0, 0);} 50% { transform: translate(0,20px);}}
header .menu-apresentacao .sigla {padding: 0; margin-block: 0; letter-spacing: 1px; color: var(--branco); font-size: clamp(2.3rem, 2.5vw, 2.5rem); font-weight: 700;}
header .menu-apresentacao .nome {margin: 0; padding: 0; color: #000; font-size: clamp(1.8rem, 2.5vw, 2rem); letter-spacing: 1px; text-shadow: 1px 1px 0 #ccd, 2px 2px 0 #fff, 4px 5px 0 rgb(0, 0, 0);}
header .menu-apresentacao .nome span {color: var(--azul); letter-spacing: 0;}    
header .menu-lateral {width: 100%;}
header .menu-lateral ul {list-style: none; padding: 1rem 4rem;}
header .menu-lateral ul li {opacity: 0; margin: 1rem 0; text-align: center; transform: translateX(-20px); animation: slideIn 0.7s forwards;}
header .menu-lateral ul li:nth-child(1) { animation-delay: 0.1s;} header .menu-lateral ul li:nth-child(2) { animation-delay: 0.3s;} header .menu-lateral ul li:nth-child(3) { animation-delay: 0.5s;} header .menu-lateral ul li:nth-child(4) {animation-delay: 0.7s;}
header .menu-lateral ul li a {display: block; padding: 0.6rem; font-size: clamp(1rem, 2.5vw, 1.3rem); font-weight: bold; border: 2px solid var(--azul); border-radius: 5rem; letter-spacing: 1.5px; transition: .4s; background: var(--bg-azul); box-shadow: inset 0 -5px 10px rgb(0, 0, 0), 5px 5px 15px rgb(0, 0, 0); text-shadow: 1px 2px 0 #000, 2px 3.5px 0 var(--azul);}
header .menu-lateral ul li a:hover {font-weight: 900; letter-spacing: 2px; color: var(--branco); transform: scale(1) translateY(5px); box-shadow: var(--sombra-botao-hover); text-shadow: var(--sombra-letras);}
header .menu-lateral ul li a[aria-current="page"] {font-weight: 900; color: var(--amarelo); text-shadow: var(--sombra-letras);}
@keyframes slideIn {to {opacity: 1; transform: translateX(0);}}
header.toggle .menu-lateral ul li {animation: slideInItem 0.7s forwards;} header.toggle .menu-lateral ul li:nth-child(1) { animation-delay: 0.1s;} header.toggle .menu-lateral ul li:nth-child(2) { animation-delay: 0.3s;} header.toggle .menu-lateral ul li:nth-child(3) { animation-delay: 0.5s;} header.toggle .menu-lateral ul li:nth-child(4) { animation-delay: 0.7s;}
@keyframes slideInItem {to {opacity: 1; transform: translateX(0);}}
header .menu-lateral ul li a:focus, header .menu-lateral ul li a:active {outline: none; background: var(--bg-azul); box-shadow: inset 0 -5px 10px rgb(0, 0, 0), 5px 5px 15px rgb(0, 0, 0);}
#menu {top:1rem; right:1rem; color:#fff; position: fixed; font-size: 2rem; padding: 7px 1.1rem; border-radius: .5rem; border: 2px solid #fff; cursor: pointer; z-index: 1000; display: none; background: var(--bg-gradient); box-shadow:inset 5px 5px 5px rgba(136, 136, 136, .1), inset -5px -5px 15px rgb(0, 0, 0), 5px 5px 15px rgb(0, 0, 0);}   
.menu-topo {position: fixed; top: 0; left: 0; width: calc(100% - 68rem); z-index: 100; display: flex; align-items: center;   justify-content: center; font-size: 1.25rem; letter-spacing: 1px; padding-top: 10px; margin-left: 48rem; transition: 0.5s;}
.menu-topo ul { display: flex;}
.menu-topo ul li {list-style: none; position: relative; cursor: pointer; margin: 0; padding: 3px 10px; background: var(--azul); box-shadow: 0 5px 5px rgba(0, 0, 0, 0.8); border-top-left-radius: 30px; border-top-right-radius: 30px; border-bottom-left-radius: 30px; border-bottom-right-radius: 30px; border-bottom: 2px solid transparent; transition: border-color 0.5s, background 0.3s, letter-spacing 0.3s, font-weight 0.3s;}
.menu-topo ul li:hover {background: var(--bg-azul);}
.menu-topo ul li.active {background: var(--bg-azul); border-bottom-color: var(--amarelo);}
.menu-topo ul li.active a {font-weight: 900; color: var(--amarelo);}
.menu-topo ul li::before {content: ''; top: 0; left: 0; width: 100%; height: 50%; position: absolute; border-top-left-radius: 30px; border-top-right-radius: 30px; border-bottom-left-radius: 30px; border-bottom-right-radius: 30px; background: rgba(255, 255, 255, .3); transition: 0.5s;}
.menu-topo ul li a {margin: 0 15px; font-size: 1.2rem; font-weight: 500; position: relative; display: inline-block; transition: font-weight 0.3s, letter-spacing 0.3s;}
.menu-topo ul li a:hover {font-weight: 900; letter-spacing: 2px; color: var(--branco);}  
.menu-topo.sticky {padding: 10px 0 18px; background: var(--bg-azul-B); box-shadow: var(--sombra-lateral); border-bottom-right-radius: 50%; border-bottom-left-radius: 50%;} 
 
@media (max-width: 1600px){header {margin-left: 0;} .menu-topo {margin-left: 28rem; width: calc(100% - 28rem);} .menu-topo.sticky {margin-left: 28rem; width: calc(100% - 28rem);} .menu-topo ul li {padding: 2px 5px;}}
@media (max-width: 1024px){header {left:-100%; transition: left 0.5s cubic-bezier(0.60, 0, 0.175, 1);} header.toggle {left: 0;} .menu-topo, .menu-topo.sticky {margin: 0; width: 100%;} #menu {display: block; font-size: 1.5rem;}}
@media (max-width: 768px){ .menu-topo {display: none;}}
@media (max-width: 350px){header {width: 100vw; box-shadow: none;}}