body {
   max-width: 140rem;
}

/* ----------------------------------------------------------------------
                       ELEMENTI PRINCIPALI
   ---------------------------------------------------------------------- */

/* contenitore principale dei tre elementi che costituiscono l'articolo */
.article-class {
   margin: 0px auto;
   display: grid;
   grid-template-columns: 30% 70%;
   gap: 1rem;
}

/* div flex che contiene l'autore e l'indice */
.flex-author-index {
   display: flex;
   flex-direction: column;

   gap: 1rem;
}

/* contenuto dell'articolo */
.article-content {
   background-color: white;

   color: #343a40;
}

/* ----------------------------------------------------------------------
                       BOX AUTORE
   ---------------------------------------------------------------------- */

/*
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
      */

/* riquadro del box dell'autore */
.author-box {
   display: flex;
   align-items: center;
   gap: 0.8rem;
   background-color: #f1f3f5;
   padding: 0.8rem 0.4rem;
}

.author-image {
   border-radius: 50%;
   border: 1px solid;
}

.author-name,
.last-update {
   font-size: 1.4rem;
   color: #495057;
}

.author-item,
.last-update-item {
   font-weight: 800;
}

/* ----------------------------------------------------------------------
                       INDICE
   ---------------------------------------------------------------------- */

.index-indication-div {
   background-color: #f1f3f5;
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.index-indication-item {
   font-size: 2.4rem;
   font-weight: 500;
   padding: 0.8rem 0.8rem;
}

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

.button-arrow-icon {
   height: 2.4rem;
   width: 2.4rem;
   cursor: pointer;
}

.opened .button-arrow-icon[name="arrow-up-outline"] {
   display: block;
}

.closed .button-arrow-icon[name="arrow-up-outline"] {
   display: none;
}

.opened .button-arrow-icon[name="arrow-down-outline"] {
   display: none;
}

.closed .button-arrow-icon[name="arrow-down-outline"] {
   display: block;
}

.hidden .button-arrow {
   display: none;
}

.index-indication-div.opened + .topic-index-ver {
   display: block;
}

.index-indication-div.closed + .topic-index-ver {
   display: none;
}

.topic-index-ver {
   border-radius: 2px;
   background-color: #f1f3f5;

   display: flex;
   flex-direction: column;
   gap: 0.1rem;
}

.topic-index-item {
   padding: 0.8rem 0.8rem;
   font-size: 2rem;
}

.topic-index-item:hover {
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.212);
}

.topic-index-item a {
   display: block;
}

.topic-index-item a:link,
.topic-index-item a:visited {
   text-decoration: none;
   color: #1864ab;
}

.topic-index-item a:hover,
.topic-index-item a:active {
   color: #1971c2;
   font-weight: bold;
}

.index-item-description {
   font-size: 1.8rem;
   color: black;
}
.topic-index-selected {
   background-color: #dee2e6;
}

/* ----------------------------------------------------------------------
  ARTICOLO
   ---------------------------------------------------------------------- */

/* ----------------------------------- 
 * classe padre di tutto l'articolo 
 * ----------------------------------- */
.article-content {
   background-color: #fff;
}

/* ----------------------------------- 
 * classe per avere delle note separate
 * ----------------------------------- */
.div-note {
   /* margin-top: 1.2rem; */
   margin-bottom: 2.4rem;
   background-color:#f1f3f5;
   
}

.div-note p {
   padding: 2rem 2rem;
   font-size: 2.4rem;
   line-height: 1.5;
}

.div-note h1 {
   font-size: 4.4rem;
   padding: 2rem 2rem;
   letter-spacing: -1px;
}

.div-note h2 {
   padding: 2rem 2rem;
   font-size: 3.6rem;
   letter-spacing: -1px;
}

.div-note h3 {
   padding: 2rem 2rem;
   font-size: 3rem;
}

.div-note h4 {
   padding: 2rem 2rem;
   font-size: 24px;
   font-weight: 600;
}

.div-note h5 {
   padding: 2rem 2rem;
   font-size: 24px;
   font-weight: 600;
}

.div-note h6 {
   padding: 2rem 2rem;
   font-size: 24px;
   font-weight: 400;
}


.div-note ul {
    padding: 2rem 2rem;
    padding-top: 0.1rem;
    padding-left: 5.2rem;
    font-size: 2.4rem;
 }

 
.div-note ol {
    padding: 2rem 2rem;
    padding-top: 0.1rem;
    padding-left: 5.2rem;
    font-size: 2.4rem;
 }
 
 .div-note img {
    display: block;
    margin: 0 auto;
    width: 80%;
    height: auto;
 }

/* ----------------------------------- 
 * classe per contere il testo normale di un aricolo
 * ----------------------------------- */

.div-md {
   padding-top: 1rem; 
   background-color: #f1f3f5;
}

.div-md p {
   padding: 1rem 2rem;
   font-size: 2.4rem;
   line-height: 1.5;
}

.div-md h1 {
   font-size: 4.4rem;
   padding: 2rem 2rem;
   letter-spacing: -1px;
}

.div-md h2 {
   padding: 2rem 2rem;
   font-size: 3.6rem;
   letter-spacing: -1px;
}

.div-md h3 {
   padding: 2rem 2rem;
   font-size: 3rem;
}

.div-md h4 {
   padding: 2rem 2rem;
   font-size: 24px;
   font-weight: 600;
}

.div-md h5 {
   padding: 2rem 2rem;
   font-size: 24px;
   font-weight: 600;
}

.div-md h6 {
   padding: 2rem 2rem;
   font-size: 24px;
   font-weight: 400;
}

.div-md ul {
   padding: 2rem 2rem;
   padding-top: 0.1rem;
   padding-left: 5.2rem;
   font-size: 2.4rem;
}

.div-md ol {
    padding: 2rem 2rem;
    padding-top: 0.1rem;
    padding-left: 5.2rem;
    font-size: 2.4rem;
 }

.div-md img {
   display: block;
   margin: 0 auto;
   width: 80%;
   height: auto;
}

.table-div-md {
    padding: 2rem 2rem; 
}

.table-div-md table {
    padding: 1rem 1rem;
    border: 1px solid;
    width: 50%;
    font-size: 2.4rem;
    border-collapse: collapse;
}

.table-div-md td {
    border: 1px solid;
    text-align: center;
}

.table-div-md th {
    border: 2px solid;
}

/* ----------------------------------- 
 * parte relativa ai blocchi W2N
 * ----------------------------------- */

.div-w2note {
   position: relative;
   background-color: #fff9db;
   padding: 2rem 2rem;
}

.w2n::after {
   content: "W2N";

   font-size: 1.8rem;
   font-weight: 600;
   background-color: #ffa94d;
   color: white;
   padding: 0.8rem 0.8rem;
   position: absolute;
   right: 0;
   top: 0;
   transform: translate(50%, -50%);
}

.w2n p {
   padding: 0.8rem 2rem;
   font-size: 2.4rem;
   font-weight: 500;
   line-height: 1.3;
}

.w2n h1 {
   font-size: 4.4rem;
   padding: 2rem 2rem;
   letter-spacing: -1px;
}

.w2n h2 {
   padding: 2rem 2rem;
   font-size: 3.6rem;
   letter-spacing: -1px;
}

.w2n h3 {
   padding: 2rem 2rem;
   font-size: 3rem;
}

.w2n h4 {
   padding: 2rem 2rem;
   font-size: 24px;
   font-weight: 600;
}

.w2n h5 {
   padding: 2rem 2rem;
   font-size: 24px;
   font-weight: 600;
}

.w2n h6 {
   padding: 2rem 2rem;
   font-size: 24px;
   font-weight: 400;
}


.w2n ul {
    padding: 1rem 2rem;
    padding-top: 0.1rem;
    padding-left: 5.2rem;
    font-size: 2.4rem;
 }

 
.w2n ol {
    padding: 1rem 2rem;
    padding-top: 0.1rem;
    padding-left: 5.2rem;
    font-size: 2.4rem;
 }

 .w2n li {
    padding-bottom: 0.8rem;
 }

/* ----------------------------------- 
 * parte relativa ai blocchi di codice
 * ----------------------------------- */

.div-code {
   position: relative;
}

pre {
    background-color: #f1f3f5;
   padding: 10px 10px;
   /* margin-bottom: 20px; */
   font-size: 2rem;
}

.code {
   background-color: #dbe4ff;
   padding: 10px 10px;
   /* margin-bottom: 20px; */
   font-size: 2rem;
   overflow: auto;
}

.code::after {
   content: "{code}";

   font-size: 1.8rem;
   font-weight: 600;
   background-color: #1864ab;
   color: white;
   padding: 0.8rem 0.8rem;
   position: absolute;
   right: 0;
   top: 0;
   transform: translate(50%, -50%);
}

/* ----------------------------------------------------------------------
  PAGINATION
   ---------------------------------------------------------------------- */

/* 912 
   Questo è il punto in cui il riquadro dell'autore
   e l'indice vanno sopra il testo dell'articolo */
@media (max-width: 57em) {
   .article-class {
      grid-template-columns: 100%;
      gap: 1rem;
   }

   .flex-author-index {
      grid-column: 1/-1;
      flex-direction: row;
   }

   .index-indication-div {
      padding-top: 1rem;
      padding-bottom: 1rem;
      cursor: pointer;
   }

   .index-indication-item {
      font-size: 3rem;
   }

   .author-box {
      flex-grow: 1;
   }
   .div-index {
      flex-grow: 4;
   }
}

@media (max-width: 37em) {
   .flex-author-index {
      flex-direction: column;
   }
}