@font-face {
        font-family: 'Newsreader';
        font-style: normal;
        src: url('/fonts/Newsreader.ttf');
        font-display: swap;
        font-weight: 1 999;  
    }

    @font-face {
        font-family: 'General';
        font-style: normal;
        src: url('/fonts/General.ttf');
        font-display: swap;
        font-weight: 1 999;  
    }

    @font-face {
        font-family: 'Figtree';
        font-style: normal;
        src: url('/fonts/Figtree.woff2');
        font-display: swap;
        font-weight: 1 999;  
    }

    @font-face {
        font-family: 'Authentic';
        font-style: normal;
        src: url('/fonts/AUTHENTIC-400.woff2');
        font-display: swap;
        font-weight: 400;  
    }

    @font-face {
        font-family: 'Authentic';
        font-style: normal;
        src: url('/fonts/AUTHENTIC-600.woff2');
        font-display: swap;
        font-weight: 600;  
    }


	:root{
		--theme: #050c56;
		--t-theme: rgba(244, 236, 226, 0.7);
		--light: rgba(244, 236, 226, 0.4); /* #020148; */
		--sans: Figtree, system-ui;
	}

	*{
		box-sizing: border-box;
		position: relative;
	}

	.sidebar p:first-child{
		margin-top: 0px;
	}

	::selection{
		background: #DDD
	}

	html{
		scroll-behavior: smooth;
	}

	body{
		font-family: var(--sans);
		background: #FFFFFF;
		margin: 0px;
		line-height: 1.6em;
		color: var(--theme);
		font-weight: 400;
		background: rgba(5, 12, 86, 0);
		overscroll-behavior-y: none;
	}

	.container{
		display: inline-flex;
	}

	main{
		width: 100%;
		text-align: left;
		position: relative;
		overflow: scroll;
		padding-left: 2.5%;
		padding-right: 15rem;
		transition: padding 0.25s ease, filter 0.4s ease;
/*	  	overscroll-behavior: contain;*/
	}

	.sidebar{
		min-width: 25rem;
		max-width: 25rem;
		height: fit-content;
		text-align: left;
		line-height: 1.4em;
		overflow: auto;
		padding: 3em;
		scrollbar-width: none;  /* Firefox */
	  	-ms-overflow-style: none;  /* Internet Explorer 10+ */
	  	transition: margin ease 0.25s;
	  	z-index: 2;
	  	overscroll-behavior: contain;
	  	position: sticky;
	  	top: 0;
		font-size: 15px;
	}

	.sidebar::-webkit-scrollbar { 
	  display: none;  /* WebKit (Safari, Chrome, etc.) */
	}

	.sidebar-flex{
		display: flex;
		flex-direction: column;
		gap: 1.2rem;
	}

	.intro a{
		color: #000;
		text-underline-offset: 2px;
		text-decoration-thickness: 1px;
	}

	.pages, .elsewhere{
		display: flex;
		flex-wrap: wrap;
		gap: 0.75rem;
		margin-top: 1.2em;
	}

	.elsewhere a{
		display: flex;
		gap: 0.5em;
	}

	.elsewhere a img{
		height: 20px;
	}

	.border{
		padding: 0.3em 0.9em;
		width: fit-content;
		display: inline-block;
/*		background: var(--t-theme);*/
		border-radius: 6px;
		text-decoration: none;
		font-size: 0.95em;
		background: rgba(5, 12, 86, 0.03);
		border: solid 1px rgba(5, 12, 86, 0.1);
	}

	nav{
		display: flex;
		flex-direction: column;
		gap: 1.2em;
	}

	nav a{
		text-decoration: none;
	}

	.flex{
		display: flex;
		position: relative;
		text-align: left;
		gap: 0.7em;
		justify-content: space-between;
	}

	.flex a:hover{
		font-style: italic;
	}

	.nav-title{
		border-radius: 0px;
	}

	.nav-info{
      	transition: transform 0.15s ease;
		opacity: 0.4;
    }

    .light{
    	opacity: 0.3;
    	font-weight: 400;
    }

    .stars{
    	display: flex;
    	height: 0.9em;
    	gap: 0.25em;
    	opacity: 0.25;
    	margin-top: 4px;
    }

    .post{
    	margin: 0.6em 0em;
    }

	footer{
		font-size: 13px;
		color: #aaa;
		margin-top: 1em;
	}

	.content{
		max-width: 40rem;
		text-align: left;
		display: inline-block;
		width: 100%;
		padding: 1rem 2rem;
		padding-bottom: 3em;
		position: relative;
	}

	.content.list{
/*		max-width: 38rem;*/
	}

	.content section{
		padding: 1em;
/*		border: solid var(--theme) 1.5px;*/
		border-radius: 6px;
		margin: 1.75em 0em;
		background: rgba(5, 12, 86, 0.04);
		border: solid 1.5px rgba(5, 12, 86, 0.05);
	}

	/*section > p{
		opacity: 0.6;
	}*/

	.content section h3:not(:first-child){
		margin-top: 1.5em;
	}

	.content section > *:first-child{
		margin-top: 0px;
	}

	.content section > *:last-child{
		margin-bottom: 0px;
	}

	.content .double{
		padding: 0em;
		display: flex;
		flex-wrap: wrap;
		gap: 1.2rem;
		border: none;
		background: none;
	}

	.double > section{
		width: calc(50% - 0.6rem);
		margin: 0px;
		line-height: 1.5em;
		font-size: 0.96em;
	}

	.double > section p{
		margin: 1em 0em;
	}

	time{
		opacity: 0.4;
		font-style: italic;
	}

	.toc{
		position: absolute;
		top: 2em;
		right: 1.5rem;
		width: 13rem;
		text-align: right;
	}

	.toc ul li::marker{
		content: ' ';
	}

	.toc ul li{
		opacity: 0.4;
	}

	.toc ul li:hover{
		opacity: 0.8;
	}

/*TYPOGRAPHY*/

	.content h1, .content h2, .content h3{
		scroll-margin-top: 1em;
	}

	h4{
		margin-bottom: 0px;
		margin-top: 1.6em;
	}

	h4 a {
		text-decoration: none;
	}

	.content h1{
		font-size: 2.6em;
		margin-bottom: 0.75em;
		/*background: #444;
		color: #eee;
		padding: 0.35em 0.5em 0.2em 0.5em;
		border-radius: 24px;
		width: fit-content;
		font-style: italic;*/
		line-height: 1.25em;
		letter-spacing: 0px;
		font-weight: 800;
	}

	.content h2{
		margin: 1.75em 0em 0.85em 0em;
/*		font-weight: 400;*/
		font-size: 1.7em;
	}

	.content h3{
		margin: 2.4rem 0em 0.6em 0em;
		font-family: inherit;
		font-size: 1.1em;
		color: inherit;
	}

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

	a{
		color: inherit;
	}

	.sidebar section a{
		text-decoration: none;
	}

	.list a {
		text-decoration: none;
	}

	li{
		margin: 0.5em 0em;
	}

	p{
		margin: 0em 0em 1.2em 0em;
	}

	blockquote{
		background: rgba(5, 12, 86, 0.05);;
		border-radius: 0px;
		padding: 1em;
		margin: 2em 0em;
		font-family: Newsreader;
	}

	blockquote > *:first-child{
		margin-top: 0px;
	}

	blockquote > *:last-child{
		margin-bottom: 0px;
	}

	cite{
		display: block;
		margin-top: 1rem;
	}

	cite a{
		text-decoration: none;
		font-weight: 600;
	}

	hr{
		border: none;
		margin: 1em 0em;;
	}

	pre{
		max-width: 100%;
		overflow-x: auto;
		background: rgba(5, 12, 86, 0.1);
		border: dashed 2px rgba(5, 12, 86, 0.2);
		border-radius: 8px;
		padding: 1em;
	}
	/*li::marker {
	  content: '# ';
	}*/

	.mobile{
		display: none;
	}

	.sidebar.open{
		margin-left: 0em;
	}

	.top{
		display: none;
	}

	.toggle{
		position: fixed;
		bottom: 1em;
		right: 1em;
		width: fit-content;
		z-index: 3;
	}

	.top{
		padding: 1em;
		width: 100%;
		max-width: 38rem;
		text-align: left;
	}

	.mobile a{ 
		font-size: 1.1em;
		text-decoration: none;
		color: #CCC;
		font-weight: 600
	}