body>footer,
body>header {
   padding: 1rem;
}

body>footer {
   display: flex;
   flex-direction: column;
   align-items: center;

   section {
      margin-bottom: 0.5rem;
   }
}

a {
   cursor: pointer;
}

article.error {
   background-color: #ffebee;
   color: #b71c1c;
}

article.success {
   background-color: #e8f5e9;
   color: #1b5e20;
}

article.warning {
   background-color: #fff8e1;
   color: #ff6f00;
}

/*
 * Header 
 */
header {
   &.top-header {
      nav {
         ul {
            li {
               h1 {
                  a {
                     img {
                        max-height: 3.5rem;
                     }
                  }
               }
            }
         }
      }
   }
}

/*
 * Hero 
 */
.hero {
   display: flex;
   flex-direction: row-reverse;
   align-items: center;
   gap: 2rem;
   margin-bottom: 3rem;

   img {
      border-radius: 50%;
      max-height: 12rem;
      filter: brightness(110%);
   }

   .hero-text {
      h2 {
         font-size: 2.25rem;
         margin-bottom: 0.5rem;
      }

      .subtitle {
         font-size: 1.2rem;
         margin-bottom: 1.5rem;
         color: var(--secondary-text-color);
      }
   }

   .cta-buttons {
      a {
         margin-right: 0.5rem;
      }

      @media (max-width: 768px) {
         a[role="button"] {
            width: 100%;
            margin-bottom: 0.4rem;
         }
      }
   }
}

/*
 * Skills
 */
.skills {
   margin-bottom: 3rem;

   h3 {
      text-align: center;
      margin-bottom: 1.5rem;
   }

   article {
      text-align: center;
      padding: 1rem;

      header {
         font-weight: bold;
      }
   }
}

/* About me */
.about-me {
   h3 {
      text-align: center;
      margin-bottom: 1.5rem;
   }

   p.blocked {
      border-left: 10px solid var(--blockquote-border-color);
      padding-left: 2rem;
   }
}

/*
 * Call to action
 */
.call-to-action {
   margin-bottom: 2rem;
   padding: 2rem;
   border: 1px solid var(--accordion-border-color);
   border-radius: 10px;
   background-color: var(--card-background-color);

   img {
      max-height: 15rem;
      margin-bottom: 1rem;
   }
}

/*
 * Timeline
 */
.timeline {
   padding: 0;
   position: relative;
   margin-top: 2rem;
   margin-bottom: 2rem;

   li {
      list-style: none;
      position: relative;
      margin-bottom: 2rem;
      padding-left: 4rem;

      article {
         header {
            color: var(--primary);
         }

         p:last-child {
            margin-bottom: 0;
         }

         h3 {
            font-size: 1.2rem;
            margin-top: 1.5rem;
         }

         ul {
            list-style: none;
            padding-left: 0;
            margin-top: 1rem;

            li {
               position: relative;
               padding-left: 1.75rem;
               margin-bottom: 0.75rem;

               &::before {
                  content: '';
                  display: inline-block;
                  width: 1rem;
                  height: 1rem;
                  position: absolute;
                  left: 0;
                  top: 0.2rem;
                  background-color: currentColor;
                  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 2 2.5 5 5.5 1-4 4.5 1 6-5-3.5-5 3.5 1-6-4-4.5 5.5-1z'/%3E%3C/svg%3E");
                  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 2 2.5 5 5.5 1-4 4.5 1 6-5-3.5-5 3.5 1-6-4-4.5 5.5-1z'/%3E%3C/svg%3E");
                  -webkit-mask-repeat: no-repeat;
                  mask-repeat: no-repeat;
                  -webkit-mask-size: 100% 100%;
                  mask-size: 100% 100%;
               }
            }
         }
      }
   }

   li:last-child {
      margin-bottom: 0;
   }

   .timeline-bubble,
   .initials-bubble {
      position: absolute;
      left: 0;
      top: 0;
      width: 3rem;
      height: 3rem;
      border-radius: 50%;
      background: var(--card-background-color);
      z-index: 1;
      border: 1px solid var(--muted-border-color);
   }

   .timeline-bubble {
      object-fit: contain;
   }

   .initials-bubble {
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
   }

   .timeline-year {
      position: absolute;
      left: 0;
      top: 3.2rem;
      width: 3rem;
      text-align: center;
      font-size: 0.8rem;
   }
}

.timeline::before {
   content: '';
   position: absolute;
   top: 0;
   bottom: 0;
   left: 1.5rem;
   width: 2px;
   background: var(--muted-border-color);
}