/*** VARIABLES ***/
/* Colors */
/*** EXTEND ***/
/* box-shadow */
ol.gradient-list > li, ol.gradient-list > li::before {
  box-shadow: 0.25rem 0.25rem 0.6rem rgba(0, 0, 0, 0.05), 0 0.5rem 1.125rem rgba(75, 0, 0, 0.05); }

/*** STYLE ***/
*,
*:before,
*:after {
  box-sizing: border-box; }

html,
body {
  margin: 0;
  padding: 0; }

body {
  background-color: #fafafa;
  color: #1d1f20; }

main {
  display: block;
  margin: 0 auto;
  max-width: 40rem;
  padding: 1rem; }

ol.gradient-list {
  counter-reset: gradient-counter;
  list-style: none;
  margin: 1.75rem 0;
  padding-left: 1rem; }
  ol.gradient-list > li {
    background: white;
    border-radius: 0 0.5rem 0.5rem 0.5rem;
    counter-increment: gradient-counter;
    margin-top: 1rem;
    min-height: 3rem;
    padding: 1rem 1rem 1rem 3rem;
    position: relative; }
    ol.gradient-list > li::before, ol.gradient-list > li::after {
      background: linear-gradient(135deg, #83e4e2 0%, #a2ed56 100%);
      border-radius: 1rem 1rem 0 1rem;
      content: '';
      height: 3rem;
      left: -1rem;
      overflow: hidden;
      position: absolute;
      top: -1rem;
      width: 3rem; }
    ol.gradient-list > li::before {
      align-items: flex-end;
      content: counter(gradient-counter);
      color: #1d1f20;
      display: flex;
      font: 900 1.5em/1 'Montserrat';
      justify-content: flex-end;
      padding: 0.125em 0.25em;
      z-index: 1; }
    ol.gradient-list > li:nth-child(10n+1):before {
      background: linear-gradient(135deg, rgba(162, 237, 86, 0.2) 0%, rgba(253, 220, 50, 0.2) 100%); }
    ol.gradient-list > li:nth-child(10n+2):before {
      background: linear-gradient(135deg, rgba(162, 237, 86, 0.4) 0%, rgba(253, 220, 50, 0.4) 100%); }
    ol.gradient-list > li:nth-child(10n+3):before {
      background: linear-gradient(135deg, rgba(162, 237, 86, 0.6) 0%, rgba(253, 220, 50, 0.6) 100%); }
    ol.gradient-list > li:nth-child(10n+4):before {
      background: linear-gradient(135deg, rgba(162, 237, 86, 0.8) 0%, rgba(253, 220, 50, 0.8) 100%); }
    ol.gradient-list > li:nth-child(10n+5):before {
      background: linear-gradient(135deg, #a2ed56 0%, #fddc32 100%); }
    ol.gradient-list > li:nth-child(10n+6):before {
      background: linear-gradient(135deg, rgba(162, 237, 86, 0.8) 0%, rgba(253, 220, 50, 0.8) 100%); }
    ol.gradient-list > li:nth-child(10n+7):before {
      background: linear-gradient(135deg, rgba(162, 237, 86, 0.6) 0%, rgba(253, 220, 50, 0.6) 100%); }
    ol.gradient-list > li:nth-child(10n+8):before {
      background: linear-gradient(135deg, rgba(162, 237, 86, 0.4) 0%, rgba(253, 220, 50, 0.4) 100%); }
    ol.gradient-list > li:nth-child(10n+9):before {
      background: linear-gradient(135deg, rgba(162, 237, 86, 0.2) 0%, rgba(253, 220, 50, 0.2) 100%); }
    ol.gradient-list > li:nth-child(10n+10):before {
      background: linear-gradient(135deg, rgba(162, 237, 86, 0) 0%, rgba(253, 220, 50, 0) 100%); }
    ol.gradient-list > li + li {
      margin-top: 2rem; }





      /*SEGON TIPUS LLISTAT*/
      :root {
        --bg: #fdfdfd;
        --highlight1: #ED4264;
        --highlight2: #FFEDBC;
        --color: #1a1e24;
        --font-number: Montserrat, Roboto, Helvetica, Arial, sans-serif;
        --font-head: "Space Mono", Consolas, Menlo, Monaco, "Courier New", monospace;
        --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    }
    
    .list {
        list-style: none;
        width: 600px;
        max-width: 90%;
    }
    
    .item {
        display: block;
        clear: both;
        counter-increment: list;
        padding-bottom: 4rem;
        font-size: 1.1rem;
        line-height: 1.375;
        position: relative;
    }
    
    .item:before {
        font: bold 2.25rem/1 var(--font-number);
        content: counter(list);
        width: 5rem;
        height: 5rem;
        float: left;
        margin: 0 1.5rem 0.75rem 0;
        color: var(--bg);
        background: var(--highlight1) linear-gradient(to bottom right, var(--highlight1) 25%, var(--highlight2));
        text-shadow: 0 0 2px var(--highlight1);
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        shape-outside: ellipse();
        z-index: 1;
    }
    
    .item:after {
        width: 2.5rem;
        height: 2.5rem;
        position: absolute;
        top: 0;
        left: 0;
        content: "";
        background: var(--highlight1);
        z-index: -1;
        border-top-left-radius: 3px;
    }
    
    
    .headline {
        padding: 0rem 0 0 0;
        margin: 0 0 1rem 0;
        font: normal 2rem var(--font-head);
    }