/* Colors */
/* Borders */
/* Fonts */
*,
*:before,
*:after {
  box-sizing: inherit;
}

@font-face {
  font-family: "ardarling";
  src: url("/assets/fonts/ar-darling.ttf");
}
@font-face {
  font-family: "inter";
  src: url("/assets/fonts/inter.ttf");
}
html {
  box-sizing: border-box;
  font-size: 1.25rem;
  font-family: "inter";
}

body {
  margin: 0;
  /* background: $background-color; */
  background: url("/assets/images/background-tile.png") repeat;
}

p {
  margin: 5px;
}

a {
  color: white;
  text-decoration: none;
  font-weight: bold;
}

footer {
  padding: 2rem;
  font-size: 0.7rem;
  text-align: center;
}

/* COMMON STYLES */
.style-font {
  font-family: "ardarling";
}

.style-background {
  color: white;
  background-color: black;
  border-radius: 20px;
  border: 4px solid black;
  padding: 1rem;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  filter: drop-shadow(0 0 0.75rem black);
}

/* Media Queries

Aixo es tot el que aplica quan la pantalla te menys de 1170px d'ample (mobils)

Amb aquestes opcions es sobreescriuen les anteriors, no cal reescriure tot

https://threkk.medium.com/how-to-make-a-css-only-hamburger-menu-f7ad41e13399

--------------------------------------------- */
@media all and (max-width: 1170px) {
  html {
    box-sizing: border-box;
    margin: auto;
    font-size: 1.25rem;
    font-family: "inter";
  }
  .style-background {
    color: white;
    background-color: black;
    border-radius: 20px;
    border: 4px solid black;
    padding: 1rem;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    filter: drop-shadow(0 0 0.75rem black);
  }
}
/*--------------------------------------------- */