@font-face {
    font-family: "Baloo Bhaijaan";
    src: url("https://s.secreterrier.com/font.woff2") format(woff2);
    ascent-override: 125%;
}


:root {
    --hsl-hue: 202;
    --hsl-saturation: 40%;
    --blue: hsl(var(--hsl-hue), var(--hsl-saturation), 57%);
    --yellow: #fbeec1;
    --button-gray: rgb(220, 220, 220);
    --white-bg: rgb(255, 255, 255);
    --grey-bg: #f4f4f4;
    --box-shadow: rgba(60, 64, 67, .3) 0px 1px 2px 0px, rgba(60, 64, 67, .15) 0px 2px 6px 2px;
    --bottom-box-shadow: rgba(0, 0, 0, .05) 0px 10px 10px 0px;
    --dark-blue: hsl(var(--hsl-hue), var(--hsl-saturation), 40%);
    --darker-blue: hsl(var(--hsl-hue), var(--hsl-saturation), 20%);
    --lightest-blue-bg: hsl(var(--hsl-hue), var(--hsl-saturation), 97%);
    --lighter-blue-bg: hsl(var(--hsl-hue), var(--hsl-saturation), 93%);
    --light-blue-bg: hsl(var(--hsl-hue), var(--hsl-saturation), 90%);
    --blue-bg: hsl(var(--hsl-hue), var(--hsl-saturation), 80%);
    --dark-blue-bg: hsl(var(--hsl-hue), var(--hsl-saturation), 70%);
    --success-green: #4caf50;
    --success-green-bg: #a9dbb8;
    --warning-yellow-bg: #fbeec1;
    --error-red: #c3423f;
    --error-red-bg: #ef798a;
    --dark-error-red-bg: #ec5f74;
    --top-nav-height: 7vh;
    --top-sidebar-height: 0px;
    --border-radius: 8px;
    --button-border-width: 3px;
    --btn-orange: hsl(32, 100%, 65%);
    --btn-pink: hsl(346, 69%, 80%);
    --btn-purple: hsl(314, 48%, 70%);
    --btn-blue: hsl(217, 100%, 71%);
    --btn-green: hsl(118, 39%, 66%);
    --btn-yellow: hsl(56, 62%, 69%);
    --dark-btn-orange: hsl(32, 100%, 55%);
    --dark-btn-pink: hsl(346, 69%, 70%);
    --dark-btn-purple: hsl(314, 38%, 60%);
    --dark-btn-blue: hsl(217, 100%, 61%);
    --dark-btn-green: hsl(118, 39%, 56%);
    --dark-btn-yellow: hsl(56, 62%, 59%);
    --help-scout-bubble-height: 60px
}

body {
    background-color: var(--blue);
    font-family: Baloo Bhaijaan;
    min-height: 100vh;
}

header{
    width: 100vw;
}

.navbar-inner .container-fluid{
    margin: 0;
    padding: 1rem;
    width: 100%;
    max-width: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.navbar-inner .z-fluid{
    margin: 0;
    padding: 1rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

section{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#docsSearch{
    background-color: white;
    padding-top: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#docsSearch h1{
    margin: 9px 0;
    font-family: inherit;
    font-weight: 700;
    line-height: 25px;
    font-size: 2.5em;
    color: black;
    text-rendering: optimizelegibility
}

#docsSearch #searchBar{
    margin-top: 1rem;
}

#docsSearch #searchBar input{
    background-color: var(--light-blue-bg);
    border: none;
    font-family: Baloo Bhaijaan;
    border-radius: var(--border-radius);
    font-size: 1.6rem;
}

#docsSearch #searchBar input:focus{
    outline-offset: 0;
}

#docsSearch #searchBar input::placeholder{
    color: var(--blue);
    font-size: 0.8em;
    overflow: visible;
    font-family: 'Baloo Bhaijaan';
    font-weight: 100;
}

#docsSearch #searchBar button {
    border: none;
    background-color: var(--blue);
    cursor: pointer;
    border-radius: var(--border-radius);
    user-select: none;
    text-decoration: none;
    box-sizing: border-box;
    user-select: none;
    grid-column-start: 4;
    grid-column-end: 5;
    font-family: inherit;
    color: white;
    font-size: 1.6rem;
}

#docsSearch #searchBar button:hover{
    background-color: var(--dark-blue);
    color: var(--light-blue-bg);
}


#contentArea{
    background-color: var(--blue);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
}

#contentArea h2{
    font-size: 2em;
    margin-bottom: 0;
}

.category-list .category{
    width: 100% !important;
    max-width: none;
    box-sizing: none;
    background-color: var(--white-bg);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    padding: 1.6rem;
    scroll-margin-top: calc(var(--total-top-height) + var(--top-nav-height));
    gap: 1.6rem;
    transition: all 0.3s ease;
}

.most-pop-articles ul{
    font-size: 1.5em;
    text-decoration: none;
    border-bottom-style: none;
    color: white;
}

.most-pop-articles a{
    text-decoration: none;
    border-bottom-style: none;
}

.most-pop-articles span{
    color: white;
}

footer{
    flex-shrink: 0;
    margin-top: auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-size: 1.25em;
}

footer p{
    color: white;
}

footer p a{
    color: white;
}

footer p span{
    color: white;
}

.contentWrapper{
    background-color: white;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    scroll-margin-top: calc(var(--total-top-height) + var(--top-nav-height));
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    transition: all 0.3s ease;
}
.related{
  background-color: white;
  border-radius: var(--border-radius);
  margin-top: .5rem;
  box-shadow: var(--box-shadow);
}

@media (max-width: 768px){
    #main-content{
        margin: 1rem 0 0 0;
    }
}

#main-content .contentWrapper .articleFoot{
    margin-top: auto;
}

#sidebar #searchBar input{
    background-color: var(--light-blue-bg);
    border: none;
    font-family: Baloo Bhaijaan;
    border-radius: var(--border-radius);
}

#sidebar #searchBar input:hover{
    background-color: var(--light-blue-bg);
}

#sidebar #searchBar input::placeholder{
    color: var(--blue);
}

#fullArticle h1{
    color: black;
}

#fullArticle h3{
    color: black;
}

#fullArticle p{
    color: black;
}

#sidebar{
    background-color: white;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    padding: 1.6rem;
    scroll-margin-top: calc(var(--total-top-height) + var(--top-nav-height));
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
}

.sort select {
    border: none;
    border-radius: 0;
    border-bottom: var(--button-border-width) solid var(--dark-blue);
    line-height: normal;
    vertical-align: middle;
    background-color: var(--light-blue-bg);
    max-width: 100%;
    text-overflow: ellipsis;
}

@media (max-width: 768px) {
    .formfield input,
    .formfield select {
        font-size: var(--mobile-form-fontsize);
    }

    .formfield select {
        color: black;
    }
}