/* my fav pastel colour scheme @ https://github.com/catppuccin/catppuccin */
:root {
    --petals-rosewater: #f5e0dc;
    --petals-flamingo: #f2cdcd;
    --petals-pink: #f5c2e7;
    --petals-mauve: #cba6f7;
    --petals-red: #f38ba8;
    --petals-maroon: #eba0ac;
    --petals-peach: #fab387;
    --petals-yellow: #f9e2af;
    --petals-green: #a6e3a1;
    --petals-teal: #94e2d5;
    --petals-sky: #89dceb;
    --petals-sapphire: #74c7ec;
    --petals-blue: #89b4fa;
    --petals-lavender: #b4befe;
    --petals-text: #cdd6f4;
    --petals-subtext1: #bac2de;
    --petals-subtext0: #a6adc8;
    --petals-overlay2: #9399b2;
    --petals-overlay1: #7f849c;
    --petals-overlay0: #6c7086;
    --petals-surface2: #585b70;
    --petals-surface1: #45475a;
    --petals-surface0: #313244;
    --petals-base: #1e1e2e;
    --petals-mantle: #181825;
    --petals-crust: #11111b;
}

@media (prefers-color-scheme: light) {
    :root {
        --petals-rosewater: #dc8a78;
        --petals-flamingo: #dd7878;
        --petals-pink: #ea76cb;
        --petals-mauve: #8839ef;
        --petals-red: #d20f39;
        --petals-maroon: #e64553;
        --petals-peach: #fe640b;
        --petals-yellow: #df8e1d;
        --petals-green: #40a02b;
        --petals-teal: #179299;
        --petals-sky: #04a5e5;
        --petals-sapphire: #209fb5;
        --petals-blue: #1e66f5;
        --petals-lavender: #7287fd;
        --petals-text: #4c4f69;
        --petals-subtext1: #5c5f77;
        --petals-subtext0: #6c6f85;
        --petals-overlay2: #7c7f93;
        --petals-overlay1: #8c8fa1;
        --petals-overlay0: #9ca0b0;
        --petals-surface2: #acb0be;
        --petals-surface1: #bcc0cc;
        --petals-surface0: #ccd0da;
        --petals-base: #eff1f5;
        --petals-mantle: #e6e9ef;
        --petals-crust: #dce0e8;
    }
}

:root {
    color-scheme: light dark;
}

html {
    font-family: Arial, Helvetica, sans-serif;
    tab-size: 4;
    font-size: 16px;
    line-height: 1.5em;

    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: 4em;
}

@media screen and (min-width: 320px) {
    html {
        font-size: calc(14px + (18 - 14) * ((100vw - 320px) / (1200 - 320)));
    }
}

@media screen and (min-width: 1200px) {
    html {
        font-size: 18px;
    }
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--petals-base);
    color: var(--petals-text);
}

a {
    text-decoration: none;
    color: var(--petals-mauve);
}

a:hover {
    text-decoration: underline;
    transition: all;
    transition-duration: 100ms;
}

a.goto-home:hover {
    text-decoration: none;
}

#head {
    white-space: nowrap;
    position: sticky;
    width: 100%;
    margin-top: 12pt;
}

#head nav {
    position: absolute;
    display: inline;
    margin-left: 8pt;
}

#head nav a {
    margin-right: 12px;
}

#head .goto-home {
    display: table;
    margin: auto;
    color: var(--petals-pink);
}

@media (max-width: 520px) {
    #head {
        display: grid;
        grid-template-rows: 1fr 1fr;
        grid-row-gap: 8%;
    }

    #head #navigation {
        grid-row: 2;
    }

    #head nav {
        position: relative;
        display: block;
        text-align: center;
    }

    #head #top-btn {
        grid-row: 1;
        position: relative;
    }
}

main {
    margin: 2em auto 0.5em auto;
    padding-left: 5%;
    padding-right: 5%;
    max-width: 54em;
}

header {
    width: 100%;
    display: grid;
    grid-template-columns: 75% 25%;
    position: relative;

    margin-bottom: 20px;
    padding-bottom: .4em;
    border-bottom: 2px groove var(--petals-surface0);
}

#title, #subtitle {
    text-align: left;
    word-wrap: break-word;
}

#date, #tags {
    text-align: right;
}

#title {
    font-size: 120%;
    line-height: 1.2;
    margin-bottom: -2.5%;
    color: var(--petals-pink);
}

#title h1 div {
    display: inline;
}

@media (max-width: 750px) {
    #title h1 div {
        display: block;
    }
}

@media (max-width: 380px) {
    #title h1 {
        font-size: 112%;
    }
}

#subtitle {
    color: var(--petals-subtext1);
}

#date {
    font-size: 75%;
    padding-top: 10%;
    color: var(--petals-subtext0);
}

#tags {
    overflow: hidden;
}

#tags a {
    margin-right: 2%;
    opacity: 50%;
}

#tags a:hover {
    opacity: 100%;
}

#content h2, #content h3, #content h4, #content h5, #content h6 {
    margin-top: 24px;
    margin-bottom: 16px;
    padding-bottom: .2em;
    line-height: 1.25;
}

#content h1 a, #content h2 a, #content h3 a, #content h4 a, #content h5 a, #content h6 a {
    text-decoration: none;
    visibility: hidden;
}

#content h1 a, #content h2 a {
    margin-left: -3.7%;
}

#content h3 a, #content h4 a {
    margin-left: -3.2%;
}

#content h3 a, #content h5 a {
    margin-left: -2.7%;
}

#content h6 a {
    margin-left: -2.2%;
}

#content h1:hover a, #content h2:hover a, #content h3:hover a, #content h4:hover a, #content h5:hover a, #content h6:hover a {
    visibility: visible;
}

#content h2, #content h3, #content h4 {
    border-bottom: 1px solid var(--petals-surface0);
}

#content h2 {
    font-size: 180%;
}

#content h3 {
    font-size: 150%;
}

#content h4 {
    font-size: 125%;
}

#content h5 {
    font-size: 110%;
}

#content h6 {
    font-size: 100%;
}

#content code {
    background: var(--petals-surface0);
    font-size: 90%;
    padding: .1em .3em;
    border-radius: 8px;
}

table, pre, ul, ol {
    margin-left: 5%;
}

code, pre {
    white-space: pre-wrap;
    word-wrap: break-word;
}

table {
    border-collapse: collapse;
}

td, th {
    margin-left: 5%;
    padding: 6px 13px;
    border: 1px solid var(--petals-surface1);
}

._color-text {
    color: var(--petals-text);
}

._color-pink {
    color: var(--petals-pink);
}

._color-base {
    color: var(--petals-base);
}

._color-mauve {
    color: var(--petals-mauve);
}


img {
    padding-top: 1rem;
    padding-bottom: 1rem;
    display: block;
    max-height: 90%;
    max-width: 90%;
    height: auto;
    margin: auto;
}

p {
    text-align: justify;
}