@import url('./background.css');
@import url('./header.css');
@import url('./main.css');




* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

:root {
  --text: #aaa4a4;
  --red: linear-gradient(109deg, rgba(29, 36, 49, 0.99) 15%, rgba(10, 12, 16, 0.7) 50%, rgba(10, 12, 16, 0.99) 85%);

  --blue: #0041C2;
  --green: #14B02D;
  --yellow: #ffc12b;
}

body,
button,
a {
  color: var(--text);
  font: 400 1rem "Mukta", sans-serif;
}

a {
  text-decoration: none;
}

button:hover {
  cursor: pointer;
}

#app {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100vh;

}

/* Estilize o elemento de loading */
#loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  /* Cor de fundo com transparência */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  /* Garante que o loading esteja na frente de todos os outros elementos */
}

/* Estilize o spinner de loading */
.loader {
  border: 8px solid #f3f3f3;
  /* Cinza claro */
  border-top: 8px solid #3498db;
  /* Azul */
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
  /* Animação de rotação */
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}



body {
  background-color: #f8fafc;
}

.container {
  padding: 2rem;
}








footer img {

  height: 100px;
  width: 120px;

}

.icon {

  display: flex;
  background-position: center;
  align-items: center;
  justify-content: center;
  text-align: center;

}





.botoes {
  display: flex;

}






.menu {

  background: rgba(0, 0, 0, 0.54);
  background-position: center;
  font-family: 'Poppins', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

}

.menu .botoes {

  margin: 40px;
  margin-bottom: 50px;

}