/*
  The CSS in this style tag is based off of Bear Blog's default CSS, and then made worse by me.
  https://github.com/HermanMartinus/bearblog/blob/297026a877bc2ab2b3bdfbd6b9f7961c350917dd/templates/styles/blog/default.css
  License MIT: https://github.com/HermanMartinus/bearblog/blob/master/LICENSE.md
*/

:root {
        --bg: #111111;        /* Background */
        --surface: #1f1f1f;   /* Cards / Inputs */
        --text: #f5f5f5;      /* Primary Text */
        --accent: #4cc9f0;    /* Accent */
}

body {
        font-family: "Ubuntu Mono";
        margin: 0;
        padding: 0;
        text-align: left;
        background: var(--bg);
        word-wrap: break-word;
        overflow-wrap: break-word;
        color: var(--text);
        line-height: 1.7;
        font-size: 20px;
}

main {
        width: 720px;
        max-width: calc(100% -2em);
        margin: auto;
        padding: 3em, 1em;
}

h1, h2, h3, h4, h5 {
        margin: 0 0 0.5rem 0;
        color: var(--text);
}

h1 {
	font-size: 3.052em;
}

h2 {
	font-size: 2.441em;
}

h3 {
	font-size: 1.953em;
}

h4 {
	font-size: 1.563em;
}

h5 {
	font-size: 1.25em;
}

strong, b {
        font-weight: 700;
}

nav {

}

nav a.active {
        font-weight: bold;
}

a {
        color: var(--accent);
        text-decoration: none;
}

a:hover {
        color: var(--accent);
        text-decoration: none;
}

.prose p {
	margin-bottom: 2em;
}

textarea {
	width: 100%;
	font-size: 16px;
}

input {
	font-size: 16px;
}

table {
	width: 100%;
}

img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}

code {
	padding: 2px 5px;
	background-color: var(--bg);
	border-radius: 2px;
}

pre {
	padding: 1.5em;
	border-radius: 8px;
}

pre > code {
	all: unset;
}

blockquote {
	border-left: 4px solid var(--accent);
	padding: 0 0 0 20px;
	margin: 0;
	font-size: 1.333em;
}

hr {
	border: none;
	border-top: 1px solid rgb(var(--bg));
}

@media (max-width: 720px) {
	body {
		font-size: 18px;
	}
	main {
		padding: 1em;
	}
}

.sr-only {
	border: 0;
	padding: 0;
	margin: 0;
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
	/* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
	clip: rect(1px 1px 1px 1px);
	/* maybe deprecated but we need to support legacy browsers */
	clip: rect(1px, 1px, 1px, 1px);
	/* modern browsers, clip-path works inwards from each corner */
	clip-path: inset(50%);
	/* added line to stop words getting smushed together (as they go onto separate lines and some screen readers do not understand line feeds as a space */
	white-space: nowrap;
}

footer {
        margin: 3rem 0;
        text-align: center;
        color: var(--accent);
}