@font-face {
    font-family: "Linux Libertine G";
    src: url("fonts/LinLibertine_Rah.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Linux Biolinum G";
    src: url("fonts/LinBiolinum_Rah.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Liberation Sans";
    src: url("fonts/LiberationSans-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Liberation Sans";
    src: url("fonts/LiberationSans-Italic.ttf") format("truetype");
    font-weight: 400;
    font-style: italic;
}


:root {
    --sidebar-primary: #191C1D;
    --sidebar-dark: #101415;
    --sidebar-gradspot: #222627;
    --main-head: #191C1D;
    --main-body: #151819;
    --contacts-bg: #141617;
    --outside-bg: #141617;
    --button-bg: #141617;
    --megastar: #111314;
    --divider: #131516;
    --cyan: #0098c8;
    --purple: #5300ff;
    --text: #ececec;
    --text-highlight: #ececec;
    --text-headers: #bbb;
    --muted: #c7c7c7;
    --dim: #9c9c9c;
    --contacts-col: #f5f5f5;
    --theme-invert: 0;
    --social-button-divider: rgba(255, 255, 255, 0.14);
    --links-border: rgba(255, 255, 255, 0.45);
    --line: rgba(255, 255, 255, 0.43);
    --line-hover: rgba(255, 255, 255, 0.3);
    --row: rgba(255, 255, 255, 0.022);
    --frame: min(100vw, 96rem);
    --sidebar-width: clamp(17rem, 24vw, 25rem);
    --row-hover: rgba(255, 255, 255, 0.035);

    color: var(--text);
    background: var(--outside-bg);
    font-family: "Liberation Sans", Arial, sans-serif;
    font-size: clamp(12px, 1vw, 15px);
}

#day-mode:target ~ *,
#day-mode:target {

    --sidebar-primary: #c1c5c7;
    --sidebar-dark: #efefef;
    --sidebar-gradspot: #ffffff;
    --main-body: #ffffff;
    --main-head: #fafafa;
    --text: #0a0a0a;
    --text-headers: #0d0e0e;
    --text-highlight: #000000;
    --divider: #24aeff;
    --muted: #252525;
    --dim: #212121;
    --contacts-bg: #f8f8f8;
    --outside-bg: #60686b;
    --button-bg: #ffffff;
    --contacts-col: #1e1e1e;
    --theme-invert: 1;
    --social-button-divider: rgba(0, 0, 0, 0.26);
    --megastar: rgba(17, 19, 20, 0.16);
    --line: rgba(0, 0, 0, 0.43);
    --line-hover: rgba(0, 0, 0, 0.3);
    --row: rgba(0, 0, 0, 0.03);
    --row-hover: rgba(255, 255, 255, 0.44);
    --links-border: rgba(255, 255, 255, 0.39);
}
.sidebarLogo-light { display: none;}
.sidebarLogo-dark { display: block;}

#day-mode:target ~ * .sidebarLogo-light { display: block; }
#day-mode:target ~ * .sidebarLogo-dark { display: none; }

.setLightModeButton { display: block !important;}
.setDarkModeButton { display: none !important;}

#day-mode:target ~ * .setLightModeButton { display: none !important;}
#day-mode:target ~ * .setDarkModeButton { display: block !important; }
#day-mode:target ~ * .tags { background-color: #ffffff; }

.darkSocial { display: grid !important;}
.lightSocial { display: none !important;

}

#day-mode:target ~ * .darkSocial { display: none !important; }
#day-mode:target ~ * .lightSocial { display: grid !important; }

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body {
    min-height: 100vh;
    margin: 0;
    background: var(--outside-bg);
}

body::before,
body::after {
    content: "";
    position: fixed;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(255, 255, 255, 0.31);
}

body::before {
    left: calc((100vw - var(--frame)) / 2);
}

body::after {
    right: calc((100vw - var(--frame)) / 2);
}

.agentNotice{
    display: none;
}

.layoutContainer {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    width: var(--frame);
    min-height: 100vh;
    margin-inline: auto;
    background: var(--main-body);
}

.sidebar {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    padding: clamp(0.55rem, 1.8vh, 1.2rem) clamp(0.65rem, 1vw, 1rem) 0;
    background: radial-gradient(circle at 50% 10%, var(--sidebar-gradspot) 0, var(--sidebar-primary) 29rem, var(--sidebar-dark) 100%);
    border-right: 2px solid var(--cyan);
}

.identity {
    width: 100%;
}

.sidebarLogo {
    width: min(86%, 16.8rem);
    margin: 0 auto clamp(0.55rem, 2vh, 1.2rem);
}

.tags {
    position: relative;
    width: 94%;
    margin-inline: auto;
    padding: clamp(0.28rem, 1vh, 0.55rem) 0.5rem clamp(0.35rem, 1.05vh, 0.62rem);
    color: var(--text);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    box-shadow: inset 2rem 1px 0 -1.95rem var(--cyan), inset -2rem 1px 0 -1.95rem var(--cyan), inset 2rem -1px 0 -1.95rem var(--cyan), inset -2rem -1px 0 -1.95rem var(--cyan);
    text-align: center;
}

.tags p {
    margin: 0;
    font-family: "Linux Libertine G", Georgia, serif;
    font-size: clamp(1.08rem, 1.42vw, 1.45rem);
    line-height: 1.12;
}

.about {
    position: relative;
    width: 94%;
    margin-top: clamp(0.55rem, 1.5vh, 0.95rem);
    padding: 0.38rem clamp(0.72rem, 1.1vw, 1rem) 0.48rem;
    color: var(--muted);
    font-family: "Linux Biolinum G", "Liberation Sans", sans-serif;
}

.about::before,
.about::after {
    content: "";
    position: absolute;
    width: 0.7rem;
    height: 0.7rem;
    border-color: rgba(255, 255, 255, 0.47);
}

.about::before {
    top: 0;
    left: 0;
    border-top: 1px solid;
    border-left: 1px solid;
}

.about::after {
    right: 0;
    bottom: 0;
    border-right: 1px solid;
    border-bottom: 1px solid;
}

.about h2 {
    margin: 0 0 clamp(0.5rem, 1.25vh, 0.85rem);
    font-size: clamp(1rem, 1.25vw, 1.25rem);
    letter-spacing: 0.03em;
}

.about p {
    margin: 0 0 clamp(0.45rem, 1.1vh, 0.72rem);
    font-size: clamp(0.96rem, 1.05vw, 1.18rem);
    line-height: 1.18;
}

.about p:last-child {
    margin-bottom: 0;
    color: var(--text-highlight);
}

.sidebarSeparator {
    width: min(60%, 8.3rem);
    margin: clamp(4rem, 2.1vh, 8rem);
    opacity: 0.34;
}

.contactsRegion {
    width: 100%;
    flex: none;
    top: 0;
    position: sticky;
    padding: 1.2rem 0.7rem;
    margin-bottom: 2rem;
    background: var(--contacts-bg);
    border: 1px solid rgb(57, 33, 107);
}

.hiringInfo {
    text-align: center;
    font-family: "Linux Libertine G", Georgia, serif;
}

.hiringInfo p {
    margin: 0;
    color: var(--muted);
    font-size: clamp(0.95rem, 1.1vw, 1.12rem);
    line-height: 1.04;
}

.hiringInfo p:first-child {
    color: var(--text);
    font-weight: 700;
}

.hiringInfo::after {
    content: "";
    display: block;
    width: 1.45rem;
    height: 1px;
    margin: 0.38rem auto 0.25rem;
    background: var(--line);
}

.contactInfo {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: "Linux Libertine G", Georgia, serif;
}

.contactInfo > p {
    margin: 0;
    color: var(--text);
    font-size: clamp(0.88rem, 0.95vw, 1rem);
    line-height: 1;
    text-decoration: underline;
}

.emailIcon {
    width: clamp(2.8rem, 4.4vw, 4.2rem);
    margin-top: 0.75rem;
    padding-bottom: 0.25rem;
    filter: invert(var(--theme-invert));
}

.discordIcon {
    width: clamp(3rem, 4.3vw, 4.2rem);
    filter: invert(var(--theme-invert));
    padding-bottom: 0.25rem;
    margin-top: 0.72rem;
}

.contactBox {
    position: relative;
    width: min(94%, 15.6rem);
    height: clamp(1.25rem, 2vw, 1.55rem);
    margin-top: 0.36rem;
    filter: invert(var(--theme-invert));
    overflow: hidden;
}

.mainContent {
    position: relative;
    min-width: 0;
    min-height: 100vh;
   /* background: linear-gradient(var(--main-head) 0, var(--main-head) clamp(4.6rem, 8vh, 5.55rem), var(--main-body) clamp(4.6rem, 8vh, 5.55rem));*/
    overflow: hidden;
}

.mainContent::before {
    content: "";
    position: absolute;
    top: 5.3rem;
    bottom: 0;
    right: 0;
    width: 100%;
    background: var(--megastar);
    mask-image: url("assets/backgroundMegastar.png");
    mask-repeat: no-repeat;
    mask-position: right top;
    mask-size: auto calc((100vh - 5.3rem) * 1.8);
    opacity: 0.62;
    pointer-events: none;
}

.topBar {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: end;
    justify-content: space-between;
    min-height: clamp(4.6rem, 4vh, 6rem);
    padding-left: clamp(0.55rem, 1vw, 0.95rem);
    border-bottom: 1px solid var(--cyan);
}

.topBar::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: clamp(4.4rem, 6vw, 5.2rem);
    border-right: 1px solid var(--cyan);
    border-image: linear-gradient(to top, var(--cyan), transparent 66%) 1 stretch;
}

.topBar p {
    order: -1;
    margin: 0 0 0.52rem;
    color: #666;
    font-family: "Linux Libertine G", Georgia, serif;
    font-size: clamp(0.96rem, 1.12vw, 1.18rem);
}

.topLinks {
    display: flex;
    align-items: stretch;
    margin: 0 clamp(0.55rem, 0.9vw, 0.9rem) 0.65rem 1rem;
    border: 1px solid var(--links-border);
    background: #141414;
}

.rightTopBar{
    display: flex;
}

.iconButton > img{
    display: grid;
    place-items: center;
    width: 3.2rem;
    padding: 0.4rem;
    height: auto;
    color: var(--text);
    border-right: 1px solid var(--social-button-divider);
    text-decoration: none;
}
.iconButton.socialButton.sectionLink{
    border-right: 0 solid var(--social-button-divider);
}

.socialButton {
    position: relative;
    background: var(--main-body);

}

.modeButton {
    background: var(--button-bg);
}

article {
    position: relative;
    z-index: 1;
    width: min(100%, 74rem);
    padding: clamp(0.9rem, 2.35vh, 1.35rem) clamp(1.2rem, 2.15vw, 1.8rem) clamp(1.4rem, 3vh, 2.2rem);
}

article h1,
.projectGroup h2{
    font-family: "Linux Libertine G", Georgia, serif;
}

article h1 {
    margin: 0 0 clamp(0.55rem, 1.35vh, 0.85rem);
    padding-bottom: 0.28rem;
    border-bottom: 1px solid var(--line);
    color: var(--text);
    font-size: clamp(1.42rem, 1.72vw, 1.86rem);
    line-height: 1;
}

.projectGroup {
    margin-top: clamp(0.76rem, 2.05vh, 1.35rem);
}

.projectGroup h2 {
    display: inline-block;
    margin: 1rem 0 0.5rem 1rem;
    padding-bottom: 0.24rem;
    border-bottom: 1px solid var(--line);
    color: var(--text-headers);
    font-size: clamp(1.12rem, 1.45vw, 1.72rem);
    font-weight: 400;
    line-height: 1;
}

/* Project List Item CSS */

details.projList {
    margin: 0 0 clamp(0.18rem, 0.45vh, 0.35rem);
}


details.projList[open] > summary{
    background: rgba(255, 255, 255, 0.025);
}

details.projList > summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    background: var(--row);
    align-items: center;
    gap: 0.5rem;
    min-height: clamp(1.85rem, 3.55vh, 3rem);
    padding: 0.25rem 1rem;
    list-style: none;
    cursor: pointer;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    border-color: transparent;
    transition-duration: 0.05s;
}

details.projList > summary:hover {
    background: var(--row-hover);
    border-color: var(--line-hover);
}


details.projList span{
    display: flex;
    align-items: baseline;
    min-width: 0;
    gap: 0.42rem;

}
details.projList span:first-of-type
{
    flex: 0 1 auto;
    min-width: max-content;
    color: var(--text);
    font-size: xx-large;
    line-height: 1;
    font-family: "Linux Libertine G", Georgia, serif;
}

details.projList span:first-of-type::after
{
    content: " \25E6";
}
details.projList span:first-of-type::before{
    content: "";
    display: inline-block;
    height: clamp(1rem, 1.4vw, 1.35rem);
    background-image: url("assets/marker.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: clamp(1rem, 1.4vw, 1.35rem);
    transform-origin: 50% 50%;
}

details.projList[open] span:first-of-type::before {
    transform: rotate(90deg);
    transform-origin: 40% 50%;
}


details.projList span:nth-of-type(2)
{
    min-width: 6rem;
    overflow-wrap: anywhere;
    color: var(--dim);
    font-size: large;
    font-style: italic;
    line-height: 1.1;
    transform: translateY(2px);
}

details.projList span:nth-of-type(3)
{
    justify-self: end;
    max-width: 19rem;
    color: var(--text);
    font-family: "Linux Libertine G", Georgia, serif;
    font-size: clamp(1.34rem, 1.68vw, 2rem);
    line-height: 1;
    text-align: right;
    white-space: nowrap;
}

details.projList > :not(summary) {
    padding: 0.8rem 1.2rem 1rem 3.8rem;
    color: var(--muted);
}

/* PROJECT SECTIONS */

.projectSection{
    background: rgba(255, 255,255, 0.05);
}

.sectionLink {

    border: 1px solid var(--line-hover);
    float: right;
    margin: 0.25rem 0 0.75rem 1rem;
}

.projectScreenshot{
    width: 95%;
    height: auto;
    display: block;
    margin: 1rem auto;
}

.projectVideo{
    width: 95%;
    height: auto;
    display: block;
    margin: 1rem auto;
}

.projectScreenshotSmall{
    width: 70%;
    height: auto;
    display: block;
    margin: 1rem auto;
}

details.projList summary:after{
    min-height: 8rem;
    min-width: 100%;
    content: "";
    background-size: cover;
    grid-column: 1 / -1;
}

.projImageSC summary:after{
    background-image: url("screenshot/songcanvas.png");
    background-position: 50% 38%;
}
.projImageBS summary:after{
    background-image: url("screenshot/bespokeGroup.png");
}
.projImageRWL summary:after{
    background-image: url("screenshot/valuetypes.png");
}
.projImageJS summary:after{
    background-image: url("screenshot/jvmbanner.png");
    background-position: 50% 20%;
}
.projImageNET summary:after{
    background-image: url("screenshot/theprocess.png");
    background-position: 50% 50%;
}
.projImageJAV summary:after{
    background-image: url("screenshot/later.png");
    background-position: 50% 35%;
}
.projImageDLL summary:after{
    background-image: url("screenshot/intercept.png");
    background-position: 50% 75%;
}
.projImageTCP summary:after{
    background-image: url("screenshot/tcpbanner.png");
    background-position: 50% 40%;
}
.projImageBATCH summary:after{
    background-image: url("screenshot/parser.png");
    background-position: 50% 55%;
}
.projImageAKO summary:after{
    background-image: url("screenshot/arkodex.png");
}
.projImageNOD summary:after{
    background-image: url("screenshot/1.png");
    background-position: 50% 80%;
}

.mobileOnly{
    display: none;
}

.legaleeze{
    margin-left: auto;
    margin-right: auto;
    text-align: center;

    color: var(--dim);
    font-size: small;
    font-style: italic;
}
.legaleeze a {
    color: cyan;
}

/* MOBILE */

@media (max-width: 56rem) {
    /* ELEMENT VISIBILITY */
    body::before,
    body::after {
        display: none;
    }
    .mobileOnly{
        display: revert;
    }
    .desktopOnly{
        display: none;
    }

    /* MOBILE ONLY DEC */

    .topBar.mobileOnly{
        display: flex;
    }

    .layoutContainer {
        display: block;
        width: 100%;
    }

    .sidebar {
        min-height: auto;
        border-right: 0;
        border-bottom: 2px solid var(--cyan);
    }

    .sidebarLogo {
        width: min(70vw, 22rem);
    }

    .about{
        max-width: 25rem;
    }
    .about * ~ p{
        font-size: large;
    }
    .tags p{
        font-size: large;
    }
    .tags {
        max-width: 60vw;
    }

    .sidebarSeparator {
        margin-block: 1.2rem;
    }

    .contactsRegion {
        max-width: 24rem;
        margin-top: auto;
    }
    .contactsRegion p{
        font-size: medium;
    }
    .contactBox{
        width: 100%;
        height: 2rem;
    }

    .topBar::before {
        display: none;
    }


    article {
        padding-inline: 0.5rem;
    }
    article h1 {
        font-size: large;
    }
    .projList .projectSection {
        padding: 1rem;
    }
    .projectSection p{
        font-size: medium;
        padding-right: 2rem;
        padding-left: 2rem;
    }
    .projectScreenshot{
        margin: auto;
        width: 100%;
    }
    .projectGroup h2 {
        font-size: x-large;
    }

    details.projList > summary {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.15rem;
    }
    details.projList > summary {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    details.projList span:first-of-type{
        max-width: 70%;
    }
    details.projList span:first-of-type,
    details.projList span:nth-of-type(3) {
        display: inline-flex;
        min-width: auto;
        align-items: baseline;
    }
    details.projList span:first-of-type::after {
        content: "";
        margin: 0 0.4rem;
    }

    details.projList span:nth-of-type(3) {
        margin-left: auto;
        position: absolute;

        right: 1rem;

        text-align: right;
        font-size: x-large;
    }

    details.projList span:nth-of-type(2) {
        display: block;
        min-width: auto;
        transform: none;
        font-style: italic;
        color: var(--dim);
        font-size: medium;
    }


}