/* --- CSS Reset --- */

/* Use a more-intuitive box-sizing model */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Remove default margin */
* {
    margin: 0;
    padding: 0;
}

body {
    /* Default font-scaling */
    font-size: 81.25%;
    /* Add accessible line-height */
    line-height: 1.5;
    /* Improve text rendering */
    -webkit-font-smoothing: antialiased;
}

/* Improve media defaults */
img {
    display: block;
    max-width: 100%;
    height: auto;
}

p, h1, h2, h3, h4, h5, h6 {
    /* Avoid text overflows */
    overflow-wrap: break-word;
    /* Improve line wrapping */
/*    text-wrap: balance;*/
}

/* ----------------- */

@property --lightModeTextColor {
    syntax: '<color>';
    inherits: false;
    initial-value: black;
}

@property --darkModeTextColor {
    syntax: '<color>';
    inherits: false;
    initial-value: white;
}

@property --lightModeBlue {
    syntax: '<color>';
    inherits: false;
    initial-value: rgb(0, 122, 255);
}

@property --darkModeBlue {
    syntax: '<color>';
    inherits: false;
    initial-value: rgb(10, 132, 255);
}

@property --lightModeGray {
    syntax: '<color>';
    inherits: false;
    initial-value: rgb(233, 233, 241);
}

@property --darkModeGray {
    syntax: '<color>';
    inherits: false;
    initial-value: rgb(58, 58, 60);
}

/* ----------------- */

/*p { background-color:red; }*/
/*h1 { background-color:green; }*/
/*h2 { background-color:blue; }*/
/*h3 { background-color:teal; }*/
/*a { background-color:orange; }*/
/*hr { background-color:orangered; }*/
/*header { background-color:blueviolet; }*/
/*img { background-color:greenyellow; }*/
/*ol { background-color:purple; }*/
/*ul { background-color:violet; }*/

/* ---------------------- */
/* --- Basic elements --- */

:root {
    color-scheme: light dark;
}

html {
    font-family: -apple-system, sans-serif;
}

body {
    margin:32px;
}

a {
    text-decoration: none;
    color: light-dark(var(--lightModeBlue), var(--darkModeBlue));
}

a:hover {
    text-decoration: underline;
}

hr {
    border-style: solid;
    border-width: 0.5px;
    opacity: 0.25;
}

ol, ul {
    padding-left: 1.75em;
}

ul:has(a) {
    list-style-type: none;
    padding-left: 0;
}

/* --------------- */
/* --- Styling --- */

article {
    padding-top:1.75em;
    padding-bottom:0.875em;
}

article p, article img, article ul, footer > .contact {
    margin-bottom: 0.875em;
}

article h3 {
    font-size: 1.5em;
    padding-bottom: 0.4375em;
}

main img {
    width:400px;
    border-radius: 13px;
    outline: 1px solid rgba(0.0,0.0,0.0,0.1);
    outline-offset: -1px;
}

.textedit-img {
    border-radius: 8px;
}

header img {
    display: inline-block;
    vertical-align:middle;
    width:64px;
    border-radius: 16px;
    box-shadow: 0px 0.5px 1.25px rgba(0.0,0.0,0.0,0.4);
}

header section {
    display: inline-block;
    vertical-align:middle;
    padding-left:1em;
}

header h1 {
    font-size: 2em;
}

footer {
    padding-top:1.75em;
}

/* ----------------- */

header#compact > img {
    width:32px;
    border-radius: 8px;
}

.tableOfContents {
    padding-bottom:0;
}

p > code {
    font-size:1.15em;
    background-color: light-dark(var(--lightModeGray), var(--darkModeGray));
    border-radius:3px;
    padding:0.15em 0.25em;
}