/* Body */
body {
    font-family: Poppins;
    position: relative;
}

body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 25%;
  width: 24rem;   /* w-96 = 384px */
  height: 24rem;
  background-color: rgba(164, 65, 208, 0.05);
  border-radius: 9999px; /* círculo */
  filter: blur(64px);    /* blur-3xl */
  pointer-events: none;
  z-index: -1;
}

body::after {
  content: "";
  position: absolute;
  bottom: 25%;
  right: 25%;
  width: 20rem;   /* w-80 = 320px */
  height: 20rem;
  background-color: rgba(164, 65, 208, 0.3);
  border-radius: 9999px;
  filter: blur(64px);
  pointer-events: none;
  z-index: -1;
}

h1, h2, h3, h4, h5, h6, #fullArticle h1, #fullArticle h2, #fullArticle h3, #fullArticle h4, #fullArticle h5, #fullArticle h6 {
    font-family: Poppins;
    color: #14093F;
}

/* Navbar */
.navbar .navbar-inner {
    background: linear-gradient(
        to right,
        #3D1FB1 0%,
        #8602C0 50%,
        #E33333 100%
    );
}

.navbar .brand {
    padding: 1rem 1.5rem;
}

.navbar .brand img {
    width: 7.5rem;
}

.navbar .nav .active .caret {
    border-bottom: 5px solid #9C00DD;
}

.navbar .nav li a, .navbar .icon-private-w {
    color: white;
}

.navbar .brand, .navbar .nav li a:hover, .navbar .nav li a:focus, .navbar .nav .active a, .navbar .nav .active a:hover, .navbar .nav .active a:focus {
    color: white;
}

.navbar a:hover .icon-private-w, .navbar a:focus .icon-private-w, .navbar .active a .icon-private-w, .navbar .active a:hover .icon-private-w, .navbar .active a:focus .icon-private-w {
    color: white;
}

.navbar .nav .active .caret {
    border-bottom: 0.5rem solid white;
}

/* Home */
/* Search Field */
#docsSearch {
background: none;
border-bottom: 0;
margin: 3rem 0;
}

#docsSearch h1 {
    color: #14093F;
}

#searchBar .search-query {
    border-radius: 1rem;
    padding: 1rem;
    border: 2px solid #e5e7eb;
}

#searchBar .search-query:focus {
    outline: none;
    border-color: #a441d0;
    box-shadow: 0 0 0 2px rgba(164, 65, 208, 0.5);
}

#searchBar input {
    font-family: Poppins;
}

#searchBar button {
    background-color: #9C00DD;
    border-radius: 0 1rem 1rem 0;
    border: none;
    font-family: Poppins;
    text-shadow: none;
}

#searchBar button:hover {
    background-color: #7411A3;
}

/* Content Boxes */
#contentArea {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.collection-category {
    text-align: left;
    border: 2px solid #f3f4f6;
    margin: 0.5rem;
    padding: 2rem;
    border-radius: 1rem;
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(4px);
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

.collection-category h2 a {
    color: #14093F;
}

.category-list .category h3 {
    height: 3.5rem;
    color: #14093F;
}

.category-list .category h3:hover {
    color: #7411A3;
}

.collection-category .category-list {
    margin: 0;
    display: flex;
}

.category-list .category {
    text-align: left;
    border: 2px solid #f3f4f6;
    margin: 0.5rem;
    padding: 1,5rem;
    border-radius: 1rem;
    background: linear-gradient(
        to bottom right,
        white,
        rgba(164, 65, 208, 0.05)
    );
}

.category-list .category:hover {
    border-color: rgba(164, 65, 208, 0.3); 
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1),
                0 4px 6px -4px rgba(0,0,0,0.1);
    background-color: white;
}

.category-list .category .article-count {
    margin: 0.25rem 0;
    color: #424143;
}

.category-list .category .article-count:hover {
    color: #424143;
}

/* Footer */
footer p {
    text-align: center;
}

/* MediaQueries */
@media (max-width: 768px) {
    .nav-collapse .nav>li>a {
        display: flex;
        justify-content: flex-start;
        padding: 8px 0;
    }
        
    .category-list .category {
        width: 100%;
    }

    .collection-category .category-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
    }
}

/* List Sections */
/* Seach input */
#sidebar form .search-query {
    border-radius: 1rem;
    padding: 1rem;
    border: 2px solid #e5e7eb;
}

#sidebar form .search-query:focus {
    outline: none;
    border-color: #a441d0;
    box-shadow: 0 0 0 2px rgba(164, 65, 208, 0.5);
}

/* Filters */
#categoryHead .sort select {
    border-radius: 1rem;
    padding: 1rem;
    border: 2px solid #e5e7eb;
}

#categoryHead .sort select:focus {
    outline: none;
    border-color: #a441d0;
    box-shadow: 0 0 0 2px rgba(164, 65, 208, 0.5);
}

/* List */
#main-content {
    background: none;
}

.contentWrapper {
    text-align: left;
    border: 2px solid #f3f4f6;
    padding: 2rem;
    border-radius: 1rem;
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(4px);
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

/* Article */
.related {
    text-align: left;
    border: 2px solid #f3f4f6;
    padding: 2rem;
    border-radius: 1rem;
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(4px);
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    margin-top: 2rem;
}