/* #region Variables */
:root {
  --text: #0c0e06;
  --background: #f8f9f3;
  --primary: #a5b560;
  --secondary: #acd099;
  --accent: #93c582;
}

/* #endregion */

/* Genérico */
* {
  margin: 0;
  padding: 0;
  color: var(--text);
  font-family: Inter, sans-serif;
  font-optical-sizing: auto;
  box-sizing: border-box;
}

body {
  background: var(--background);
}

/* #region Material icons: Recommended icon sizes */
span.size-20 {
  font-size: 20px;
  font-variation-settings: "OPSZ" 20;
}
span.size-24 {
  font-size: 24px;
  font-variation-settings: "OPSZ" 24;
}
span.size-40 {
  font-size: 40px;
  font-variation-settings: "OPSZ" 40;
}
span.size-48 {
  font-size: 48px;
  font-variation-settings: "OPSZ" 48;
}
/* #endregion */

/* #region Estilos comunes */
.flex-horizontal {
  display: flex;
  flex-direction: row;
}
.flex-vertical {
  display: flex;
  flex-direction: column;
}

@media screen and (width <= 800px) {
  .flex-horizontal {
    flex-direction: column;
  }
}

em {
  font-style: normal;
  font-weight: bold;
  color: var(--accent);
}

.sin-decoraciones {
  text-decoration: none;
  list-style: none;
}

.font-accent {
  color: var(--accent);
}
.font-primary {
  color: var(--primary);
}
.font-text {
  color: var(--text);
}

/* #endregion */