style.css

        /* Estilos personalizados */
        
        body {
          background-color: rgb(0, 0, 0); /* Cor de fundo preta com 50% de transparência */
          background-image: url("fundo5.jpg");
          background-size: cover;
          padding: 5px;
        }
        
        h1 {
         font-size: 20px;
         font-weight: 800;
         color: #ffffff;
      
         text-align: center;
        }
        
        p {
         font-weight:400 ;
         color:#ffd000 ;
         text-align: center ;
         margin-bottom: 15px ;
         
         text-transform: uppercase ;
         color: #FFBF00;
        }
        
        p.info{
         font-size:15px;
       
        }
        
        .top-rectangle {
  background-color: #000000;
  padding: 2px;
  text-align: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 25px;
  overflow: hidden; /* Para esconder o texto que ultrapassa os limites do retângulo */
}
 


.top-rectangle p {
 font-weight: 600;
 font-size: 14px;
 padding: 1px ;
 color: #ffd000;
}

  

.top-rectangle p {
  white-space: nowrap; /* Para que o texto não quebre a linha */
  animation: slide-text 10s linear infinite; /* Definindo a animação com duração de 10 segundos e repetição infinita */
}

@keyframes slide-text {
  from {
    transform: translateX(100%); /* Começa fora da tela à direita */
  }
  to {
    transform: translateX(-100%); /* Termina fora da tela à esquerda */
  }
}
        
        .logo {
            width: 130px;
            height: 130px;
            border-radius: 50%;
            margin: auto ;
            align-items: center;
            display: flex ;
            margin-bottom:15px;
            margin-top: 35px;
          
        }
        .social-icons {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 5px 0;
        }
        .social-icons img {
            width: 30px;
            height: 30px;
            margin: 10px 10px;
            margin-bottom: 20px;
            filter: invert(1); /* Inverta a cor do ícone para branco */
        }
        
     .botoes {
      margin: 9px 15px;
      justify-items:center;
     }
        
        .link-button {
            display: flex;
            align-items: center;
            border-radius: 20px;
            
            margin: 13px 0;
            padding: 8px;
            background-color: #ff0000;
            box-shadow: 0 3px 7px #000000;
            color: #ffffff;
        }
        .link-button:hover {
          display: flex;
          align-items: center;
          border-radius: 20px;
          border: solid #ff0000 2px;
          margin: 10px 0;
          padding: 5px;
          background-color:#0000009c;
          color: #ffffff;
      }



        .link-button img {
            width: 30px;
            height: 30px;
            margin-right: 30px;
            margin-left: 5px;
            filter: invert(1); /* Inverta a cor do ícone para branco */
            
        }
        .link-button span {
font-size: 18px;
            font-weight: bold;
            display: block ;
            align-items: center ;
            
        }
        
         .link {
            text-decoration: none; 
            color: #000000;
        }
        
      .link:hover{
        text-decoration:none ;
        color: #000000;
       }
        
        .footer p {
            text-align: center;
            color: #ffffff;
            font-size: 10px;
            background-color: #ff0000;
            font-weight: 700 ;
            position: fixed;
            bottom:0;
            left: 0;
            padding: 2px ;
            width:100%;
        }