:root {
  --clr-green: hsl(76, 51%, 48%);
  --clr-blue: hsl(206, 72%, 61%);
  --clr-black: hsl(0, 0%, 10%) ;
  --clr-white: hsl(0, 0%, 100%) ;
  --clr-gray: hsl(0, 0%, 40%) ;
  
  --ff-primary: "Palanquin", sans-serif;

  --ff-body: var(--ff-primary);
  --ff-heading: var(--ff-primary);
  
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  
  --fs-100: 1rem;
  --fs-200: 1.125rem;
  --fs-300: 1.25rem;
  --fs-400: 1.875rem;
  --fs-500: 2.5rem;
  --fs-600: 3.5rem;
  
  --fs-small: var(--fs-100);
  --fs-regular: var(--fs-200);
  --fs-middle: var(--fs-400);
  --fs-title: var(--fs-500); 
    /* small es 16px, regular es 18px, middle es 30px, title es 40px */
}

@media (min-width: 50em){
  :root {
    --fs-small: var(--fs-200);
    --fs-regular: var(--fs-300);
    --fs-middle: var(--fs-500);
    --fs-title: var(--fs-600);  
    
    /* small es 18px, regular es 20px, middle es 40px, title es 56px 
     * el media es a partir de 50 em=800px cambia el tamaño del texto*/}
}

/*                       RESET RULES                   */
/* https://piccalil.li/blog/a-more-modern-css-reset/ */
  /* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
*{margin: 0;
  padding: 0;
  font: inherit;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core body defaults */
body {
 text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1, h2, h3, h4 {
  text-wrap: normal;
  text-wrap: balance;
}


/*                       CUSTOM CLASS                   */

.text-1 {
  color: var(--clr-green);
}
.text-2 {
  color: var(--clr-blue);
}
.text-3 {
  color: var(--clr-black);
}
.text-4 {
  color: var(--clr-white);
}
.text-5 {
  color: var(--clr-gray);
}

.fw-regular { font-weight: var(--fw-regular)}
.fw-medium { font-weight: var(--fw-medium)}
.fw-bold { font-weight: var(--fw-bold)}

.updates {
  font-weight: var(--fw-medium);
  font-size: var(--fs-regular);  
  font-family: var(--ff-body);
  color: var(--clr-black);
}

.to-do {
  font-weight: var(--fw-medium);
  font-size: var(--fs-regular);  
  font-family: var(--ff-body);
  color: var(--clr-black);
}
.plain-text {
  margin: 0;
  padding: 0;
  line-height: 1.4;
  font-size: clamp(1.1rem, 1.3vw, 1.2rem);
  text-align: left;
}

/*                       GENERAL STYLING                   */