body {
    max-width: 140rem;
}

/* 
	COLORE BLU:        #1864ab;
	COLORE BLU CHIARO: #d0ebff;
	COLORE ARANCIONE:  #ffa94d;
 */

/* ######################################################## */
/* ACCORDION CON L'INDICE DEGLI ARGOMENTI                   */
/* ######################################################## */

/*
SPACING SYSTEM (px)
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
FONT SIZE SYSTEM (px)
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
      */

/* ******************************************************************* */
/*                          NUOVO CODICE                               */
/* ******************************************************************* */

/* l'index accordion contiene la lista di tutti gli argomenti */
.index-accordion {
   margin: 3.6rem 6.4rem;
   display: flex;
   flex-direction: column;
   gap: 2.4rem;
}

/* index argument raggruppa tutti gli elementi */
.index-argument {
   background-color: #1864ab;
   border-radius: 10px;
   cursor: pointer;
}

.index-argument-title {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 0.8rem 1.2rem;
   transition: all 0.2s;
   color: #d0ebff;
}

.index-argument-title p {
   font-size: 4.4rem;
   /* color: #d0ebff;   */
}

.button-arrow {
   background: none;
   border: none;
}

.button-arrow-icon {
   height: 4.4rem;
   width: 4.4rem;
   color: #d0ebff;
   cursor: pointer;
}

.index-argument-title:hover {
   color: #ffa94d;
}

/* .button-arrow-icon:hover{ */
/* color: #ffa94d; */
/* } */

.index-argument-content {
   font-size: 3rem;
}

/* ----------------------------------------------- */
/* quando index-argument (elemento padre) è closed */
/* ----------------------------------------------- */

/* 1. La freccia verso l'alto è nascosta */
.closed .button-arrow-icon[name="arrow-up-outline"] {
   display: none;
}
/* 2. La freccia verso il basso è visibile */
.closed .button-arrow-icon[name="arrow-down-outline"] {
   display: block;
}
/* 3. Il contenuto dell'elemento è nascosto */
.closed.index-argument-content {
   display: none;
}

/* ----------------------------------------------- */
/* quando index-argument (elemento padre) è opened */
/* ----------------------------------------------- */

/* 1. La freccia verso l'alto è visibile */
.opened .button-arrow-icon[name="arrow-up-outline"] {
   display: block;
}
/* 2. La freccia verso il basso è nascosta */
.opened .button-arrow-icon[name="arrow-down-outline"] {
   display: none;
}
/* 3. Il contenuto dell'elemento è visibile */
.opened.index-argument-content {
   display: block;
}

/* ----------------------------------------------- */
/*                 SOTTO INDICE                    */
/* ----------------------------------------------- */
.sub-index-accordion {
   margin: 0;
   display: flex;
   flex-direction: column;
   gap: 0rem;
}

.index-format-title {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 0.8rem 2.4rem;
   color: #1864ab;
}

.button-arrow-icon-format {
   height: 3.6rem;
   width: 3.6rem;
   color: #1864ab;
   cursor: pointer;
}

.index-format-title {
   background-color: #d0ebff;
   transition: all 0.3s;
}

.index-format-title:hover {
   color: #ffa94d;
}

.index-format-title p {
   font-size: 3.6rem;
}

.index-format-content {
   background-color: #f1f3f5;
}

/* ----------------------------------------------- */
/* quando index-argument (elemento padre) è closed */
/* ----------------------------------------------- */

/* 1. La freccia verso l'alto è nascosta */
.sub-closed .button-arrow-icon-format[name="arrow-up-outline"] {
   display: none;
}
/* 2. La freccia verso il basso è visibile */
.sub-closed .button-arrow-icon-format[name="arrow-down-outline"] {
   display: block;
}
/* 3. Il contenuto dell'elemento è nascosto */
.sub-closed.index-format-content {
   display: none;
}

/* ----------------------------------------------- */
/* quando index-argument (elemento padre) è opened */
/* ----------------------------------------------- */

/* 1. La freccia verso l'alto è visibile */
.sub-opened .button-arrow-icon-format[name="arrow-up-outline"] {
   display: block;
}
/* 2. La freccia verso il basso è nascosta */
.sub-opened .button-arrow-icon-format[name="arrow-down-outline"] {
   display: none;
}
/* 3. Il contenuto dell'elemento è visibile */
.sub-opened.index-format-content {
   display: block;
}

.toc {
   list-style: none;
   display: flex;
   flex-direction: column;

   gap: 0.2rem;
}

.toc-item:link,
.toc-item:visited {
   display: block;
   text-decoration: none;
   color: #1864ab;
   font-weight: 500;
   font-size: 3rem;
   /* transition: all 0.2s; */

   padding: 0.8rem 3.6rem;
   border-radius: 5px;
}

.toc-item:hover,
.toc-item:active {
   color: #ff922b;
   /* background-color: #d0ebff; */
   border: 0.2rem solid #1864ab;
}




@media (max-width: 30em) {
   
    .index-accordion {
        margin: 3.6rem 3.2rem;
    }
    
}
    
@media (max-width: 20em) {
       
    .index-accordion {
        margin: 2.4rem 1.8rem;
    }
          
}