/* -- FONTS -- */
@font-face {
  font-family: "readex-pro";
  src: url("../fonts/ReadexPro-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "readex-pro";
  src: url("../fonts/ReadexPro-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "readex-pro";
  src: url("../fonts/ReadexPro-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}
/* -- GLOBAL -- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'readex-pro', sans-serif;
  list-style: none;
  text-decoration: none;
  font-size: var(--body);
}
:root {
  /* -- TEXTs -- */
  --h1: 72px;
  --h2: 32px;
  --h3: 26px;
  --h4: 18px;
  --body: 16px;
  --input: 14px;

  /* -- MARGINs -- */
  --m0: 4px;
  --m1: 8px;
  --m2: 12px;
  --m3: 16px;
  --m4: 24px;
  --m5: 32px;
  --m6: 40px;
  --m7: 64px;
  --m8: 128px;
}
body {
  width: 100%;
  min-height: 100vh;
  background: var(--background);
  color: var(--text-900);

  /* -- PALLETE -- */
  color-scheme: light dark;

  --background: #ffffff;
  --middleground: #efefef;
  
  --primary: #227EE6;
  --secondary: #B12AFF;

  --error-bg: #c70c0c50;
  --error-text: #fa1818;

  --light: #ffffff;
  --dark: #000000;

  --text-900: #000;
  --text-800: #555;
  --text-700: #777;
  --text-600: #CCC;
  --text-500: #EEE;
  --text-400: #F6F3FD;
  --text-300: #FFF;
}
body.dark-theme {
  /* -- PALLETE -- */
  --background: #1e1e1e;
  --middleground: #222;
  
  --primary: #227EE6;
  --secondary: #B12AFF;

  --light: #ffffff;
  --dark: #000000;

  --text-900: #fff;
  --text-800: #f6f3fd;
  --text-700: #eee;
  --text-600: #ccc;
  --text-500: #777;
  --text-400: #555;
  --text-300: #000;
}
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }
h4 { font-size: var(--h4); }
h5 { font-size: var(--body); }
h6 { font-size: var(--input); }
a {
  color: inherit;
  text-decoration: none;
}
/* -- TEST -- */
.test {
  background-color: var(--dark);
  padding: var(--m4);
  display: flex;
  flex-direction: column;
  gap: var(--m2);
}
.test .element{
  background-color: var(--text-800);
  color: var(--text-500);
  padding: var(--m4);
}
/* -- LIMITES -- */
.limits-1 {
  width: 100%;
  padding-inline: 12%;
}
/* -- OPACITY -- */
.op-75 { opacity: .75; }
.op-5 { opacity: .5; }
.op-25 { opacity: .25; }
/* -- FLEX -- */
.flex { display: flex; }
.flex-1{
  display: flex;
  align-items: center;
}
.flex-2 {
  display: flex;
  justify-content: center;
  align-items: center;
}
.gap0, .gap-0 { gap: var(--m0); }
.gap1, .gap-1 { gap: var(--m1); }
.gap2, .gap-2 { gap: var(--m2); }
.gap3, .gap-3 { gap: var(--m3); }
.gap4, .gap-4 { gap: var(--m4); }
.gap5, .gap-5 { gap: var(--m5); }
.gap6, .gap-6 { gap: var(--m6); }
/* -- GRIDs -- */
.grid { display: grid; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.g5 { grid-template-columns: repeat(5, 1fr); }
.g6 { grid-template-columns: repeat(6, 1fr); }
.g-4i-5 { grid-template-columns: 1fr 1fr 1fr 3fr 1fr; }
/* -- BREAKPOINTS -- */
@media (max-width: 1280px) {
  .limits-1 { padding-inline: 6%; }
}
@media (max-width: 768px) {
  .limits-1 { padding-inline: 3%; }
}