:root {
  --green: #dedf55;
}

@font-face {
  font-family: 'Lilita One';
  src:
    url('fonts/LilitaOne-Regular.woff2') format('woff2'),
    url('fonts/LilitaOne-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'One Little Font';
  src:
    url('fonts/OneLittleFont-Alt-Regular.woff2') format('woff2'),
    url('fonts/OneLittleFont-Alt-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

/* GENERAL -----------------------------------------------*/

body {
    color: var(--primary-color);
    font-family: Arial, sans-serif;
    text-align: center;
    margin: 0;
    padding: 0;
    background-color: var(--green);
    background-image: url('/img/textura_fons2.png'), linear-gradient(var(--bg-color2), var(--bg-color2));
    background-repeat: repeat-y;
    background-size: 550px auto;
    background-position: center center;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body.no-scroll {
    overflow: hidden;
}

.body-content {
    width: 550px;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center horizontally */
    margin: 10px auto;
    margin-top: 0px;
    justify-content: center;
    text-align: center;
    position:relative;
}

@media (max-width: 550px) {
    .body-content {
        width: 95vw; /* Full width on very small screens */
    }
}

.main_title {
  font-family: 'Lilita One';
  text-align: center;
  color: white;
  font-size: 45px;
}

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--green);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.loading-text {
  font-size: 35px;
  font-family: 'One Little Font';
  text-align: center;
  color: white;
  margin-top: 0;
}

.loading-gif {
  width: 275px;
  height: auto;
  margin-bottom: -45px;
}