@font-face {
    font-family: "FiraCode";
    font-size: 1rem;
    src: url(./fonts/fira-code/FiraCode-VariableFont_wght.ttf) format(ttf);
}

html {
    scroll-behavior: smooth;
}

div, img, a {
    -webkit-tap-highlight-color: transparent; 
}

body {
    font-family: "FiraCode", monospace;
}

:root {
    /* default to light mode  */
    --background-color: #ffffff;
    --profile-cover-bg: #e6e6e6;
    --profile-cover-text-color: #5a5a5a;
    --profile-cover-secondary-text-color: rgb(124, 124, 123);
    --profile-cover-bio-text-color: rgb(73, 73, 73);
    --profile-cover-bio-badge-bg-color: rgb(158, 191, 253);
    --profile-cover-bio-badge-text-color: rgb(88, 88, 88);
    --profile-cover-about-bg: #d0d0d0;
    --profile-cover-about-text: rgb(75, 75, 75);
    --profile-cover-about-text-secondary: rgb(109, 109, 109);
    --project-section-bg: #d0d0d0;
    --project-section-text: gray;
    --project-card-bg: white;
    --project-card-text: rgb(113, 113, 113);
    --project-card-badge-bg: rgba(158, 191, 253);
    --anchor-txt-color: #177d97;
    --blog-content-text: #252323b0;
    --hlgs-bg: #f3f3f3;
    /** code snippet **/
    --hlgs-text: #444;

    background-color: var(--background-color);
}

.dark {
    /* and the dark mode  */
    --background-color: #0d1117;
    --profile-cover-bg: #1e2227;
    --profile-cover-text-color: #fafafa;
    --profile-cover-secondary-text-color: rgb(124, 124, 123);
    --profile-cover-bio-text-color: #949494;
    --profile-cover-bio-badge-bg-color: rgb(158, 191, 253);
    --profile-cover-bio-badge-text-color: #1e2227;
    --profile-cover-about-bg: rgba(179, 179, 179, 0.2);
    --profile-cover-about-text: rgb(208, 208, 208);
    --profile-cover-about-text-secondary: rgb(142, 162, 133);
    --project-section-bg: rgba(179, 179, 179, 0.2);
    --project-section-text: gray;
    --project-card-bg: #8f8f8f66;
    --project-card-text: rgb(200, 200, 200);
    --project-card-badge-bg: rgb(145, 152, 166);
    --anchor-txt-color: #cef083;
    --blog-content-text: #fafafaa3;
    --hlgs-bg: #f3f3f30d;
    /** code snippet **/
    --hlgs-text: #fff;
}

a {
    text-decoration: none;
    color: var(--anchor-txt-color);
}

.profile-cover {
    background-color: var(--profile-cover-bg);
    color: var(--profile-cover-text-color);
    margin: 10px;
    /* margin-top: 20px; */
    padding: 15px;
    padding-top: 20px;
    padding-bottom: 20px;
    border-radius: 10px;
}

.profile-cover .short-catch {
    margin-top: -20px;
    color: var(--profile-cover-secondary-text-color);
}

.profile-cover .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
    font-size: smaller;
}

@media screen and (orientation: landscape) {
    body {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .profile-cover {
        width: 60%;
    }

    .profile-cover .container {
        flex-direction: row;
        /* Stack divs vertically */
    }

    .profile-cover .container .bio {
        margin-top: 0px;
    }
}

.profile-cover .container .bio {
    text-align: left;
    justify-content: left;
    min-width: 50%;
    margin-top: 20px;
}

.profile-cover .container .bio-info {
    padding-top: 7px;
    color: var(--profile-cover-bio-text-color);
    display: flex;
}

.profile-cover .container .bio-info .badge {
    padding: 2px;
    padding-left: 10px;
    padding-right: 10px;
    white-space: nowrap;
    height: fit-content;

    background-color: var(--profile-cover-bio-badge-bg-color);
    border-radius: 6px;
    color: var(--profile-cover-bio-badge-text-color);
    width: fit-content;
    margin-right: 10px;
}

.profile-cover .container .profile-img img {
    border-radius: 30px;
    width: 180px;
    height: 180px;
    margin-right: 20px;
}

.profile-about {
    margin-top: 20px;
    border-radius: 10px;
    width: calc(100% - 40px);
    background-color: var(--profile-cover-about-bg);
    padding: 20px;
    color: var(--profile-cover-about-text);
    font-size: medium;
}

.profile-about .container-about {
    color: var(--profile-cover-about-text-secondary);
    font-size: smaller;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.profile-about .container-about .left {
    text-align: left;
    justify-content: left;
}

.profile-about .container-about .right {
    text-align: right;
    justify-content: right;
}

.about-me {
    font-size: 0.9rem;
    /* font-weight: 300; */
}

.bordered-about {
    color: var(--profile-cover-bio-text-color);
    background-color: transparent;
    border-color: var(--profile-cover-about-bg);
    border-width: 3px;
    border-style: solid;
    width: calc(100% - 40px - 6px);
}

.project-sec {
    background-color: var(--project-section-bg);
    width: calc(100% - 20px);
    border-radius: 10px;
    margin-top: 20px;
    padding: 10px;
    padding-bottom: 20px;
}

.project-sec-heading span {
    align-self: center;
}

.project-sec-heading {
    display: flex;
    color: var(--project-section-text);
}

.project-sec-heading .mdi {
    padding-right: 10px;
    font-size: x-large;
}

.project-cards {
    overflow-x: scroll;
    display: flex;
    justify-content: left;
    text-align: left;
}


.project-only-sec .project-card {
    margin-bottom: 18px;
    margin-right: 0;
}

.project-sec .project-card {
    min-width: calc(190px * 2.5);
    max-width: calc(190px * 3);
}

.project-card {
    display: flex;
    justify-content: left;
    align-items: left;
    text-align: left;
    background-color: var(--project-card-bg);
    min-height: fit-content;
    max-height: 100%;
    border-radius: 5px;
    padding: 10px;
    margin-top: 10px;
    margin-right: 10px;
    /* font-family: "RedHatMonoRegular" monospace; */
    font-size: smaller;
}

@media screen and (orientation: landscape) {
    .project-card {
        padding-left: 15px;
    }
}

.project-card div b {
    font-size: small;
    font-weight: 800;
}

.project-card div {
    color: var(--project-card-text);
    padding-left: 5px;
    padding-right: 5px;
}

.project-card .license {
    background-color: var(--project-card-badge-bg);
    padding: 2px;
    padding-left: 8px;
    padding-right: 8px;
    border-radius: 8px;
}

.project-card .source-link {
    background-color: var(--project-card-badge-bg);
    padding: 2px;
    padding-left: 8px;
    padding-right: 8px;
    border-radius: 8px;
}

.blog-cards {
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
    justify-content: left;
    text-align: left;
    max-height: 80vh;
}

.blogs-heading {
    color: var(--profile-cover-secondary-text-color);
}

.blog-card {
    background-color: var(--project-card-bg);
    border-radius: 5px;
    padding: 8px;
    padding-bottom: 10px;
    padding-top: 19px;
    margin-top: 10px;
    /* font-family: "RedHatMonoRegular" monospace; */
    font-size: smaller;
}

.blog-card a {
    text-decoration: none;
    color: var(--project-card-text);
}

.blog-card .title {
    font-size: 1rem;
    color: var(--profile-cover-text-color);
}

.blog-card .content {
    color: var(--profile-cover-secondary-text-color);
    font-size: 1rem;
}

.blog-card .badge {
    background-color: var(--project-card-badge-bg);
    padding: 2px;
    padding-left: 8px;
    padding-right: 8px;
    border-radius: 8px;
}

.blog-date-badge {
    background-color: var(--project-card-badge-bg);
    padding: 2px;
    padding-left: 8px;
    padding-right: 8px;
    border-radius: 8px;
    font-size: small;
}

.ps-1 {
    padding-left: 5px;
}

.pe-1 {
    padding-right: 5px;
}

.pt-1 {
    padding-top: 5px;
}

.pb-1 {
    padding-bottom: 5px;
}

.d-flex {
    display: flex;
}

.d-none {
    display: none;
}

.vertical-align-center {
    align-content: center;
    flex-grow: 1; 
}

.vertical-align-center .shortInfo {
    /* font-family: "RedHatMono", monospace; */
    font-weight: 500;
}

@media (max-width: 768px) {
    .vertical-align-center .shortInfo {
        font-size: small;  
    }
}

.project-card-img-container {
    width: 100px;
}

.project-card-txt-container {
    width: 100%;
}

.project-img-width {
    width: 90px;
}

.project-img-sec-width {
    width: 100px;
}


/* .switch-box {
    background-color: var(--profile-co-about-bg);
    width: 23px;
    height: 23px;
    border-radius: 5px;
    position: absolute;
    top: 35px;
    left: auto;
    right: 35px;
    padding: 5px;
} */

.nav-bar {
    padding-top: 10px;
    padding-bottom: 10px;
    height: 39px;
}

.nav-item {
    display: table;
    vertical-align: center;
    text-align: center;
    margin-right: 15px;
    cursor: pointer;
    height: 100%;
}

.nav-item-text {
    display: table-cell;
    vertical-align: middle;
    line-height: normal;
}

.selected-nav {
    text-decoration: underline;
}

.header-btn {
    border-radius: 5px;
    background-color: var(--profile-cover-about-bg);
    vertical-align: center;
    text-align: center;
    cursor: pointer;
}

.theme-swticher {
    width: 23px;
    height: 23px;
    padding: 8px;
    margin-right: 0;
    margin-left: auto;
    font-size: larger;
}

.social-media-icons {
    font-size: larger;
}

.social-media-icons a {
    color: var(--profile-cover-secondary-text-color);
}

.blog-content {
    font-family: "FiraCode", monospace;
    font-weight: 500;
    font-size: 0.85rem;
    color: var(--blog-content-text);
    line-height: 1.12rem;
}

.blog-content h1 {
    /* font-family: "RedHatMono", monospace; */
    color: var(--profile-cover-text-color);
}

@media (max-width: 768px) {
    .blog-content h1 {
        font-size: 1.5rem;
        line-height: 2rem;
    }
}

.blog-content p {
    text-align: unset;
}

.blog-content center p {
    text-align: unset;
}

.copyright {
    color: #868686b0;
    font-size: smaller;
}

summary {
    cursor: pointer;
}