* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Nexa", Arial, Helvetica, sans-serif;
}

*, ::after, ::before {
  box-sizing: border-box;
}

@font-face {
  font-family: Nexa;
  src: url(../../css/NexaLight.otf);
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: Nexa;
  src: url(../../css/NexaBold.otf);
  font-weight: 700;
  font-style: normal;
}
html, body {
  height: 100vh;
  
}
body {
    display: flex;
    flex-direction: column;
    font-family: sans-serif;
    background-color: #14151A;
   /* color: #333;*/
    /*padding: 1rem;*/
    /*height: 100%;*/
    overflow: hidden;
    justify-content: center;
    align-items: center;
    color: azure;
    flex-wrap: nowrap;
    /*border: 1px solid red;*/
}
.landingP{
/*border: 1px solid red;*/
display: flex;
justify-content: center;
align-items: center;
max-width: 550px;
width: 100%;
max-height: 350px;
height: 100%;
overflow: hidden;
padding-top: 20px;

}
svg{
  width: 100%;
  height: 100%;
 /* border: 1px solid rgb(9, 255, 0);*/
  display: block;
  margin: 0;
  padding: 0;

}

footer {
    width: 450px;
    height: 20px;
    margin-top: auto; /* Esta é a chave! Empurra o footer para o final */
    margin-bottom: 5px; /* Adiciona um espaçamento de 10px da borda inferior */
    text-align: center; /* Centraliza o texto do footer, se houver */
    /*padding: 1rem; /* Adiciona um pouco de padding ao redor do conteúdo do footer */
    font-size: 12px;
    /*border: 1px solid blue; /*Apenas para visualização */
}
h2{
  font-size: 16px;
}


/* --- Media Queries para dispositivos móveis --- */

/* Para telas menores que 768px (geralmente tablets em retrato e celulares) */
@media (max-width: 768px) {
  body {
    /* Você pode ajustar o justify-content ou align-items se precisar centralizar de forma diferente em telas menores */
 
    padding: 1rem;
    justify-content: flex-start;
    align-items: stretch;
    overflow: auto;

  }

  svg {
    width: 100%;
    height: auto;
  }

  .landingP {
    max-width: 100%;
    max-height: 70%;
    flex-direction: column;
    padding: 10px;
   /* border: 1px solid blue; /*Apenas para visualização */
  }

  footer {
    width: 95%; /* Ocupa quase a largura total em telas menores */
    margin-bottom: 5px; /* Mantém o espaçamento inferior */
    font-size: 10px; /* Reduz o tamanho da fonte para economizar espaço */
  }

  h2 {
    font-size: 14px; /* Reduz o tamanho da fonte para títulos */
    text-align: center;
  }
}

/* Para telas ainda menores (celulares em retrato) */
@media (max-width: 480px) {
 

  .landingP {
    max-height: 60%; /* Reduz ainda mais a altura para celulares menores */
    padding-top: 5px;
  }

  footer {
    font-size: 9px; /* Pode reduzir ainda mais para telas muito pequenas */
    height: auto; /* Deixa a altura se ajustar ao conteúdo */
  }

  h2 {
    font-size: 12px;
  }
}