/* Utility Classes */

.h2,
.h3,
.h4,
.h5 {
     color: var(--white-2);
     text-transform: capitalize;
     font-family: var(--ff-heading);
     letter-spacing: -0.015em;
}

.h2 {
     font-size: var(--fs-1);
     font-weight: var(--fw-700);
}

.h3 {
     font-size: var(--fs-2);
     font-weight: var(--fw-600);
}

.h4 {
     font-size: var(--fs-4);
     font-weight: var(--fw-500);
}

.h5 {
     font-size: var(--fs-7);
     font-weight: var(--fw-500);
}

.sidebar,
.main-content>article {
     position: relative;
     background: var(--bg-gradient-jet);
     border: 1px solid hsla(0, 0%, 100%, 0.14);
     border-radius: var(--radius-xl);
     padding: 20px;
     box-shadow: var(--shadow-2);
     z-index: 1;
     overflow: hidden;
}

.separator {
     width: 100%;
     height: 1px;
     background: linear-gradient(90deg, transparent, var(--jet), transparent);
     margin: var(--spacing-md) 0;
}

.icon-box {
     position: relative;
     background: var(--border-gradient-onyx);
     width: 34px;
     height: 34px;
     border-radius: var(--radius-sm);
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 16px;
     color: var(--orange-yellow-crayola);
     box-shadow: var(--shadow-1);
     z-index: 1;
}

.icon-box::before {
     content: "";
     position: absolute;
     inset: 1px;
     background: var(--eerie-black-1);
     border-radius: inherit;
     z-index: -1;
}

.icon-box ion-icon {
     --ionicon-stroke-width: 35px;
}

.main-content>article {
     display: none;
}

.main-content>article.active {
     display: block;
     animation: fadeIn 0.45s ease backwards;
}

@keyframes fadeIn {
     0% {
          opacity: 0;
          transform: translateY(4px);
     }

     100% {
          opacity: 1;
          transform: translateY(0);
     }
}

.article-title {
     position: relative;
     padding-bottom: 10px;
}

.article-title::after {
     content: "";
     position: absolute;
     bottom: 0;
     left: 0;
     width: 52px;
     height: 4px;
     border-radius: 999px;
     background: var(--text-gradient-yellow);
}

.content-card {
     position: relative;
     background: var(--eerie-black-2);
     padding: 20px;
     padding-top: 42px;
     border-radius: var(--radius-md);
     border: 1px solid var(--jet);
     cursor: pointer;
     transition: border-color var(--transition-1), transform var(--transition-1), box-shadow var(--transition-1);
}

.content-card:hover {
     border-color: var(--orange-yellow-crayola);
     transform: translateY(-3px);
     box-shadow: var(--shadow-3);
}

.has-scrollbar::-webkit-scrollbar {
     width: 6px;
     height: 6px;
}

.has-scrollbar::-webkit-scrollbar-track {
     background: var(--eerie-black-1);
     border-radius: 6px;
     border: 1px solid var(--jet);
}

.has-scrollbar::-webkit-scrollbar-thumb {
     background: var(--orange-yellow-crayola);
     border-radius: 6px;
     transition: background var(--transition-1);
}

.has-scrollbar::-webkit-scrollbar-thumb:hover {
     background: var(--vegas-gold);
}

.has-scrollbar::-webkit-scrollbar-button {
     width: 0;
     display: none;
}

@media (min-width: 580px) {

     .sidebar,
     .main-content>article {
          padding: 28px;
          margin-inline: auto;
          width: min(100%, 820px);
     }

     .article-title {
          padding-bottom: 14px;
     }

     .article-title::after {
          width: 66px;
          height: 5px;
     }

     .icon-box {
          width: 46px;
          height: 46px;
          border-radius: var(--radius-md);
          font-size: 18px;
     }

     .separator {
          margin: 26px 0;
     }

     .content-card {
          padding: 24px;
          padding-top: 24px;
     }
}

/* @media (min-width: 1024px) {
     .sidebar,
     .main-content > article {
          width: auto;
     }
} */

@media (min-width: 1250px) {
     .main-content>article {
          min-height: calc(100vh - 120px);
     }
}