/* Variables */

:root {
  /* Colors */
  --color-camp-dark-green: #0b6064;
  --color-camp-light-green: #87c48d;
  --color-camp-yellow: #f4e841;
  --color-camp-red: #eb5b5d;
  /* Color variants */
  --color-camp-dark-green-20: rgba(21, 87, 36, 0.2);
  --color-camp-dark-green-30: rgba(21, 87, 36, 0.3);
  --color-camp-light-green-10: rgba(135, 196, 141, 0.1);
  --color-camp-light-green-20: rgba(135, 196, 141, 0.2);
  --color-camp-light-green-30: rgba(135, 196, 141, 0.3);
  --color-camp-red-30: rgba(235, 91, 93, 0.3);
  --color-white: #ffffff;
  --color-white-90: rgba(255, 255, 255, 0.9);
  --color-white-30: rgba(255, 255, 255, 0.3);
  --color-gray: #eaeaea;
  /* Spacing: https://v2.tailwindcss.com/docs/customizing-spacing#default-spacing-scale */
  --spacing-1: 0.25rem; /* 4px */
  --spacing-2: 0.5rem; /* 8px */
  --spacing-3: 0.75rem; /* 12px */
  --spacing-4: 1rem; /* 16px */
  --spacing-5: 1.25rem; /* 20px */
  --spacing-6: 1.5rem; /* 24px */
  --spacing-7: 1.75rem; /* 28px */
  --spacing-8: 2rem; /* 32px */
  --spacing-9: 2.25rem; /* 36px */
  --spacing-10: 2.5rem; /* 40px */
  --spacing-11: 2.75rem; /* 44px */
  --spacing-12: 3rem; /* 48px */
  --spacing-14: 3.5rem; /* 56px */
  --spacing-16: 4rem; /* 64px */
  --spacing-20: 5rem; /* 80px */
  --spacing-24: 6rem; /* 96px */
  --spacing-28: 7rem; /* 112px */
  --spacing-32: 8rem; /* 128px */
  --spacing-36: 9rem; /* 144px */
  --spacing-40: 10rem; /* 160px */
  /* Outline */
  --rounded-lg: 0.5rem;
  /* Shadow */
  --shadow-lg: 0 1px 3px rgba(0, 0, 0, 0.1);
  /* Size: https://tailwindcss.com/docs/width */
  --size-xs: 20rem; /* 320px */
  --size-sm: 24rem; /* 384px */
  --size-md: 28rem; /* 448px */
  --size-lg: 32rem; /* 512px */
  --size-xl: 36rem; /* 576px */
  --size-2xl: 42rem; /* 672px */
  --size-3xl: 48rem; /* 768px */
  --size-4xl: 56rem; /* 896px */
  --size-5xl: 64rem; /* 1024px */
  --size-6xl: 72rem; /* 1152px */
  --size-7xl: 80rem; /* 1280px */
  /* Font weight: https://tailwindcss.com/docs/font-weight */
  --font-thin: 100;
  --font-extralight: 200;
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;
  --font-black: 900;
  /* Font size: https://tailwindcss.com/docs/font-size */
  --font-size-xs: 0.75rem; /* 12px */
  --font-size-sm: 0.875rem; /* 14px */
  --font-size-base: 1rem; /* 16px */
  --font-size-lg: 1.125rem; /* 18px */
  --font-size-xl: 1.25rem; /* 20px */
  --font-size-2xl: 1.5rem; /* 24px */
  --font-size-3xl: 1.875rem; /* 30px */
  --font-size-4xl: 2.25rem; /* 36px */
  --font-size-5xl: 3rem; /* 48px */
  /* Font line height: https://tailwindcss.com/docs/font-size */
  --font-height-xs: calc(1 / var(--font-size-xs));
  --font-height-sm: calc(1.25 / var(--font-size-sm));
  --font-height-base: calc(1.5 / var(--font-size-base));
  --font-height-lg: calc(1.75 / var(--font-size-lg));
  --font-height-xl: calc(1.75 / var(--font-size-xl));
  --font-height-2xl: calc(2 / var(--font-size-2xl));
  --font-height-3xl: calc(2.25 / var(--font-size-3xl));
  --font-height-4xl: calc(2.5 / var(--font-size-4xl));
  --font-height-5xl: 1;
  /* Media breakpoints: https://tailwindcss.com/docs/responsive-design */
  --breakpoint-xs: 30rem; /* 480px / extra small screens */
  --breakpoint-sm: 40rem; /* 640px / small screens */
  --breakpoint-md: 48rem; /* 768px / medium screens */
  --breakpoint-lg: 64rem; /* 1024px / large screens */
  --breakpoint-xl: 80rem; /* 1280px / extra large screens */
  --breakpoint-2xl: 96rem; /* 1536px / extra extra large screens */
  /* Grid columns number: https://tailwindcss.com/docs/grid-template-columns */
  --grid-cols-1: repeat(1, minmax(0, 1fr));
  --grid-cols-2: repeat(2, minmax(0, 1fr));
  --grid-cols-3: repeat(3, minmax(0, 1fr));
  /* Grid columns span: https://tailwindcss.com/docs/grid-column */
  --grid-col-span-1: span 1 / span 1;
  --grid-col-span-2: span 2 / span 2;
  --grid-col-span-3: span 3 / span 3;

  /* Root style */
  min-height: 100vh;
  background-color: var(--color-camp-light-green-20);
  font-family: "Luciole", sans-serif;
  max-width: var(--size-7xl);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-6);
  padding-right: var(--spacing-6);
  padding-top: var(--spacing-3);
  padding-bottom: var(--spacing-3);
}
@media (min-width: 480px) {
  :root {
    padding-left: var(--spacing-12);
    padding-right: var(--spacing-12);
    padding-top: var(--spacing-6);
    padding-bottom: var(--spacing-6);
  }
}
@media (min-width: 1024px) {
  :root {
    padding-top: 0;
    padding-bottom: 0;
  }
  body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* Reset */

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}

/* Titles */

h1 {
  font-family: "Londrina Solid", cursive;
  font-weight: var(--font-bold);
  font-size: var(--font-size-4xl);
  line-height: var(--font-height-4xl);
  color: var(--color-camp-dark-green);
}
h2 {
  font-family: "Londrina Solid", cursive;
  font-size: var(--font-size-xl);
  line-height: var(--font-height-xl);
  color: var(--color-camp-dark-green);
}
h3 {
  font-weight: normal;
  color: var(--color-camp-dark-green);
}

/* Font Londrina Solid */

@font-face {
  font-family: "Londrina Solid";
  src: url("../fonts/LondrinaSolid-Thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Londrina Solid";
  src: url("../fonts/LondrinaSolid-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Londrina Solid";
  src: url("../fonts/LondrinaSolid-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Londrina Solid";
  src: url("../fonts/LondrinaSolid-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Font Luciole */

@font-face {
  font-family: "Luciole";
  src: url("../fonts/Luciole-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Luciole";
  src: url("../fonts/Luciole-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Luciole";
  src: url("../fonts/Luciole-Regular-Italic.ttf") format("truetype");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Luciole";
  src: url("../fonts/Luciole-Bold-Italic.ttf") format("truetype");
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

/* Columns */

.columns {
  display: grid;
  grid-template-columns: var(--grid-cols-1);
  gap: var(--spacing-6);
}
@media (min-width: 1024px) {
  .columns {
    grid-template-columns: var(--grid-cols-3);
  }
}
.columns__left {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
}
@media (min-width: 1024px) {
  .columns__left {
    grid-column: var(--grid-col-span-2);
  }
}
.columns__right {
  display: flex;
  flex-direction: column;
  height: 100%;
}