:root {
    --color0: #A3ADB8;
    --color1: #FF3347;
    --color2: #2688EB;
    --color3: #4BB34B;
    --color4: #FFA000;
    --color5: #F060C0;

    --page_background: #f0f0f0;
    --page_foreground: #000;
    --on_page_background: #fff;
    --section_separator_color: #000;
}

@media (prefers-color-scheme: dark) {
    :root {
        --page_background: #161616;
        --page_foreground: #fff;
        --on_page_background: #222;
        --section_separator_color: #fff;
    }
}

:root {
    --animation_slowdown_multiplier: 1;
    --content_max_width: 960px;
    --bars_size: 4px;
    --big_spacing: 32px;
    --content_item_spacing: 16px;
    --person_picture_size: 232px;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --animation_slowdown_multiplier: 0;
    }
}

@keyframes contentOpenOnce {
    from {
        opacity: 0;
    }
    50% {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes contentOpen {
    from {
        height: 0px;
        opacity: 0;
        transform: translateY(16px);
    }
    50% {
        height: 0px;
        opacity: 0;
        transform: translateY(16px);
    }
    51% {
        height: unset;
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        height: unset;
        opacity: 1;
        transform: translateY(0px);
    }
}

@keyframes contentClose {
    from {
        height: unset;
        opacity: 1;
        overflow: unset;
    }
    50% {
        height: unset;
        opacity: 0;
        overflow: unset;
    }
    51% {
        height: 0px;
        opacity: 0;
        overflow: hidden;
    }
    to {
        height: 0px;
        opacity: 0;
    }
}

/* @font-face {
    font-family: Inter;
    src: url(https://elor.top/res/fonts/inter.woff2) format("woff2");
    font-display: swap
} */

@font-face {
    font-family: "NT Somic";
    src: url(https://elor.top/res/fonts/ntsomic.woff2) format("woff2");
    font-weight: 100 900;
    font-display: swap
}

/* Font start */

body {
    font-family: system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-optical-sizing: auto;
    font-style: normal;
}

h1, h2, h3, h4, h5, h6, header, #mainMenu, p.asParagraph {
    font-family: "NT Somic", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
}

/* Font end */

body {
    margin: 0;
    overflow-x: hidden;
    width: 100vw;
    height: 100vh;
    background: var(--page_background);
    color: var(--page_foreground);
}

body > main {
    width: 100%;
    max-width: var(--content_max_width);
    margin: 0 auto;
    padding: var(--big_spacing);
    display: flex;
    flex-direction: column;
    font-size: 15px;
    line-height: 20px;
    box-sizing: border-box;
}

#mainMenu {
    background: black;
    color: white;
    display: flex;
    font-size: 16px;
    line-height: 16px;
    font-weight: 600;
    user-select: none;
    position: sticky;
    top: var(--big_spacing);
    z-index: 1;
}

#mainMenu > decor {
    content: '';
    position: absolute;
    left: 100%;
    height: 100%;
    width: calc(calc(100vw - 100%) / 2);
    background: black;
}

#mainMenu > input[type="radio"] {
   display: none;
}

#mainMenu > label {
    display: block;
    position: relative;
    cursor: pointer;
    padding: 12px 12px calc(12px + var(--bars_size)) 12px;
    transition: flex-grow calc(200ms * var(--animation_slowdown_multiplier)) ease-out;
    overflow: hidden;
}

#mainMenu > label > span {
    z-index: 1;
    position: relative;
}

#mainMenu > input[type="radio"]:checked + label {
    flex-grow: 1;
}

#mainMenu > label:before, #mainMenu > label:after, #mainMenu > decor:after {
    content: '';
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: var(--bars_size);
}

#mainMenu > label:before {
    left: 0px;
    transition: height calc(200ms * var(--animation_slowdown_multiplier)) ease-out;
    transition-delay: calc(100ms * var(--animation_slowdown_multiplier));
}

#mainMenu > decor:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 0%;
    bottom: 0px;
    opacity: 1;
    background: var(--color0);
}

#mainMenu > decor:active:before {
    height: 100%;
    opacity: 0;
    transition: height calc(200ms * var(--animation_slowdown_multiplier)) ease-out, opacity calc(400ms * var(--animation_slowdown_multiplier)) ease-out;
}

#mainMenu > decor:after {
    background: var(--color0);
}

#mainMenu > label:after {
    left: 0;
    width: 100%;
    transform-origin: left;
    transform: scaleX(0);
    background: #fff;
    transition: transform calc(300ms * var(--animation_slowdown_multiplier)) ease-out;
}

#mainMenu > input[type="radio"]:checked + label:before {
    height: 100%;
}

#mainMenu > input[type="radio"]:checked + label:after {
    transform-origin: right;
    transform: scaleX(1);
}

#mainMenu > label[for="about"]:before {
    background: var(--color1);
}

#mainMenu > label[for="projects"]:before {
    background: var(--color2);
}

#mainMenu > label[for="contacts"]:before {
    background: var(--color3);
}

#mainMenu > label[for="moret"]:before {
    background: var(--color4);
}

main {
    animation: contentOpenOnce calc(200ms * var(--animation_slowdown_multiplier));
}

main > content {
    height: 0px;
    overflow: hidden;
    font-size: 16px;
    line-height: 1.5;
    word-wrap: break-word;
    animation: contentClose calc(200ms * var(--animation_slowdown_multiplier));
    position: relative;
}

/* workaround for lazy-loading issue for all tabs except "about" */
/* because "about" is main tab and images here are loaded anyway */

main content:not(#aboutTab) img {
    display: none;
}

main:has(#about:checked) #aboutTab, main:has(#projects:checked) #projectsTab, main:has(#contacts:checked) #contactsTab, main:has(#moret:checked) #moreTab {
    height: unset;
    overflow: unset;
    animation: contentOpen calc(200ms * var(--animation_slowdown_multiplier));
}

main:has(#projects:checked) #projectsTab img, main:has(#contacts:checked) #contactsTab img, main:has(#moret:checked) #moreTab img {
    display: unset;
}

#aboutTab {
    --accent: var(--color1);
}

#projectsTab {
    --accent: var(--color2);
}

#contactsTab {
    --accent: var(--color3);
}

#moreTab {
    --accent: var(--color4);
}

content a {
    color: var(--accent);
}

content p.asParagraph {
    font-weight: 500;
    font-size: 0.85em;
}

content h1, content h2, content h3, content h4, content h5, content h6 {
    margin-top: 24px;
    margin-bottom: 16px;
    font-weight: 600;
    line-height: 1.25;
}

content p, content li {
    line-height: 1.5em;
}

content h1 {
    font-size: 2em;
    padding-bottom: 0.3em;
    border-bottom: 1px solid var(--accent);
}

content h2 {
    font-size: 1.5em;
    padding-bottom: 0.3em;
    border-bottom: 1px solid var(--accent);
}

content h3 {
    font-size: 1.25em;
}

content h4 {
    font-size: 1em;
}

content h5 {
    font-size: 0.875em
}

content h6 {
    font-size: 0.85em
}

content ol, content ul {
    padding-left: 19px;
}

content ul ul, content ul ol, content ol ol, content ol ul {
    margin-top: 0;
    margin-bottom: 0
}

content li {
    word-wrap: break-all
}

content li>p {
    margin-top: 16px
}

content li+li {
    margin-top: .25em
}

content p, content ul, content ol, content .card, content p.asParagraph {
    margin-top: 0;
    margin-bottom: 16px
}

.adaptiveGrid {
    display: flex;
    flex-wrap: wrap;
}

.adaptiveGrid > * {
    flex-basis: calc(50% - calc(var(--content_item_spacing) / 2));
}

.adaptiveGrid > *:nth-child(2n-1) {
    margin-right: calc(var(--content_item_spacing) / 2);
}

.adaptiveGrid > *:nth-child(2n-2) {
    margin-left: calc(var(--content_item_spacing) / 2);
}

a.card, a.card content {
    text-decoration: none;
    color: var(--page_foreground);
}

.card {
    display: flex;
    border-top: 2px solid var(--accent);
}

.card > aside:first-child, .card > picture:first-child {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    /* background: var(--on_page_background); */
}

.card > aside:first-child > svg {
    width: 48px;
    height: 48px;
    color: var(--accent);
}

.card > section.cardContent {
    flex: 1;
    width: 0;
    display: flex; /* required to fix padding issue in .cardContent > content */
    flex-direction: column;
    background: var(--on_page_background);
}

.card > section.cardContent > header, .card > section.cardContent > content {
    padding: 0px 12px;
}

.card > section.cardContent > header {
    padding-top: 4px;
    padding-bottom: 6px;
    font-weight: 600;
    background: var(--accent);
    color: #fff;
    position: relative;
}

a.card:hover > section.cardContent > header {
    text-decoration: underline;
}

.card > section.cardContent > content {
    font-size: 0.875em;
    padding-top: 8px;
    padding-bottom: 8px;
}

.card > section.cardContent > content > .meta {
    font-size: 0.85em;
    opacity: 0.6;
    margin-bottom: 2px;
}

a.card > section.cardContent > header:after {
    content: '';
    position: absolute;
    right: 10px;
    top: 8px;
    width: 16px;
    height: 16px;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3 0a1 1 0 0 0-1 1 1 1 0 0 0 1 1h9.5859l-12.293 12.293a1 1 0 0 0 0 1.4141 1 1 0 0 0 1.4141 0l12.293-12.293v9.5859a1 1 0 0 0 1 1 1 1 0 0 0 1-1v-12a1 1 0 0 0-0.007812-0.13086 1 1 0 0 0-0.06836-0.25195 1 1 0 0 0-0.2168-0.32422 1 1 0 0 0-0.70703-0.29297h-12z' style='fill:white'/%3E%3C/svg%3E");
}

chips {
    display: block;
}

chips .chip {
    background: var(--accent);
    /* filter: saturate(2) brightness(0.8) contrast(1.7); */
    color: white;
    padding: 2px 6px;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
}

a.chip {
    text-decoration: none;
}

a.chip:hover {
    text-decoration: underline;
}

.chip.less {
    opacity: 0.5;
}

.mainTabCards {
    margin-bottom: -16px;
}

.mainTabCards > .card {
    border-top: 0px;
}

.mainTabCards > .card > aside:first-child {
    width: 36px;
    height: 36px;
    align-items: start;
}

.mainTabCards > .card > aside:first-child > svg {
    width: inherit;
    height: inherit;
}

.mainTabCards > .card > section.cardContent {
    background: transparent;
    margin-left: 12px;
}

.mainTabCards > .card > section.cardContent > header {
    padding: 5px 0px 0px 0px;
    font-family: inherit;
    font-weight: 600;
    background: unset;
    color: unset;
    font-size: 1.125em;
}

.mainTabCards > .card > section.cardContent > content {
    padding: 0px;
}

.mainTabCards > .card chips {
    margin: 6px 0px;
}

#personPictureFrame {
    width: var(--person_picture_size);
    height: var(--person_picture_size);
    margin-top: -2px;
    float: right;
    position: relative;
    background: black;
    border: 2px solid black;
    outline: 2px solid var(--color0);
    margin-right: 2px;
}

#personPictureFrame img {
    width: 100%;
    height: 100%;
    position: absolute;
}

#personPictureFrame:after {
    content: '';
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 160px;
    height: 4px;
    background: linear-gradient(90deg, var(--color5), var(--color5) 20%, var(--color4) 20%, var(--color4) 40%, var(--color3) 40%, var(--color3) 60%, var(--color2) 60%, var(--color2) 80%, var(--color1) 80%, var(--color1));
}

#personPictureFrame > left-handler {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 4px;
    height: 400px;
    background: var(--color1);
}

#moreTab > .adaptiveGrid {
    margin-bottom: 84px;
}

#moreTab section {
    display: flex;
    flex-direction: column;
    margin-top: 24px;
    box-sizing: border-box;
}

#moreTab section > header {
    margin-bottom: 8px;
}

#moreTab section > header > h2 {
    margin: 0px;
    padding-bottom: 9px;
}

#moreTab section > content {
    margin-top: 8px;
}

#moreTab section sup {
    opacity: 0.6;
}

#moreTab section pubDate {
    margin: 0px;
    font-size: 12px;
    opacity: 0.5;
    display: block;
}

#moreTab section summary {
    font-size: 0.875em;
    line-height: 1.375;
}

#moreTab section > content a {
    color: var(--page_foreground);
    font-weight: 600;
}

#moreTab section > content > p:last-child, #moreTab section > content > ul:last-child {
    margin-bottom: 0px;
}

branding {
    position: absolute;
    left: 0px;
    bottom: 0px;
    height: 32px;
    color: var(--color0);
}

branding > svg {
    width: 120px;
    height: 32px;
}

@media (prefers-color-scheme: dark) {
    #contactsTab .card > aside:first-child > svg, .card content a:not(.chip) {
        filter: brightness(1.25);
    }
}

@media (max-width: 768px) {
    :root {
        --big_spacing: 16px;
    }

    .adaptiveGrid > * {
        flex-basis: 100%;
        margin-left: 0px !important;
        margin-right: 0px !important;
    }
}

@media (max-width: 640px) {
    #personPictureFrame {
        float: left;
        margin-left: 2px;
        margin-bottom: 24px;
    }

    #personPictureFrame + * {
        clear: both;
    }

    .mainTabCards > .card {
        padding-right: 0px;
    }
}