/* --- Theming --- */
:root {
    /* A basic light theme */
    --bg1: #8cd6ff;
    --bg1-5: #8cd6ff;
    --bg2: #bc9dff;
    --bg2-5: #bc9dff;
    --bg3: #d8ff9e;
    --bg3-5: #d8ff9e;
    --font1: #3b4ea3;
    --font2: #ffe39e;
    --font3: #161e42;
}

[data-theme="dark"] {
    /* A basic dark theme */
    --bg1: #d3d3d3;
    --bg1-5: #d3d3d3;
    --bg2: #444444;
    --bg2-5: #444444;
    --bg3: #333333;
    --bg3-5: #333333;
    --font1: #acacac;
    --font2: #8a8a8a;
    --font3: #dbdcdf;
}

[data-theme="main"] {
    /* Main colourful theme */
    --bg1: #8cd6ff;
    --bg1-5: #8cd6ff;
    --bg2: #bc9dff;
    --bg2-5: #bc9dff;
    --bg3: #d8ff9e;
    --bg3-5: #d8ff9e;
    --font1: #3b4ea3;
    --font2: #ffe39e;
    --font3: #161e42;
}

[data-theme="complex-1"] {
    /* A colourful theme with gradiants */
    --bg1: #8cd6ff;
    --bg1-5: #00a6ff;
    --bg2: #bc9dff;
    --bg2-5: #864fff;
    --bg3: #d8ff9e;
    --bg3-5: #a6eb40;
    --font1: #3b4ea3;
    --font2: #ffe39e;
    --font3: #161e42;
    --border1: var(--font3);
}
/* --------------- */


/* ----- MAIN ----- */
body {
    font-family: "Arial", sans-serif;
    font-style: normal;
    font-variant: normal;
    background-color: var(--bg1);
}

li {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

pre {
    font-size: 13px;
    font-weight: 400;
    line-height: 19px;
}

.markdown-section blockquote {
    border-left: 4px solid var(--font1);
}
.markdown-section h1 {
    margin-top: 50px;
}
.markdown-section em {
    /* color: #6d6d6d; */
    color: var(--font3);
}
.markdown-section p.warn {
    background: #F8F8F8;
}
.markdown-section table {
    display: table;
    width: 100%
}
.markdown-section th {
    text-transform: uppercase;
}
.markdown-section td,
.markdown-section th {
    text-align: left;
}

.progress,
.sidebar-toggle span,
section.cover .cover-main>p:last-child a:last-child {
    background-color: var(--font1);
}

.search a:hover,
.search .search-keyword,
.app-nav a:hover,
.app-nav a:active,
.sidebar ul li.active>a,
.markdown-section a,
.token.attr-value,
.token.control,
.token.directive,
.token.string,
.token.unit,
section.cover .cover-main>p:last-child a,
section.cover blockquote>p>a:hover {
    color: var(--font1);
}

.app-nav a:active,
section.cover blockquote>p>a {
    border-bottom: 2px solid var(--font1);
}

section.cover .cover-main>p:last-child a {
    border-color: var(--bg2);
}
/* --------------- */

/* ----- personal ----- */

body {
    background-image: linear-gradient(to left, var(--bg1), var(--bg1-5));
}

.app-name-link {
    font-family: 'Noto Serif Khitan Small Script', serif;
    /* font-family: 'Caudex', serif; */
    font-size: 36px;
    font-weight: 400;
    line-height: 19px;
    color: var(--font2);
}

a.app-name-link {
    color: var(--font2);





}

.sidebar {
    background-image: linear-gradient(to left, var(--bg2), var(--bg2-5));
    /* background-color: var(--bg2); */
    border-radius: 0 60px 60px 0;
    border-right: 8px solid var(--border1);

}

.sidebar-toggle {
    width: 80px;
    border-radius: 0 14px 14px 0;
}

.sidebar ul li a {
    color: var(--font3);
}

h1 {
    /* display: flexbox; */
    background-color: var(--bg3);
    border-radius: 30px;
    padding: 20px;
    width: 90%;
    /* border: solid black 10px; */
}

h2 {
    /* display: flexbox; */
    background-color: var(--bg3);
    border-radius: 20px;
    padding: 12px;
    width: 80%;
    /* border: solid black 10px; */
}

h3 {
    /* display: flexbox; */
    background-color: var(--bg3);
    border-radius: 20px;
    padding: 12px;
    width: 70%;
    /* border: solid black 10px; */
}

h4 {
    /* display: flexbox; */
    background-color: var(--bg3);
    border-radius: 20px;
    padding: 12px;
    width: 60%;
    /* border: solid black 10px; */
}

.app-name {
    background-image: linear-gradient(to left, var(--bg3), var(--bg3-5));
    /* background-color: var(--bg3); */
    color: var(--font3);
    padding: 6px;
    margin: 10px;
    height: 74px;
    width: 92%;
    border-radius: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* border: 4px solid var(--border1); */
}

.markdown-section figure,
.markdown-section p {
    /* border: 2px solid pink; */
    margin: -10px 0 -10px 0;
}

.cake-pin {
    width: 180px;
}

.msg-tube {
    width: 200px;
}
/* --------------- */