/* We tell the browser to use a dark color scheme if the user has their system in
   dark mode */
:root {
    color-scheme: light dark;

    /* Color variables */
    --accent: #fff200ff;
    --link: #dd1155ff;
    --background: light-dark(#f3dffc, #110310);
    --foreground: light-dark(##110310, #08020b);
    --text: light-dark(#edf2f4, #efefef);

    --success: #9ece6a;
    --warn: #e0af68;
    --error: #f7768e;
}

@font-face {
  font-family: DepartureMono; /* set name */
  src: url(/Fonts/DepartureMono-Regular.woff); /* url of the font */
}

body {
    /* We make sure the page will always be centered and adapt well to mobile
       screens */
    max-width: 800px;
    margin: auto;
    padding: 40px;
    font-size: 1.0em;

    font-family:
        "Adwaita Sans",
        "Inter",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Oxygen,
        Cantarell,
        "Open Sans",
        "Helvetica Neue",
        sans-serif;
        /* DepartureMono; */

    display: flex;
    flex-direction: column;
    gap: 20px;
    background-color: var(--background);
    color: var(--text);
}

img {
  max-width: 100%;
  height: auto;
}

section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

h1,h2,h3 {
	font-family: DepartureMono;
    color: var(--accent);
}

* {
    padding: 0;
    margin: 0;
}

hr {
    margin: 10px 0px;
    border: none;
    outline: none;
    width: 100%;
    border-bottom: 1px dashed black;
}

a,
a:visited {
    color: var(--link);
}

mark {
    background-color: light-dark(lightpink, hotpink);
    color: black;
}

/* Make every header, that is not directly followed by another header, have a
   padding */
h1:not(:first-child),
h2:not(:first-child),
h3:not(:first-child),
h4:not(:first-child),
h5:not(:first-child) {
    padding-top: 30px;
}

foot {
    display: flex;
    flex-direction: column;
    padding: 10px;
    gap: 5px;
}

ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

code {
    font-family:
        ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas,
        "DejaVu Sans Mono", monospace;
}

:not(pre) > code {
    padding: 2px 4px;
}

pre:has(code) {
    border: 1px solid rgba(0, 0, 0, 0.4);
    background-color: rgba(0, 0, 0, 0.1);

    padding: 12px;
    color: black;
    /* overflow-wrap: anywhere; */
    overflow-x: auto;
}

article {
    border: 1px solid rgba(0, 0, 0, 0.4);
    background-color: rgba(0, 0, 0, 0.1);

    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

table {
    margin-top: 10px;
    margin-bottom: 10px;
    border-collapse: collapse;
    overflow: hidden;
}

th,
td {
    border: 1px solid rgba(0, 0, 0, 0.4);
    background-color: rgba(0, 0, 0, 0.1);
    padding: 8px;
}

.post-info {
    font-family: "Adwaita Mono", monospace;
    opacity: 0.8;
}

.tag {
    border: 1px solid black;

    background-color: white;
    color: black;

    width: min-content;
    padding: 1px 6px;
}

.creation-date {
    padding: 1px 6px;
}

.tag::before {
    content: "#";
    opacity: 0.6;
    margin-right: 5px;
}

/* If the system is in dark mode, then we'll  adjust the site's colors for it */
@media (prefers-color-scheme: dark) {
    :not(pre) > code {
        color: white;
        background-color: rgba(0, 0, 0, 0.8);
    }

    pre:has(code),
    article,
    th,
    td {
        border: 1px solid rgba(255, 255, 255, 0.2);
        background-color: rgba(0, 0, 0, 0.4);
        color: white;
    }
}

.admonition {
	
	background-color: hsla(var(--tint), 50%, 50%, 40%);
	border-left: 4px solid hsla(var(--tint), 50%, 50%, 100%);
	padding-left: 4px;

	/* different types of admonition*/
	&.caution {
		--tint: 0;
	}
	&.important {
		--tint: 270;
	}
	&.tip {
		--tint: 119;
	}
	&.warning {
		--tint: 55;
	}
	&.note {
		--tint: 205;
	}
}

/* "Hover to reveal" type spoilers. */
span.spoiler {
	background-color: grey;
	color: grey;
	&:hover {
		color: inherit;
		background-color: inherit;
	}
}