.Título {
               font-family: Helvetica;
               color: #384b59;
               font-size: 36pt;
               text-shadow: gray -3px 4px 8px;
               font-weight: bold;
               text-align: center;
             }

             .Título2 {
               font-family: Helvetica;
               color: #384b59;
               font-size: 30pt;
               text-shadow: gray -3px 4px 8px;
               font-weight: bold;
               padding-left: 12%;
             }

             .Título3 {
               font-family: Helvetica;
               color: #384b59;
               font-size: 30pt;
               text-shadow: #696969 -4px 4px 9px;
               font-weight: bold;
               text-align: center;
             }

             .SubTítulo {
               font-family: Helvetica;
               color: #384b59;
               font-size: 24pt;
               padding-left: 12%;
             }

             .SubTítulo2 {
               font-family: Helvetica;
               color: #384b59;
               font-size: 25pt;
               font-weight: bold;
               text-align: center;
             }

             .Texto {
               font-family: sans-serif;
               color: white;
               font-size: 175%;
               font-weight: bold;
             }

             .Texto2 {
               font-family: sans-serif;
               color: #384b59;
               font-size: 20pt;
               text-shadow: rgb(112, 109, 109) 0.1em 0.1em 0.2em;
               font-weight: bold;
               align-items: center;
             }

             .Texto3 {
               font-family: sans-serif;
               color: #2a3851;
               font-size: 13pt;
               font-weight: 550;
               margin: 0px;
             }

             .Texto4 {
               font-family: sans-serif;
               color: #e5e1e1;
               font-size: 13pt;
               font-weight: 550;
               margin: 0px;
             }

             .Texto5 {
               display: block;
               text-align: center;
               margin: 20px auto;
               /* centraliza horizontalmente */
               font-family: sans-serif;
               color: black;
               font-size: 13pt;
               font-weight: 550;
             }


             .Texto6 {
               font-family: Helvetica;
               color: rgb(0, 0, 0);
               font-size: 20pt;
               font-weight: 550;
               margin: 7%;
             }

             -->

             /*drop*/
             #dropdownMenu {
               display: none;
               position: absolute;
               top: 100%;
               /* logo abaixo do avatar */
               right: 0;
               background-color: white;
               border: 1px solid #ccc;
               border-radius: 10px;
               box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
               min-width: 160px;
               z-index: 2000;
             }


             #dropdownMenu.show {
               display: block;
               opacity: 1;
               transform: translateY(0);
             }

             .edit_usu {
               display: block;
               padding: 10px;
               color: black;
               text-decoration: none;
               font-family: Helvetica;
             }

             /*Comunivados*/
             .comunicados-box {
               background-image: linear-gradient(to left, #c0c0c0, #d9d9d9, #d9d9d9, #c0c0c0);
               box-shadow: -5px 7px 1px 5px #a6a6a6;
               border-radius: 35px;
               width: 60%;
               margin: 3% auto;
               padding: 1%;
               color: black;
               font-family: sans-serif;
               transition: transform 0.3s ease-in-out;
             }

             .comunicados-título {
               text-align: center;
               font-family: Helvetica;
               color: #384b59;
               font-size: 22pt;
               font-weight: bold;
               margin-bottom: 10px;
             }

             .comunicados-inside {
               background-color: white;
               border: 8px solid #6e0800;
               border-radius: 15px;
               padding: 2%;
               display: flex;
               align-items: center;
               justify-content: space-between;
               gap: 3%;
             }

             /* --- Quando tem imagem + texto --- */
             .comunicados-box.imagem-e-texto .comunicados-img {
               flex: 0 0 40%;
             }

             .comunicados-box.imagem-e-texto .comunicados-img img {
               width: 100%;
               height: auto;
               border-radius: 10px;
               display: block;
             }

             .comunicados-box.imagem-e-texto .comunicados-texto {
               flex: 1;
               font-size: 14pt;
               font-weight: bold;
               color: black;
               text-align: justify;
               line-height: 1.5em;
             }

             /* --- Quando tem só imagem --- */
             .comunicados-box.somente-imagem .comunicados-inside {
               display: flex;
               justify-content: center;
               align-items: center;
               background-color: white;
               border: 8px solid #6e0800;
               /* mantém a borda vermelha */
               border-radius: 15px;
               padding: 1.5%;
               /* espaço sutil */
               text-align: center;
             }

             .comunicados-box.somente-imagem .comunicados-img {
               width: 100%;
               display: flex;
               justify-content: center;
               align-items: center;
               margin: 0;
             }

             .comunicados-box.somente-imagem .comunicados-img img {
               width: 95%;
               height: auto;
               border-radius: 15px;
               display: block;
               margin: 0 auto;
             }


             /*drop menu*/

             .user-menu {
               position: relative;
               display: inline-block;
             }

             .user-avatar {
               width: 25%;
               border-radius: 50%;
               cursor: pointer;
               border: 2px solid #555;
               object-fit: cover;
               transition: transform 0.2s ease;
             }

             .user-avatar:hover {
               transform: scale(1.05);
             }

             .dropdown {
               display: none;
               position: absolute;
               right: 0;
               background-color: #fff;
               border: 1px solid #ddd;
               border-radius: 10px;
               box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
               z-index: 1000;
               min-width: 150px;
             }

             .dropdown a {
               display: block;
               padding: 10px;
               color: #333;
               text-decoration: none;
               font-family: Arial, sans-serif;
             }

             .dropdown a:hover {
               background-color: #f0f0f0;
             }



             /*cardapio*/
             .cardapio-section {
               text-align: center;
               margin-bottom: 60px;
             }

             .subtitulo {
               font-size: 1.5em;
               margin-bottom: 15px;
               color: #333;
             }

             .visualizacao {
               border: 2px solid #ccc;
               border-radius: 10px;
               box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
             }

             .botao {
               background-color: #0078d7;
               color: white;
               border: none;
               padding: 10px 20px;
               border-radius: 8px;
               cursor: pointer;
               font-size: 1em;
               transition: background-color 0.3s;
             }

             .botao:hover {
               background-color: #005fa3;
             }

             .divisor {
               margin: 50px auto;
               width: 80%;
               border: 1px solid #ccc;
             }

             /*cronograma*/
             .botao-download {
               display: inline-block;
               margin-top: 15px;
               padding: 10px 20px;
               background-color: #6e0800;
               color: white;
               text-decoration: none;
               border-radius: 8px;
               font-weight: bold;
               transition: 0.3s;
               left: 50%;
             }

             .botao-download:hover {
               background-color: #6e0800;
             }


             /*resto*/
             html,
             body {
               margin: 0;
               padding: 0;
               overflow-x: hidden;
             }

             .container {
               background-image: linear-gradient(to left, #921209, #6e0800);
               width: 50%;
               height: 9%;
               position: fixed;
               left: 0%;
               top: 0%;
               z-index: 1004;
             }

             .container2 {
               background-image: linear-gradient(to right, #921209, #6e0800);
               width: 50%;
               height: 9%;
               position: fixed;
               right: 0%;
               top: 0%;
               z-index: 1004;
             }

             .container3 {
               width: 100%;
               height: 14%;
               position: absolute;
               top: 15%;
               z-index: 0;
               justify-content: center;
               align-items: center;
               text-align: center;
             }

             .container4 {
               width: 53%;
               margin-left: auto;
               margin-right: auto;
               position: absolute;
               justify-content: center;
               top: 110%;
               left: 24%;
               padding-bottom: 20%;
               z-index: 0;
             }

             .container5 {
               background-image: linear-gradient(to left, #921209, #921209, #921209, #921209, #6e0800);
               box-shadow: -8px 8px 1px 7px #6e0800;
               border: none;
               position: absolute;
               width: 51%;
               padding: 25px 332px;
               border-radius: 30px;
               text-align: center;
               font-family: Helvetica;
               color: white;
               font-size: 26pt;
               font-weight: bold;
               display: inline-block;
               top: 15%;
               left: 3%;
               z-index: 1;
             }

             .backcont {
               background-color: #6e0800;
               width: 100%;
               height: 10%;
               position: fixed;
               left: 0px;
               top: 0px;
               z-index: 1003;
             }

             .buttonhome {
               position: absolute;
               top: 0%;
               left: 14%;
               width: 29.5%;
             }

             .buttonmenu {
               position: absolute;
               top: 24px;
               left: 18px;
             }

             .buttonusuario {
               position: relative;
               right: 2%;
               top: 10%;
               height: 29.5%;
               width: 29.5%;
               display: inline-block;
             }

             .ranking {
               margin-top: 10%;
               /* empurra a lista para baixo da barra vermelha */
             }

             .container0 {
               z-index: 2;
               display: flex;
               align-self: center;
               justify-content: center;
               align-items: center;
               margin-top: 0.5%;
               position: relative;
             }

             .container01 {
               display: flex;
               gap: 10%;
               margin-top: 20%;
               align-self: center;
               justify-content: center;
               align-items: center;
               width: 94%;
               height: 10vh;
             }

             .box {
               background-image: linear-gradient(to left, #d9d9d9, #d9d9d9, #d9d9d9, #d9d9d9, #d9d9d9, #c0c0c0);
               box-shadow: -5px 7px 1px 5px #a6a6a6;
               border: none;
               color: black;
               position: relative;
               width: 22%;
               justify-content: center;
               align-items: center;
               text-align: center;
               border-radius: 35px;
               font-family: Helvetica;
               color: #384b59;
               font-size: 26pt;
               font-weight: bold;
               display: inline-block;
               transition: transform 0.3s ease-in-out;
             }

             .box:hover {
               transform: scale(1.1);
             }

             .box2 {
               background-image: linear-gradient(to left, #929292, #a6a6a6, #a6a6a6, #a6a6a6, #929292);
               width: 60%;
               height: 110%;
               display: flex;
               padding-left: 1%;
               align-items: center;
               z-index: 1;
               border-radius: 30px;
             }

             .box3 {
               background-image: linear-gradient(to left, #921209, #921209, #921209, #921209, #6e0800);
               width: 9%;
               right: 0%;
               position: fixed;
               justify-content: center;
               align-items: center;
               text-align: center;
               z-index: 1;
               border-radius: 15px;
               margin-right: 1%;
               box-shadow: -4px 7px 2px 9px #6e0800;
               transition: transform 0.3s ease-in-out;
             }

             .hamburger {
               position: fixed;
               top: 3%;
               left: 1%;
               cursor: pointer;
               z-index: 1001;
             }

             .hamburger div {
               width: 1400%;
               height: 4px;
               background-image: linear-gradient(to right, #d0d4d7, #ffffff, #ffffff, #ffffff, #ffffff, #ffffff, #d0d4d7);
               border-width: 2%;
               margin-bottom: 50%;
               border-style: solid;
               border-color: #2a3851;
               border-radius: 5px;
               transition: 0.3s;
             }


             .overlay {
               position: fixed;
               top: 10%;
               left: 0;
               height: 100%;
               width: 100%;
               background: rgba(0, 0, 0, 0.6);
               opacity: 0;
               visibility: hidden;
               transition: opacity 0.4s ease, visibility 0.4s;
               z-index: 1000;
             }

             .overlay.active {
               opacity: 1;
               visibility: visible;
             }


             .sidebar {
               position: fixed;
               top: 10%;
               left: 0;
               width: 250px;
               height: 87%;
               background: #fff;
               padding: 20px;
               box-shadow: 2px 0 5px rgba(0, 0, 0, 0.3);
               transform: translateX(-110%);
               transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
               z-index: 1002;
             }

             .sidebar.active {
               transform: translateX(0);
             }

             .sidebar button {
               display: flex;
               justify-content: space-between;
               align-items: center;
               width: 100%;
               padding: 10px;
               margin: 5px 0;
               background: none;
               border: none;
               text-align: left;
               font-size: 16px;
               cursor: pointer;
             }


             .submenu {
               max-height: 0;
               overflow: hidden;
               transition: max-height 0.3s ease;
               margin-left: 15px;
             }

             .submenu.active {
               max-height: 250px;
             }

             .submenu button {
               font-size: 14px;
             }


             .arrow {
               transition: transform 0.3s ease;
             }

             .arrow.rotate {
               transform: rotate(180deg);
             }

             .footer {
               background-image: linear-gradient(to left, #921209, #6e0800);
               color: white;
               padding: 40px;
               position: absolute;
               text-align: center;
               width: 100%;
               float: left;
               right: 0%;
               bottom: auto;
             }

             .footer-content {
               position: relative;
               padding: 40px;
               z-index: 1;
             }

             .footer-logo {
               position: absolute;
               height: 100%;
               width: 13%;
               left: 0%;
               top: 0%;
             }

             .text-container {
               max-width: 76%;
               padding-left: 12%;
               text-align: justify;
             }

             a:link,
             a:visited,
             a:hover,
             a:active {
               text-decoration: none;
               color: inherit;
             }

             .container0 {
               display: flex;
               gap: 10%;
               align-self: center;
               justify-content: center;
               align-items: center;
               height: 10vh;
             }

             .pontuacao-container {
               background-image: linear-gradient(to left, #c6c6c6, #d9d9d9, #d9d9d9, #d9d9d9, #d9d9d9, #d9d9d9, #d9d9d9, #c6c6c6);
               border-width: 8px;
               border-style: solid;
               border-color: #a6a6a6;
               position: relative;
               width: 40.2%;
               padding: 2%;
               margin: 195px auto;
               border-radius: 25px;
             }

             .questions {
               background-image: linear-gradient(to left, #c6c6c6, #d9d9d9, #d9d9d9, #d9d9d9, #c6c6c6);
               color: white;
               width: 100%;
               height: 330%;
               margin: 0;
               padding: 0;
               box-sizing: border-box;
               position: absolute;
               text-align: center;
               float: left;
               top: 282%;
               bottom: 0%;
             }

             .questions-content {
               position: relative;
               padding: 75px;
               z-index: 1;
             }

             .questions-content2 {
               position: relative;
               padding: 160px;
               z-index: 1;
             }

             .questionsbackcont {
               background-color: #a6a6a6;
               color: white;
               width: 100%;
               height: 18px;
               margin: 0;
               padding: 0;
               box-sizing: border-box;
               position: absolute;
               text-align: center;
               float: left;
               top: 270%;
             }

             .quizimagem {
               position: absolute;
               top: 40%;
               left: 0%;
               right: 0%;
             }

             .quizcursos {
               display: flex;
               justify-content: center;
             }

             .subtítulohome {
               position: absolute;
               top: 651%;
               align-items: center;
               width: 100%;
               height: 14%;
               z-index: 1;
             }

             .buttonquiz {
               background-image: linear-gradient(to left, #d9d9d9, #d9d9d9, #d9d9d9, #d9d9d9, #d9d9d9, #c0c0c0);
               box-shadow: -10px 10px 1px 0px #a6a6a6;
               border: none;
               color: black;
               position: relative;
               height: 302px;
               width: 300px;
               border-radius: 35px;
               text-align: center;
               font-family: Helvetica;
               color: #384b59;
               font-size: 26pt;
               font-weight: bold;
               display: inline-block;
               top: 900px;
               left: 30%;
               transition: transform 0.3s ease-in-out;
             }

             .buttonquiz:hover {
               transform: scale(1.1);
             }

             .buttonforum {
               background-image: linear-gradient(to left, #d9d9d9, #d9d9d9, #d9d9d9, #d9d9d9, #d9d9d9, #c0c0c0);
               box-shadow: -10px 10px 1px 0px #a6a6a6;
               border: none;
               color: black;
               position: relative;
               height: 302px;
               width: 300px;
               border-radius: 35px;
               text-align: center;
               font-family: Helvetica;
               color: #384b59;
               font-size: 26pt;
               font-weight: bold;
               display: inline-block;
               top: 900px;
               left: 40%;
               transition: transform 0.3s ease-in-out;
             }

             .buttonforum:hover {
               transform: scale(1.1);
             }

             .button {
               background-image: linear-gradient(to left, #757676, #a6a6a6, #a6a6a6, #a6a6a6, #a6a6a6, #a6a6a6, #757676);
               border: none;
               color: black;
               position: relative;
               padding: 0px 255px;
               border-radius: 30px;
               text-align: center;
               font-family: Helvetica;
               color: #384b59;
               font-size: 26pt;
               font-weight: bold;
               display: inline-block;
               left: 0px;
               right: 0px;
               top: 59.8%;
               transition: transform 0.3s ease-in-out;
             }

             .button:hover {
               transform: scale(1.1);
             }

             .boxquiz {
               background-image: radial-gradient(circle, #a6a6a6, #a6a6a6, #a6a6a6, #a6a6a6, #757676);
               border: none;
               color: black;
               position: relative;
               width: 150px;
               height: 95px;
               padding: 10px 185px;
               border-radius: 30px;
               text-align: center;
               display: inline-block;
               left: 4%;
               transition: transform 0.3s ease-in-out;
             }

             .boxquiz:hover {
               transform: scale(1.1);
             }

             .colaborador {
               position: absolute;
             }

             .login-container {
               background-image: linear-gradient(to left, #d9d9d9, #d9d9d9, #d9d9d9, #d9d9d9, #d9d9d9, #c0c0c0);
               box-shadow: -7px 7px 1px 6px #a6a6a6;
               position: relative;
               width: 775px;
               height: 475px;
               padding: 30px;
               margin: 185px auto;
               border-radius: 35px;
             }

             .cadastro-container {
               background-image: linear-gradient(to left, #d9d9d9, #d9d9d9, #d9d9d9, #d9d9d9, #d9d9d9, #c0c0c0);
               box-shadow: -7px 7px 1px 6px #a6a6a6;
               position: relative;
               width: 775px;
               height: 595px;
               padding: 30px;
               margin: 140px auto;
               border-radius: 35px;
             }

             .usuário-logcad {
               display: flex;
               justify-content: center;
               margin-top: 4px;
             }

             .Remember {
               position: absolute;
               font-family: Helvetica;
               color: black;
               font-size: 14pt;
               top: 349px;
               left: 245px;
             }

             .irparacad {
               position: absolute;
               font-family: Helvetica;
               color: black;
               font-size: 14pt;
               margin-top: 20px;
               margin-left: 21%;
             }

             .form-label {
               display: block;
               font-family: Helvetica;
               color: black;
               font-size: 14pt;
               margin-top: 20px;
               margin-left: 22%;
             }

             .photo-label {
               display: block;
               font-family: Helvetica;
               color: black;
               font-size: 14pt;
               margin-top: 20px;

             }

             input[type="email"],
             input[type="password"],
             input[type="name"] {
               background-color: #b3b3b3;
               border: none;
               width: 55%;
               padding: 12px;
               margin-top: 5px;
               margin-left: 20%;
               border-radius: 20px;
             }

             input[type='checkbox'] {
               appearance: none;
               height: 2em;
               position: relative;
               width: 2em;
               margin-top: 20px;
               margin-left: 22%;
             }

             input[type='checkbox']::after,
             input[type='checkbox']::before {
               box-sizing: border-box;
               position: absolute;
             }

             input[type='checkbox']::after {
               border-bottom: 3px solid #FFFFFF;
               border-right: 3px solid #FFFFFF;
               content: '';
               height: 75%;
               left: 50%;
               top: 50%;
               transform: scale(0.1) translate(-50%, -50%);
               transition: transform 0.2s;
               width: 40%;
             }

             input[type='checkbox']::before {
               border: 3px solid #921209;
               border-radius: 0.25em;
               content: '';
               height: 100%;
               transition: background-color 0.2s;
               width: 100%;
             }

             input[type='checkbox']:checked::after {
               transform: rotate(35deg) scale(1) translate(-100%, -30%);
             }

             input[type='checkbox']:checked::before {
               background-color: #921209;
             }

             .quiztexto {
               position: absolute;
               top: 0px;
               bottom: 0px;
               right: 0px;
               left: 0px;
               display: flex;
               justify-content: center;
               align-items: center;
               font-family: sans-serif;
               color: white;
               font-size: 24pt;
               text-shadow: #1C1C1C -4px 3px 3px;
               font-weight: bold;
             }

             .quizpergunta {
               position: absolute;
               top: 0%;
               bottom: 0%;
               right: 0%;
               left: 0%;
               display: flex;
               justify-content: center;
               align-items: center;
             }

             .buttonlogin {
               margin-top: 8.6%;
               margin-left: 20%;
               width: 58%;
               padding: 12px;
               background: #790800;
               border: none;
               border-radius: 15px;
               text-align: center;
               font-family: Helvetica;
               color: white;
               font-size: 16pt;
               font-weight: bold;
               cursor: pointer;
               transition: transform 0.3s ease-in-out;
             }

             .buttonlogin:hover {
               transform: scale(1.1);
             }

             .buttoncadastro {
               margin-top: 7%;
               margin-left: 20%;
               width: 58%;
               padding: 12px;
               background: #790800;
               border: none;
               border-radius: 15px;
               text-align: center;
               font-family: Helvetica;
               color: white;
               font-size: 16pt;
               font-weight: bold;
               cursor: pointer;
               transition: transform 0.3s ease-in-out;
             }

             .buttoncadastro:hover {
               transform: scale(1.1);
             }

             main {
               padding: 30px;
               text-align: center;
               background-color: #ffffff;
               font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
               font-weight: bold;
             }

             main h1 {
               color: #333;
               margin-bottom: 20px;
             }

             .content {
               display: flex;
               justify-content: center;
               gap: 40px;
               flex-wrap: wrap;
             }

             .content img {
               max-width: 1000px;
               border: 5px solid #2a3851;
               max-height: 500px;
             }

             .salas-lista {
               text-align: left;
             }

             .salas-lista ul {
               list-style: none;
               padding: 0;
               margin: 0;
               columns: 2;
               column-gap: 20px;
             }

             .salas-lista li {
               margin: 5px 0;
               font-size: 15px;
             }

             .backcard {
               background-color: #ffffff;
               display: flex;
               justify-content: center;
               align-items: center;
               height: 100vh;
               margin: 0;
               font-family: Arial, Helvetica, sans-serif;
             }

             .card {
               background-color: #6b0000;
               color: white;
               width: 60%;
               display: flex;
               align-items: flex-start;
               gap: 25px;
               padding: 30px 40px;
               border-radius: 25px;
             }

             .profile-img {
               position: relative;
               margin-top: 3%;
               width: 100%;
               border-radius: 50%;
               display: flex;
               align-items: center;
               justify-content: center;

               overflow: hidden;
             }

             .profile-img img {
               width: 100%;
               height: 100%;
               object-fit: cover;
               border-radius: 50%;
             }

             .profile-container {
               max-width: 33%;
               background-color: #dbdbdb;
               margin: 50px auto;
               padding: 2%;
               border-radius: 20px;
               box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
             }

             .profile-pic {
               text-align: center;
               object-fit: cover;
               margin-bottom: 20px;
             }

             .profile-pic img {
               width: 180px;
               height: 180px;
               border-radius: 50%;
               object-fit: cover;
               object-position: center;
               border: 3px solid #fff;
               box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
             }

             .profile-pic input {
               display: none;
             }

             .profile-pic label {
               background-color: #a0180f;
               color: #fff;
               border-radius: 10px;
               cursor: pointer;
               font-size: 14px;
               width: 20%;
               margin-left: 40%;
               transition: 0.2s;
             }

             .profile-pic label:hover {
               background-color: #be281a;
             }

             .profile-form {
               display: flex;
               flex-direction: column;
               gap: 15px;
             }

             .save-btn {
               background-color: #a0180f;
               color: #fff;
               font-weight: bold;
               padding: 12px;
               border: none;
               border-radius: 10px;
               cursor: pointer;
               transition: 0.3s;
             }

             .save-btn:hover {
               background-color: #be281a;
             }