:root {
    --bs-body-bg:#222528;
    --bs-tertiary-bg-rgb:45,47,50;
}

.follows-navbar {
    margin-top:60px;
}

.banner {
    padding-top:100px;
    padding-bottom:100px;
    position:sticky;
    top:60px;
    width:100%;
    min-height:50%;
    z-index:1;
    background-image:linear-gradient(to bottom right, #0de1fdb7, #c43ee6ab);
}

* {
    scroll-margin-top:60px;
}

#description {
    z-index:2;
    position:relative;
    background-color:var(--bs-body-bg);
}

.sidebar {
    top:65px;
    font-size:0.85rem;
}

.sidebar ul {
    gap:0rem;
}

.sidebar ul li {
    width:fit-content;
}

.project {
    transition:0.5s all;
}

.shadow-text {
    text-shadow:var(--bs-box-shadow-lg) !important;
}

.project:hover {
    translate:2px;
}

.navbar {
    background-color:rgba(50, 51, 54, 0.753);
    backdrop-filter:blur(5px);
}

.dropdown:hover .dropdown-menu, .dropdown-toggle:focus + .dropdown-menu {
    display:block;
}

/* Make header buttons disappear when the screen is too small */
@media (max-width:575px) {
    #navbar-github, #navbar-projects {
        display:none !important;
    }
}

/* Make YAP card elements disappear when the screen is too small */
@media (max-width:991px) {
    #feature-card-sdk {
        display:none !important;
    }
}

@media (max-width:767px) {
    #feature-card-sdk, #splitter {
        display:block !important;
    }

    #feature-card-sdk {
        margin-left:0px !important;
    }
}

/* Code related stuff */
code {
    font-family:Consolas,monospace;
    overflow-y:scroll;
    line-height:17px;
}

.code-container {
    background-color:#1e2127;
    border-radius:1em;
}

.inline-code {
    background-color:#1e2127;
    padding:6px;
    color:#abb2bf;
    border-radius:0.25em;
    font-size:1rem;
}

.code-col-white {
    color:#abb2bf;
}

.code-col-grey {
    color:#5c6370;
}

.code-col-green {
    color:#a6e3a1;
}

.code-col-red {
    color:#e06c75;
}

.code-col-yellow {
    color:#f9e2af;
}

.code-col-pink {
    color:#f5c2e7;
}

.code-col-blue {
    color:#89dceb;
}

.code-col-cyan {
    color:#94e2d5;
}

.code-bg-white {
    background-color:#abb2bf;
}

.code-bg-grey {
    background-color:#5c6370;
}

.code-bg-green {
    background-color:#a6e3a1;
}

.code-bg-red {
    background-color:#e06c75;
}

.code-bg-yellow {
    background-color:#f9e2af;
}

.code-bg-pink {
    background-color:#f5c2e7;
}

.code-bg-blue {
    background-color:#89dceb;
}

.code-bg-cyan {
    background-color:#94e2d5;
}

.nf {
    margin-right:2.8px;
}