@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('assets/fonts/plus-jakarta-sans-regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('assets/fonts/plus-jakarta-sans-italic.woff2') format('woff2');
}
@font-face {
    font-family: 'Mulish';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('assets/fonts/mulish-regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Mulish';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('assets/fonts/mulish-italic.woff2') format('woff2');
}
:root {
    --main-text: #eee;
    --main-bg: #1f1f1f;
    --bg-lighter: #2d2d2d;
    --accent1: #ce9e56;
    --accent2: #3c9dd1;
    --accent3: #7eb593;
    --accent4: #3da09d;
    --accent5: #d4e0bc;
    --discrete: #aaa;
}
body {
    padding: 1rem;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    background-color: #0e0e0e;
    color: var(--main-text);
    display: flex;
    justify-content: center;
    overflow-x: hidden;
}
div.container {
    max-width: 870px;
    background-color: var(--main-bg);
    padding: 1.5rem;
}
section, aside {
    margin: 1.5rem 0;
    position: relative;
}
section::before,
aside::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2rem;
    bottom: 2rem;
    width: 2px;
    background: var(--accent1);
    opacity: 0.4;
}
section.small::before {
    background: var(--accent4);
}
p, li {
    margin: 0.5rem 0;
    line-height: 1.5;
}
blockquote {
    font-style: italic;
    font-size: 1.2rem;
    font-family: 'Mulish', system-ui, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
}
section > p,
section > h1,
section > blockquote,
aside > p {
    margin-left: 2rem;
}
.tag, .close {
    font-weight: normal;
    font-size: 1.3rem;
    font-family: 'Mulish', system-ui, sans-serif;
    color: var(--accent1);
}
.tag.small,
.close.small {
    font-size: 1rem;
    color: var(--accent4);
}
p.small {
    font-size: 0.9rem;
}
.attributes {
    color:  var(--discrete);
}
.discrete { 
    color:  var(--discrete);
}
.attributes > span {
    color: var(--accent2);
}
.tag::before,
.close::before {
    content: "<";
    color: var(--discrete);
}
.close::before {
    content: "</";
}
.tag::after,
.close::after {
    content: ">";
    color: var(--discrete);
}
.close {
    opacity: 0.4;
}
.close span {
    color: var(--accent1);
}
.close.small span {
    color: var(--accent4);
}
.close.title span::after {
    content: "title";
}
.close.me span::after {
    content: "me";
}
.close.languages span::after {
    content: "languages";
}
.close.option span::after {
    content: "option";
}
.close.root_problem span::after {
    content: "root_problem";
}
.close.roccons span::after {
    content: "roccons";
}
.close.yearning_for_the_future span::after {
    content: "yearning_for_the_future";
}
.close.blockquote span::after {
    content: "blockquote";
}
.close.main_projects span::after {
    content: "main_projects";
}
.close.aside span::after {
    content: "aside";
}
.close.the_dream span::after {
    content: "the_dream";
}
.close.wishlist span::after {
    content: "wishlist";
}
.close.about span::after {
    content: "about";
}
ul {
    list-style: square;
}
a {
    color: var(--accent3);
    text-decoration: none;
    border-bottom: 1px solid var(--accent3);
}
em {
    color: var(--accent5);
}
figure,
div.audio,
div.video {
    background: var(--bg-lighter);
    margin: 1rem 0;
    margin-inline: 0;
    margin-left: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.7rem;
    border-radius: 8px;
}
figure img {
    width: 60%;
    max-width: 100%;
    height: auto;
}
div.video video {
    max-width: 100%;
}
figure figcaption,
div.audio p,
div.video p {
    margin-top: 0.3rem;
    margin-bottom: 0;
    font-size: 0.9rem;
    color: var(--accent5);
    font-family: 'Mulish', system-ui, sans-serif;
    text-align: center;
    line-height: 1.4;
}
figure figcaption,
div.audio p:first-of-type,
div.video p:first-of-type {
    margin-top: 0.4rem;
}
@media (max-width: 700px) {
    body {
        padding: 0.7rem;
    }
    div.container {
        padding: 0.7rem;
    }
    section > p,
    section > h1,
    section > blockquote,
    aside > p {
        margin-left: 1rem;
    }
    figure,
    div.audio,
    div.video {
        margin-left: 1rem;
    }
    figure img {
        width: 100%;
    }
}