/* FONTS */
@font-face { font-family: 'Ubuntu Mono'; src: url('/fonts/UM.woff2') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: 'Ubuntu Mono'; src: url('/fonts/UM-I.woff2') format('truetype'); font-weight: normal; font-style: italic; font-display: swap; }
@font-face { font-family: 'Ubuntu Mono'; src: url('/fonts/UM-B.woff2') format('truetype'); font-weight: bold; font-style: normal; font-display: swap; }
@font-face { font-family: 'Ubuntu Mono'; src: url('/fonts/UM-BI.woff2') format('truetype'); font-weight: bold; font-style: italic; font-display: swap; }

/* GLOBAL RESET */
* {
    padding: 0;
    margin: 0;
    font-family: "Ubuntu Mono", monospace;
}

html, body { min-height: 100vh; min-width: 100%; font-size: 18px; padding: 0; margin: 0; }
a, a:visited { color: inherit; text-decoration: none; }
div, header { display: flex; }
button { border: none; outline: none; color: inherit; background-color: inherit; }
h1, h2, h3, span.tag { text-shadow: 0 0 1px currentcolor; }
.field-wrapper h2, .field-wrapper h3 { background-color: transparent; }

/* DARK MODE (DEFAULT) */
body {
    --bg-col: #282828;
    --text-col: #ebdbb2;
    --border-col: #d5c4a1;
    --muted-col: #a89984;
    --x-muted-col: #665c54;
    --green: #b8bb26;
    --yellow: #fabd2f;
    --blue: #83a598;
    --purple: #d3869b;
    --aqua: #8ec07c;
    --orange: #fe8019;
    --red: #fb4934;
    --off-bg-col: #3c3836;
    --glow: drop-shadow(0 0 0.3rem var(--x-muted-col));
    --true-bg: #1d2021;

    background-color: var(--true-bg);
    display: flex;
    flex-direction: column;
}

/* LIGHT MODE OVERRIDES */
body.lightmode {
    --bg-col: #ebdbb2;
    --text-col: #282828;
    --border-col: #3c3836;
    --muted-col: #928374;
    --x-muted-col: #a89984;
    --green: #98971a;
    --yellow: #d79921;
    --blue: #458588;
    --purple: #b16286;
    --aqua: #689d6a;
    --orange: #d65d0e;
    --red: #cc241d;
    --off-bg-col: #d5c4a1;
    --true-bg: #fbf1c7;
}

footer { color: var(--muted-col); margin-top: auto; user-select: none; text-align: center; padding-bottom: 0.5rem; }
footer a { color: var(--aqua)!important; display: inline-block; }
footer a:hover { color: var(--blue)!important; }

/* COLOR SHIFT */
/* Logo and bear */
.color-yellow { color: var(--yellow); }
.color-green { color: var(--green); }
.color-orange { color: var(--orange); }
.fieldset:hover pre span.color-yellow, .on-hover:hover span.color-yellow { color: var(--orange); }
.fieldset:hover pre span.color-green, .on-hover:hover span.color-green { color: var(--yellow); }
.fieldset:hover pre span.color-orange, .on-hover:hover span.color-orange { color: var(--red); }
.fieldset:hover #bear-anim { color: var(--blue); }

/* Dark Mode */
.fieldset:hover pre h1 { background-color: var(--yellow); }
.fieldset:hover pre h2 { color: var(--yellow); }
.fieldset:hover pre h2::before { color: var(--orange); }
.fieldset:hover pre h3 { color: var(--aqua); }
.field-wrapper .fieldset:hover h2 { background-color: var(--off-bg-col); }


/* Light Mode */ 
.fieldset:hover pre h1 { background-color: var(--orange); }
.fieldset:hover pre h2 { color: var(--orange); }
.fieldset:hover pre h2::before { color: var(--red); }



.fieldset:hover pre { text-shadow: 0 0 0 currentcolor; }
.fieldset:hover, .fieldset:hover > h1::before, .fieldset:hover > h1::after { border-color: var(--green); }
.fieldset:hover > h1 { color: var(--yellow); }

/* MAIN BODY & LAYOUT */
.row { flex-direction: row; align-content: stretch; width: 100%; max-width: 100%; }
.col { flex-direction: column; }

.terminal { color: var(--text-col); padding: 1rem; border-radius: 1rem; margin: 5rem auto 3rem; max-width: 60rem; min-width: 60rem; }
.fieldset { border: 3px solid var(--border-col); border-top: none; border-radius: 0 0 0.4rem 0.4rem; padding: 0.5rem; margin: 0.5rem; flex-grow: 1; flex-direction: column; height: calc(100% - 2.2rem); }
.fieldset > h1 { font-size: 0.7rem; letter-spacing: 0.1rem; color: var(--muted-col); margin: -1rem -0.5rem 0; }
.fieldset > h1 > span { float: left; margin: 0 0.7rem; }
.fieldset > h1::before, .fieldset > h1::after { border-top: 3px solid var(--border-col); content: ' '; }
.fieldset > h1::before { float: left; margin: 0.5rem 0.2rem 0 -0.7px; width: 0.75rem; }
.fieldset > h1::after { display: block; height: 1.5rem; left: 2px; margin: 0 1px 0 0; overflow: hidden; position: relative; top: 0.5rem; }

a.second { flex-grow: 1; }
.wrap { white-space: pre-wrap; }
pre { white-space: pre-wrap; }
.lightmode pre { text-shadow: none; }
pre#bear-anim, pre#ascii-logo { text-shadow: 0 0 3px currentcolor; }

.above-bear { margin-bottom: 3rem; }
.main-menu { min-width: 100%; margin: 0; padding: 0; }

/* TOP LEFT / LOGO */
.ascii-logo { user-select: none; color: var(--yellow); letter-spacing: 0.05rem; }
.width--1 .row { gap: 2rem; padding: 1rem 1rem 0 0; width: calc(100% - 1rem); }
.fading-char { transition: opacity 0.5s ease; }
.field-wrapper { flex-grow: 1; }

/* THEME SWITCH */
div.theme-switch { font-size: 1rem; font-weight: inherit; color: var(--blue); background-color: var(--true-bg); }
button.theme-switch { font-size: inherit; font-weight: inherit; }
button.theme-switch:hover { color: var(--bg-col); background-color: var(--aqua); }
#sun, #moon { padding: 0 0.3rem; }
#sun { background-color: transparent; color: inherit; }
#moon { background-color: var(--blue); color: var(--bg-col); }

.lightmode #sun { background-color: var(--yellow); color: var(--bg-col); }
.lightmode #moon { background-color: transparent; color: inherit; }
.lightmode .theme-switch { color: var(--yellow); }
.lightmode button.theme-switch:hover { background-color: var(--orange); color: var(--bg-col); }

/* NAVIGATION */
.nav-section { font-weight: 700; user-select: none; }
.nav-section * { transition: ease 0.3s; }
.nav-section a { color: var(--blue); }
.lightmode .nav-section a { color: var(--yellow); }
.nav-section a span { padding: 0 0.3rem; }
.tree { color: var(--aqua); }
.lightmode .tree { color: var(--green); }
a.active { color: var(--bg-col); background-color: var(--blue); text-shadow: none; }
a.active::after { content: '        // You are here'; background-color: var(--true-bg); color: var(--x-muted-col); }
.lightmode a.active { background-color: var(--yellow); color: var(--bg-col); }
.nav-section a:hover { color: var(--green); }

/* CONTENT ELEMENTS */
pre h1 { font-size: 1rem; color: var(--true-bg); background-color: var(--green); text-shadow: none; font-weight: 900; text-align: center; }
pre h1::before { content: ' ** '; }
pre h1::after { content: ' ** '; }
.lightmode pre h1 { background-color: var(--yellow); }
h2 { font-size: 1rem; color: var(--green); background-color: var(--off-bg-col); }
h2::before { content: '> '; color: var(--yellow); }
h3 { font-size: 1rem; color: var(--blue); background-color: var(--bg-col); }
h3::before { content: '// '; }

#bear-anim { padding-left: 3rem; user-select: none; }
blockquote { margin: 0 0 0 2rem; color: var(--muted-col); }
blockquote p::before { content: '| '; color: var(--aqua); }

/* FORM */
input, textarea { width: calc(100% - 4rem); margin: 0 1rem; background-color: var(--off-bg-col); border: none; padding: 0.3rem 1rem; font-size: 1rem; color: var(--text-col); }
input:focus, textarea:focus { outline: var(--yellow) 2px solid; color: var(--yellow); }
.lightmode textarea:focus, .lightmode input:focus { color: purple; outline-color: var(--purple); }
form button { font-size: 1rem; background-color: var(--orange); color: var(--bg-col); padding: 0 0.5rem; }
form button:hover { background-color: var(--yellow); }

/* BLOG & TAGS */
.tag-color-1 { color: var(--red); }
.tag-color-2 { color: var(--orange); }
.tag-color-3 { color: var(--yellow); }
.tag-color-4 { color: var(--green); }
.tag-color-5 { color: var(--aqua); }
.tag-color-6 { color: var(--blue); }
.tag-color-7 { color: var(--purple); }

.tag-button { background-color: var(--off-bg-col); padding: 0 0.3rem; font-weight: 700; }
.tag-button.active { background-color: var(--text-col); color: var(--bg-col); }
.tag-color-1.active { background-color: var(--red); color: var(--bg-col); }
.tag-color-2.active { background-color: var(--orange); color: var(--bg-col); }
.tag-color-3.active { background-color: var(--yellow); color: var(--bg-col); }
.tag-color-4.active { background-color: var(--green); color: var(--bg-col); }
.tag-color-5.active { background-color: var(--aqua); color: var(--bg-col); }
.tag-color-6.active { background-color: var(--blue); color: var(--bg-col); }
.tag-color-7.active { background-color: var(--purple); color: var(--bg-col); }

div.post-tags { margin-left: auto; }
span.tag { text-overflow: crop; max-width: 1rem; max-height: 1rem; border-radius: 50%; margin: 0 0.3rem; }
span.tag-color-1 { background-color: var(--red); color: var(--red); }
span.tag-color-2 { background-color: var(--orange); color: var(--orange); }
span.tag-color-3 { background-color: var(--yellow); color: var(--yellow); }
span.tag-color-4 { background-color: var(--green); color: var(--green); }
span.tag-color-5 { background-color: var(--aqua); color: var(--aqua); }
span.tag-color-6 { background-color: var(--blue); color: var(--blue); }
span.tag-color-7 { background-color: var(--purple); color: var(--purple); }
span.no-text { color: transparent; }

.tag-homepage { background-color: var(--off-bg-col)!important; max-width: fit-content!important; border-radius: 0!important; padding: 0 0.2rem; }
article.blog-post { width: 100%; }
article.post-homepage { width: 100%; margin-bottom: 1rem; }
.article-wrapper { display: block; width: 100%; }
.article-wrapper:not(.visible) { display: none; }
.tag-filter { display: flex; flex-direction: row; gap: 1rem; }
.tag-filter button { font-size: 1rem; }
.post-date { color: var(--muted-col); }
.post-content { padding: 0; margin: 0; }
.blog-tags { margin-bottom: 0; color: var(--x-muted-col); }
.blog-tag { background-color: var(--off-bg-col)!important; margin-left: 1rem; user-select: none; }
.blog-date { margin-bottom: 1rem; color: var(--x-muted-col); }
.blog-date div { margin-left: 1rem; color: var(--muted-col); }
em { color: var(--purple); }
pre > p > a { color: var(--aqua)!important; text-decoration: underline; }
pre > p > a:hover { color: var(--blue)!important; }
article:hover { background-color: var(--bg-col); }
li { margin-left: 1rem; list-style-type: none; }
li::before { content: '->  '; color: var(--green); }

/* CODE BRUSHES */
pre.chroma { margin: 0 0 1rem 1rem; }
code { color: var(--muted-col); }
code span { padding: 0 0.5rem; margin: 0; color: var(--muted-col); }
code.language-bash::before { content: 'bash'; font-style: italic; color: var(--x-muted-col); display: block; }
code.language-bash span span::before { user-select: none; content: "$ "; color: var(--x-muted-col); }
.posts-list, .blog-posts { display: flex; flex-direction: column; }

/* ABOUT / COLOR TABLE */
.color-table { display: flex; flex-direction: column; width: 100%; gap: 1rem; }
.color-row { display: flex; flex-direction: row; gap: 1rem; }
.color-cell { color: #1d2021; padding: 0 0.5rem; }
.color-light { color: #f9f5d7; }
.color-empty { color: transparent; background-color: transparent; }

/* MOBILE RESPONSIVENESS */
@media screen and (width <= 59rem) {
    * { font-size: 16px!important; }
    .terminal { max-width: calc(100vw - 1.4rem); min-width: calc(100vw - 1.4rem); padding: 0.7rem; border-radius: 0.7rem; margin: 1rem auto 0; }
    #bear-anim { font-size: 12px!important; padding-left: 1rem!important; }
    .cb-container, .menu, p.gt, p.cb { display: none!important; }
    .color-row { flex-direction: column; }
    .color-table { flex-direction: row; }
}

@media screen and (width <= 39rem) {
    * { font-size: 14px!important; }
    .terminal { max-width: calc(100vw - 0.6rem); min-width: calc(100vw - 0.6rem); padding: 0.3rem; border-radius: 0.3rem; }
    #bear-anim { font-size: 8px!important; padding-left: 1rem!important; }
    .row { flex-direction: column; }
}

pre#ascii-logo { font-weight: 800; }