/* Some inspiration from https://waitwhat.sh/ and https://oxal.org/projects/sakura/ */

@import url('https://fonts.googleapis.com/css2?family=Fira+Code&family=Fira+Sans&display=swap');

:root {
  color-scheme: light dark;
}

body {
	background-color: light-dark(#f9f9ff, #161920);
    color: light-dark(#4a4a4a, #dfdfdf);
	font-family: 'Fira Sans', system-ui, sans-serif;
	line-height: 1.8;
}

main {
    background-color: light-dark(#00000010, #ffffff10);
    padding: 1px 20px;
}

footer { padding-top: 20px; }

h1, h2, h3, h4, h5, h6 { line-height: 1.3; }

a {
    font-weight: bold;
    color: light-dark(#1d7484, #a2d1ff);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

strong {
    color: light-dark(#bf6464, #ffa4a4);
}

em {
    color: light-dark(#7d7d7d, #9d9d9d);
}

blockquote {
    margin-inline-start: 5px;
    border-left: 5px solid light-dark(#bf6464, #ffa4a4);
}

blockquote > p {
    margin-inline-start: 10px;
}

div > p {
    text-align: justify;
}

code { font-family: 'Fira Code', monospace; }
@supports (font-variation-settings: normal) {
	code { font-family: 'Fira Code VF', monospace; }
}

/* Inline code */
:not(pre) > code {
    /* color: #e8e8e8; */
    padding: 1px 4px 1px 4px;
    background-color: light-dark(#00000015, #ffffff1e);
}

/* Code blocks */
pre {
    padding: 10px 10px 10px 10px;
    background-color: light-dark(#0000000a, #0000001c) !important;
    overflow-x: auto;
    max-width: 90vw;
    border: 2px solid light-dark(#0000001e, #ffffff1e);
}

img {
    max-width: 99.5%;
    /* border: 2px solid #4f4e57a6; */
}

::selection, ::-moz-selection { background: light-dark(#00000040, #ffffff40); }

/* Responsive width */
body {
    width: 50%;
	margin: auto;
}
@media (max-width: 1500px) {
    body { width: 60%; }
}
@media (max-width: 1200px) {
    body { width: 70%; }
}
@media (max-width: 900px) {
    body { width: 80%; }
}
@media (max-width: 700px) {
    body { width: 90%; }
}

/* When printing page, remove footer (navigation elements) */
@media print {
    footer { display: none; }
}