:root {
    /*relative percentage*/
    --g_rel: 5.5%;

    /*content-max width*/
    --cont-wmax: 750px;

    /*Colors_used in DarkMode*/
    --col_bg: #18181f;
    --col_ibg: #37374d;
    --col_fg: #e7e7e7e0;

    /*Blue varients */
    --col_db: #37377d;
    --col_b: #3737fd1c;
    --col_lb: #1717fd;
    --col_git_a: #af8eff;
    --col_git_topics_fg: #bcbcef;
    --col_git_topics_bg: #1d1d28;
    --col_git_subtitle_fg: #9393d6;
    --col_df_a: #7676ca;
    --col_df_boxshadow: #7373d8;
    --col_profile_boxshadow1: #cececf82;
    --col_profile_boxshadow2: #ffffff5c;
    --col_universal_a: #9696d5;
    --col_prfoile_row_hover: #262630;
    --col_prfoile_row_data: #363652;
    --col_prfoile_row_data_span: #25252c;
    --col_prfoile_row_data_span_hover: #2f2f5f;
    --col_prfoile_foot_small: #585868;
    --col_prfoile_ed_title: #9494e9;
    --col_prfoile_ed_title_small: #68689e;
    --col_prfoile_ed_desc_p: #a6a6b0;
    --col_galler_arrow: #000;
    --col_sb_media_q: #14141cff;
    --col_sb_mq_bs: #1e2235;
}

/*
hex(int("ffffff",base=16)-int(s,base=16))[2:]
*/

body:has(#lightmode:checked) div.small_pix {
    filter: hue-rotate(282deg);
}

@font-face {
    font-family: "iconfont";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url(/static/fonts/fa-brands-400.woff2) format("woff2")
}

@font-face {
    font-family: "iconfont2";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url(/static/fonts/fa-regular-400.ttf) format("truetype")
}

body:has(#lightmode:checked) {
    /*Colors_used in DarkMode*/
    --col_bg: #e7e7e0;
    --col_ibg: #c8c8b2;
    --col_fg: #181818e0;

    /*Blue varients */
    --col_db: #c8c882;
    --col_b: #c8c8021c;
    --col_lb: #e8e802;
    --col_git_a: #507100;
    --col_git_topics_fg: #434310;
    --col_git_topics_bg: #e2e2d7;
    --col_git_subtitle_fg: #6c6c29;
    --col_df_a: #898935;
    --col_df_boxshadow: #8c8c27;
    --col_profile_boxshadow1: #31313082;
    --col_profile_boxshadow2: #818ea1;
    --col_universal_a: #69692a;
    --col_prfoile_row_hover: #d9d9cf;
    --col_prfoile_row_data: #c9c9ad;
    --col_prfoile_row_data_span: #dadad3;
    --col_prfoile_row_data_span_hover: #d0d0a0;
    --col_prfoile_foot_small: #a7a797;
    --col_prfoile_ed_title: #6b6b16;
    --col_prfoile_ed_title_small: #979761;
    --col_prfoile_ed_desc_p: #59594f;
    --col_galler_arrow: #003333;
    --col_sb_media_q: #ebebe3ff;
    --col_sb_mq_bs: #e1ddca;
    /*relative percentage*/
    --g_rel: 5.5%;

    /*content-max width*/
    --cont-wmax: 750px;

}

* {
    font-family: monospace;
    box-sizing: border-box;
    color: var(--col_fg);
}

a {
    text-decoration: none;
}


body {
    background: var(--col_bg);
    display: block;
    margin: 8px;
    border: 1.5px solid var(--col_bg);
}

.checker {
    color: var(--col_db);
    display: flex;
    font-size: small;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: stretch;
}

label::after {
    content: "lightmode";
    display: none;
    color: var(--col_db);
}

body:has(#lightmode:checked) label::after {
    content: "darkmode";

}

#lightmode {
    cursor: pointer;
}

.checker:hover label::after {
    position: absolute;
    display: block;
    background: var(--col_ibg);
    translate: -30% -80%;
    padding: 5px;
    color: var(--col_fg);
    border-radius: 10px;
    box-shadow: 0 0px 12px 1px var(--col_fg);
}

.container {
    display: grid;
    grid-template-columns: 1fr 4fr;
    height: 100%;
    background: var(--col_bg);
    justify-content: start;
    align-items: start;
    justify-items: stretch;
}

.sidebar {
    position: sticky;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: 100%;
    padding: 10px;
}

.hamburger {
    display: none;
    position: absolute;
    cursor: pointer;
    font-size: 2.5rem;
    top: 15px;
    left: 20px;
    text-align: center;
    z-index: 1;
}




.sidebar>div {
    padding: 4px 28px 4px 18px;
}

/*
.sidebar>div>p{
    margin: 0.5rem;
}
*/

hr {
    border: 1px solid var(--col_ibg);
}

.hori_line {

    margin: 0px 15px 0px 0px;
}

.small_pix {
    width: 250px;
    max-width: 100%;
    height: 200px;
}

.small_pix .sidebar_pix {
    display: flex;
    font-style: italic;
    font-size: 1.5em;
    word-wrap: break-word;
    max-width: 100%;
    max-height: 100%;
    background-image: url(/static/img/low_side_pp.jpeg);
    background-repeat: round;
    border-radius: 10%;
}

.name_alias_box {
    display: flex;
    font-size: 1.5em;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    flex-direction: row;
}

.sb_topic {
    background: calc(var(--col_bg)-10);
    transition: all ease-in 0.3s;
    max-width: 100%;
    padding: 0px 1.5%;
    word-wrap: break-word;
}

.sb_topic:hover {
    cursor: pointer;
    margin: 0px var(--g_rel) 0px 0px;
    background: var(--col_ibg);
}

.content-holder {
    display: block;
    grid-template-rows: 1fr 9fr;
    /* width: 100%; */
    min-width: 100%;

}

.content-title {
    display: flex;
    height: clamp(50px, 100px, 10vh);
    border: var(--col_ibg) solid 1px;
    align-content: center;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
}

.content {
    display: grid;
    grid-template-columns: auto auto auto;
    flex-direction: row;
    padding: 1vh;
    border: var(--col_ibg) solid 1px;
    min-height: calc(100vh - 13vh);
    flex-wrap: wrap;
    grid-gap: 1vh;
    justify-content: space-between;
    /* overflow: scroll; */
}

* ::-webkit-scrollbar {
    width: 0.5svw;
    background-color: var(--col_bg);
}

* ::-webkit-scrollbar-thumb:hover {
    width: 0.5svw;
    background-color: var(--col_b);
}

/*
  Git Style(Start)
*/

.git_repo {
    display: flex;
    padding: 5px;
    max-width: 100%;
    min-height: 195px;
    min-width: 200px;
    word-wrap: break-word;
    border: solid 1px var(--col_ibg);
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
}

.git_repo>*>*>.title {
    font-size: 1.3rem;
    padding: 10px 0px 0px 5px;
    text-transform: uppercase;
}

.git_repo>*>*>.title>a {
    color: var(--col_git_a);
}

.repo_topics:empty {
    display: none;
    background: var(--col_db);
}

.git_repo>*>.repo_topics {
    color: var(--col_git_topics_fg);
    margin-top: 12px;
    padding: 10px 0px 11px 10px;
    background: var(--col_git_topics_bg);
}


.git_repo>*>*>.note {
    font-size: clamp(0.85rem, 1rem, 1.5rem);
    font-family: monospace;
    padding: 0px 0px 0px 7px;
    display: flex;
    justify-content: flex-start;
    align-content: space-around;
    flex-direction: row;
    flex-wrap: wrap;
}

.git_repo>.middle_part {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.repo_description {
    flex: 1;
    padding: 5px 0px 5px 5px;
    max-width: 100%;
}

.git_repo>*>*>.subtitle {
    height: calc(2rem + 10px);
    padding: 5px 0px 5px 5px;
    flex-wrap: wrap;
    color: var(--col_git_subtitle_fg);
}

.repo_misc>.misc_content {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-content: center;
    flex-wrap: wrap;
    align-items: stretch;
}

.repo_misc>div {
    padding-left: 10px;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: stretch;
    /* align-content: stretch; */
}

.repo_description {
    max-width: 100%;
}

.repo_misc>div>* {
    margin-left: 5px;
    font-family: sans-serif;
}

.repo_misc>*>div>a {
    text-decoration: none;
    font-family: sans-serif;
}

/*
  Git Style(End)
*/

/*
    Digital FootPrint(Start)
*/

.socials {
    display: flex !important;
}

#social-links {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: space-around;
    justify-content: flex-start;
}

div#link {
    display: flow;
    max-width: 100%;
    margin: 14px;
    padding: 12px;
    font-size: clamp(1rem, 1.5rem, 2.5rem);
}

div#link i {
    padding: 0px 23px;
}

div#link a {
    text-decoration: none;
    padding: 0px 23px;
    transition: ease-in-out 100ms;
}

div#link a:-webkit-any-link:focus-visible,
div#link a:hover,
div#link a:-webkit-any-link:active {
    color: var(--col_df_a);
    outline-offset: 1px;
    box-shadow: 0 0 20px 0px var(--col_df_boxshadow);
    ;
    padding: 10px 20px 9px 3px;
    border-radius: 15px;
}

/*
    Digital FootPrint(End)
*/


/*
    Profile(Start)
*/


.profile {
    flex: 1;
    display: grid;
    gap: 10px;
    max-width: 100%;
    grid-auto-rows: clamp(1.5rem, 3rem, 4rem) auto 2rem;
}

.profile section {
    box-shadow: 1px 1px 4px var(--col_profile_boxshadow1), inset -3px -3px 1px 0px var(--col_profile_boxshadow2);
    grid-row: span 3;
    display: grid;
    grid-template-rows: subgrid;
    border: solid var(--col_ibg) 1px;
    border-radius: 10px;
    width: 100%;
}

.profile .data {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
}

.profile .title {
    font-weight: bold;
    font-size: 1.1rem;
}


.profile .sechead {
    display: flex;
    grid-row: 1;
    height: clamp(1rem, 4rem, 3rem);
    font-size: clamp(1rem, 1.6rem, 2rem);
    align-items: center;
    justify-content: space-around;
}

.profile .secbody {
    padding-left: clamp(0.5rem, 1rem, 10%);
    display: grid;
    grid-template-columns: max(9rem, 30%) max(1rem, calc(60.6% - 10px));
}

.profile .row {
    padding: 0px 10px;
    margin: 2px 0px;
    grid-column: 1/3;
    height: clamp(2rem, 100%, 200%);
    display: grid;
    /* align-content: space-between; */
    grid-template-columns: subgrid;
    align-items: center;
}

a {
    color: var(--col_universal_a);
}

.profile .row:hover {
    background: var(--col_prfoile_row_hover);
}

.profile .row .data text {
    padding: 1px 3px;
    margin: 9px 2px;
    border-radius: 3px;
    background: var(--col_prfoile_row_data);
}

.profile .row .data text:hover {
    cursor: default;
}

.profile .row .data span {
    background: var(--col_prfoile_row_data_span);
    padding: 1px 6px;
    text-align: center;
    border-radius: 5px;
}

.profile .row .data span:hover {
    background: var(--col_prfoile_row_data_span_hover);
    cursor: copy;
}

.profile .foot {
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    margin: 10px;
}

.profile .foot small {
    color: var(--col_prfoile_foot_small);
}

.profile .ed {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: wrap;
}

.profile .ed_title {
    display: flex;
    font-weight: bold;
    color: var(--col_prfoile_ed_title);
    flex-direction: column;
}

.profile .ed_title small {
    margin: 5px 20px;
    font-style: italic;
    color: var(--col_prfoile_ed_title_small);
}

.profile .ed_desc {
    display: flex;
    font-weight: bold;
    color: var(--col_prfoile_ed_title);
    flex-direction: column;
}

.profile .ed_desc p {
    margin: 0px;
    padding: 10px;
    font-size: small;
    color: var(--col_prfoile_ed_desc_p);
}


/*
    Profile(End)
*/


/*
    Certification(Start)
*/


.certificates {
    overflow: hidden;
    display: grid;
    grid-template-columns: 10% 80% 10%;
    grid-template-rows: 100%;
}

.gallery {
    align-content: center !important;
    grid-template-columns: auto !important;
}

.img_block {
    grid-row: 1;
    grid-column: span 3;
    display: grid;
    grid-template-columns: subgrid;
    align-items: center;
}

.img_block img:active {
    top: 0;
    left: 0;
    position: absolute;
    width: 100svw;
    height: 100svh;
}

.img_block:target {
    grid-column: 1/span 3;

}

.left::after,
.right::before {
    display: none;
}

.img_block:hover .left::after,
.img_block:hover .right::before  {
    opacity: 1;
    display:inline;
}

.left::after {
    grid-column: 1;
    content: "<";
    font-size: 4rem;
    color: var(--col_galler_arrow);
    background: var(--col_df_boxshadow);
    padding: 5px 10px;
    border-radius: 30px 10px 10px 30px;
}

.right::before {
    grid-column: 3;
    content: ">";
    font-size: 4rem;
    color: var(--col_galler_arrow);
    background: var(--col_df_boxshadow);
    padding: 5px 10px;
    border-radius: 10px 30px 30px 10px;
}

.left,
.right,
.certificates img {
    grid-row: 1/-1;
}

.left {
    grid-column: 1;
}

.right {
    grid-column: 3;
}

.certificates img {
    grid-column: 1/-1;
    max-width: 100%;
    min-height: 100%;
}
/*
    Certification(End)
*/




/* Media Queries */

@media(max-width:950px) {
    .content {
        grid-template-columns: auto auto;
    }
}

@media(max-width:450px) {
    .content {
        grid-template-columns: auto;
    }

    .profile tbody {
        display: grid;
        grid-template-columns: 1fr;
    }
}

@media(max-width:750px) {

    .left,
    .right {
        opacity: 0.4;
        display: block;
    }

    .content {
        display: grid;
        max-width: var(--cont-wmax);
        align-content: space-between;
        justify-content: start;
        align-items: stretch;
        justify-items: stretch;
    }

    .content-title {
        max-width: var(--cont-wmax);
    }

    .container {
        max-width: var(--cont-wmax);
        display: block;
    }

    .hamburger {
        display: block;
    }

    .sidebar {
        display: none;
        position: fixed;
        background: var(--col_sb_media_q);
        box-shadow: 1px 1px 20px 2px var(--col_sb_mq_bs);
        max-width: 50%;
        min-width: 250px;
        height: 100svh;
    }

    .small_pix .sidebar_pix {
        max-width: 400px;
        min-width: 200px;
    }
}