/**
 * Minified by jsDelivr using clean-css v5.3.3.
 * Original file: /npm/modern-normalize@3.0.1/modern-normalize.css
 *
 * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
 */
/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */
*,::after,::before{box-sizing:border-box}html{font-family:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji';line-height:1.15;-webkit-text-size-adjust:100%;tab-size:4}body{margin:0}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Consolas,'Liberation Mono',Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-color:currentcolor}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}
/*# sourceMappingURL=/sm/d2d8cd206fb9f42f071e97460f3ad9c875edb5e7a4b10f900a83cdf8401c53a9.map */
/* The universal stylesheet used for style consistency throughout all websites hosted under dexi.rocks domain */

/* Using locally served fonts directly acquired from Google */
/* Potentially consider Chiron GoRound TC (no simplified) as the body font if Chinese ever gets used */
/* Custom CI worker needed to dynamically create a subset of Chinese fonts that only appear in the content */
/* Consider adapting an existing script and add a HTML checker to selectively choose Chinese characters based on context e.g. heading? */

/* Display font exclusively used for a *single element in the page only, e.g. article title */
@font-face {
    font-family: 'MuseoModerno';
    src: url('./fonts/MuseoModerno/MuseoModerno-VariableFont_wght.ttf') format('truetype');
    font-weight: 750; /* Closest match to Momo Trust Display's thickness, set as default */
}

@font-face {
    font-family: 'MuseoModerno';
    src: url('./fonts/MuseoModerno/MuseoModerno-Italic-VariableFont_wght.ttf') format('truetype');
    font-weight: 700; /* Closest match to Momo Trust Display's thickness, set as default */
    font-style: italic;
}

/* Normal heading fonts */
@font-face {
    font-family: 'Momo Trust Display';
    src: url('./fonts/Momo_Trust_Display/MomoTrustDisplay-Regular.ttf') format('truetype');
}

/* Default font */
@font-face {
    font-family: 'Momo Trust Sans';
    src: url('./fonts/Momo_Trust_Sans/MomoTrustSans-VariableFont_wght.ttf') format('truetype');
}

/* Monospace font for codebase */
@font-face {
    font-family: 'Sometype Mono';
    src: url('./fonts/Sometype_Mono/SometypeMono-VariableFont_wght.ttf') format('truetype');
}

@font-face {
    font-family: 'Sometype Mono';
    src: url('./fonts/Sometype_Mono/SometypeMono-Italic-VariableFont_wght.ttf') format('truetype');
    font-style: italic;
}


/* Declaring commonly used colours */
:root {
    --yellow: #a89a00;
    --lime: #80a000;
    --blue: #006dc6;
    --purple: #aa15c5;
    --dark: #2c2c2c;
    --darker: #222222;
    --light: #bbbbbb;
}

body {
    background-color: var(--dark);
    font-family: 'Momo Trust Sans', sans-serif;
    font-size: 1.2rem;
    color: var(--light);
    list-style: inside;
    font-weight: 350;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Momo Trust Display', sans-serif;
}

b {
    font-weight: 900;
}

p, li {
    line-height: 2rem;
}

code {
    font-family: 'Sometype Mono', monospace;
    font-size: 1.1rem;
    padding: 5px;
    border: 2px inset var(--dark);
    background-color: var(--darker);
}

/* You MUST set #title to a div/span/other parent element, period */
/* ONLY USE TO ACCENTUATE ELEMENTS THAT REQUIRE IT */
.title > * { /* Only used to set the font family for title, SET UP THE OTHER RULES ON SITE-SPECIFIC CSS FILES */
    font-family: 'MuseoModerno';
}

/* TODO: Add support for multiline code per https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/code#notes */

/* Based on https://blog.prototypr.io/align-svg-icons-to-text-and-say-goodbye-to-font-icons-d44b3d7b26b4 */
li > svg, li > object {
    top: 0.25em;
    position: relative;
}

/* https://stackoverflow.com/a/78216563 */
hr {
    display: block;
    background-color: var(--light);
    width: 80dvw;
    border-radius: 50px;
    padding: 4px 0;
    margin: 0;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/*  */

/* Color definition */
.yellow {
    color: var(--yellow);
}

.lime {
    color: var(--lime);
}

a {
    color: var(--blue);
}

a:hover {
    color: var(--light);
}

a:visited {
    color: var(--purple);
}

/* Useful stuff to note down:
 * - https://stackoverflow.com/a/7729610 for divider between items on a horizontal menu
 */

/* CSS import does NOT work for site-style since it doesn't exist post-generation; refer to css-bundle.njk instead */

/* Classes */
.warning {
    width: inherit;
    max-width: inherit;
    background-color: var(--yellow);
    color: var(--dark);
    align-content: center;
    padding: 1rem;
    p {
        margin: 0;
        font-style: italic;
    }
}

/* Direct targeting */

body {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* For website header */
header {
    font-size: 1.50rem;
    color: var(--dark);
    background-color: var(--light);
    /* Let the content inside decide the height */
    padding: 0;
    margin: 0;
    margin-bottom: 2em;
    width: 100dvw; /* This is somehow the only method I accidentally use to force align left; justify- and align- properties don't work */
    max-width: 100%; /* https://stackoverflow.com/a/57164013 why */
    height: max-content;

    ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: row;
        align-items: center;

        li {
            margin: 0;
            padding: 1em 1em;
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        a:visited {
            color: inherit;
        }

        a:hover {
            color: inherit;
            text-decoration: underline;
        }
    }

    .title {
        font-size: 1.75rem;
        border-right: solid 3px var(--dark);
    }
}

/* for website footer */
footer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    background-color: var(--light);
    color: var(--dark);
    /* Let the content inside decide the height */
    padding: 0;
    margin: 0;
    width: 100dvw;
    max-width: 100%; /* https://stackoverflow.com/a/57164013 why */
    height: max-content;

    /* Tried using separators with different content including emojis before I realized it's probably easier that I create slanted background */
    /* Couldn't find a way to do slanted border that allow neighbouring elements to align with each other's borders cleanly */
    p {
        margin: 0;
        padding: 2rem;
        min-width: max-content;
    }

    p:first-child {
        background-color: var(--yellow);
        width: 50dvw;
        text-align: end;
    }
    p:nth-child(2) {
        background-color: var(--light);
    }

    p:nth-child(3) {
        background-color: var(--purple);
        color: var(--light);
    }

    p:last-child { 
        background-color: var(--dark);
        color: var(--light);
        width: 50dvw;
        /* Maybe consider putting a 1px solid border at the top and bottom? */
    }
}

#article {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 850px;
    max-width: 850px;
    min-width: 850px;

    * {
        width: inherit;
        max-width: inherit;
        min-width: inherit;
    }

    #article-header {
        margin: 2rem 0;
        
        * {
            margin: 0;
        }
    }

    .title > * {
        font-size: 4rem;
    }
    
    img {
        margin: 0;
        padding: 0;
        height: auto; /* Used to preserve aspect ratio */
    }

    
}

@media screen and (width <= 950px) {
    header {
        margin: 0;
    }

    footer {
        flex-direction: column;
        text-align: end;
        min-width: 100dvw;

        p {
            min-width: 100dvw;
        }
    }

    #article {
        width: 95dvw;
        max-width: 95%;
        min-width: 95%;
    }

    .warning {
        width: 100dvw;
        max-width: 100%;
    }
}

/* Exclusively for header navbar */
@media screen and (width <= 700px) {
    header {
        #title {
            border: 0;
        }

        /* Will do something about the navbar on mobile, kept hidden for now */
        li:not(:first-child) {
            display: none;
        }
    }
}