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

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

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

    display: flex;
    flex-direction: column;
    gap: 20px;
}

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

* {
    padding: 0;
    margin: 0;
}

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

a,
a:visited {
    color: light-dark(mediumvioletred, hotpink);
}

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;
}

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-x: scroll;
}

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: 10px;
}

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;
}

blockquote {
		border-left: 4px solid grey;
		padding-inline: 12px;
		padding-block: 4px;
}

.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 {
	border-left: 4px solid hsla(var(--tint), 50%, 50%, 100%);
	padding-inline: 12px;
	padding-block: 4px;

	/* different types of admonition*/
	&.caution {
		--tint: 0;
	}
	&.important {
		--tint: 270;
	}
	&.tip {
		--tint: 119;
	}
	&.warning {
		--tint: 55;
	}
	&.note {
		--tint: 205;
	}
	.admonition-header {
		font-weight: bolder;
		text-transform: uppercase;
		font-family: monospace, monospace;
		margin-bottom: 8px;
		color: hsla(var(--tint), 50%, 50%, 100%);
	}
}
/* "Hover to reveal" type spoilers. */
span.spoiler {
	background-color: grey;
	color: grey;
	&:hover {
		color: inherit;
		background-color: inherit;
	}
}