:root {
	--gray: #282828;
	--lgray: #969896;
	--pearl: #c5c8c6;
	--orange: #f0c674;
	--green: #b5bd68;
	--crimson: #f43753;
	--blue: #7494a3;
	--purple: #b294bb;
	}

	html {
		max-width: 70ch;
		margin: auto;
		/*line-height: 1.75;
		padding: 3em 1em;
		font-size: 1.25em;*/
		}
	
	body {
 		background-color: var(--gray);
 		color: var(--pearl);
 		/*margin: 13px;
 		padding: 13px;
		/* Center content
 		margin: 15%;
 		padding: 15p%; */
 		font-family: 'mononokiRegular';
		font-style: normal;
		font-size: 100%;
		text-rendering: optimizelegibility;
 		/*max-width: 700px;*/
 		line-height: 1.3;
		}
		
/* Retro CRT cursor */
	.blinking {
	  	font-size: 100%;
	  	display: inline;
	  	animation:termCursor 1.9s infinite;
	  	/* Stop the cursor animation after n repetitions
	  	animation-iteration-count: 5 ; */
	   	}

	@keyframes termCursor {
	    0%	{	color: var(--pearl);}
	    49%	{	color: var(--pearl);}
	    60%	{	color: transparent; }
	    99%	{	color: transparent; }
	    100%{   color: transparent; }
	    	}
	    }

/* ------------------ */
	     		
	.hyper {
  		color: var(--orange);
   		text-decoration: none;
   		display: inline;
	   	}

	h1 {
	  	/*color: var(--pearl);*/
	  	color: var(--green);
	  	font-size: 1.5em;
	  	line-height: 150%;
	  	font-weight: bold;
	  	margin: 1.5em 0 1.5em 0;
	  	/*padding-top: 3%;
		padding-bottom: 3%;*/
	  	}

	h2 {
		color: var(--pearl);
		font-size: 1em;
		line-height: 150%;
	  margin: 1.5em 0 1.5em 0;
		/*padding-top: 3%;
		padding-bottom: 3%;*/
		}

	h3 {
		color: var(--pearl);
		font-size: 100%;
		line-height: 100%;
		font-weight: normal;
		/*padding-top: 3%;
		padding-bottom: 3%;*/
		}
		
	txt {
		color: var(--pearl);
		font-size: 85%;
		font-weight: normal;
		/*line-height: 150%;
		max-width: 400px;*/
		}
			
	tags {
		color: var(--blue);
		font-size: 0.75em;
		font-weight: normal;
		line-height: 150%;
		max-width: 400px;
		}

	fnotes {
		color: var(--pearl);
		font-size: 0.75em;
		font-weight: normal;
		/*line-height: 150%;*/
		max-width: 400px;
		}
		
	list {
		color: var(--pearl);
		font-size: 85%;
		font-style: normal;
		line-height: 150%;
		padding-bottom: 150%;
		list-style: disc inside;
		}

	img {
		display: block;
		border-radius: 5px;
		max-width: 100%;
		height: auto;
		}

	hr {
	  	display: block;
	  	border: 1px solid #373737;
	  	margin-block-start: 0.5em;
	  	margin-block-end: 0.5em;
	  	margin-inline-start: auto;
	  	margin-inline-end: auto;
	  	color: #373737;
	  	-moz-float-edge: margin-box;
	  	box-sizing: content-box;
	  	}

a {
	color: var(--pearl);
	text-decoration: underline dotted var(--lgray);
	}

a:visited {
	color: var(--pearl);
	text-decoration: underline dotted var(--lgray);
	}

a:hover, a:focus {
	color: var(--pearl);
	text-decoration: underline var(--lgray);
	}
	
/*p {
	line-height: 1.5em;
}
*/

	#title {
	  	display: inline;
	  	font-size: 200%;
	  	line-height: 200%;
	  	font-weight: bold;
	    }

	#tilde {
		color: var(--blue);
		display: inline;
		}
		
	#lambda {
	  	color: #b5bd68;
	  	display: inline;
	  	}:link, a.postwarning:visited, a.postwarning:active 

	#post {
	  	color: var(--pearl);
	  	display: inline;
	  	font-size: 100%;
	  	line-height: 150%;
	  	}

	#link {
		color: var(--orange);
	  	size: 100%;
	  	display: inline;
	  	}

	#footer {
  		position: fixed;
  		width: 100%;
  		height: 3%;
		}
/* Header */

.header {
	font-size: 100%;
}

/*Styles for regular text*/
	
	.basegreen {
		color: var(--green);
		}

	.baseblue {
		color: var(--blue);
		}

	.baseorange {
		color: var(--orange); 
		}

/* Post date & tags */
	.date_tags {
	    color: var(--blue);
	    font-size: 85%;
	    font-weight: bold;
	    line-height: 150%;
	    }

/*Style for code boxes*/
	.code_box {
	 	border: solid 1px #d4d7d6;
	 	/*border-radius: 5px;*/
	 	border-radius: max(0px, min(5px, (400px - 400px + 1px) * 9999)) / 5px;
	 	/*Responsive borders*/
	 	/*border-radius:`` max(0px, min(border_radius_min, (max_size - breakpoint_size + 1px) * 9999)) / border_radius;*/
	 	padding: 7px 15px;
		background-color: #131313;
		color: var(--pearl);
		font-size: 85%;
		/*width: 37%;*/
		max-width: 400px;
		box-sizing: border-box;
		}

	.code_note {
     	background-image: url(../Images/icons/Pencil-48.png);
    	background-position: 9px 0px;
     	background-repeat: no-repeat;
		/*border: solid 1px #131313;*/
		border-radius: max(0px, min(0px, (400px - 400px + 1px) * 9999)) / 0px;
     	/*line-height: 150%;*/
     	overflow: hidden;
     	padding: 7px 15px;
     	color: #121212;
     	font-size: 85%;
     	max-width: 400px;
     	box-sizing: border-box;
		}

	.cblue {
		background-color: #88bad0;
		border-left: solid 7px #519aba;
		}

	.cgreen {
		background-color: #d5e8bb;
		border-left: solid 7px #b1d482;
		}

	.cred {
		background-color: #ecb7ba;
		border-left: solid 7px #dc7b7f;
		}

	.cyellow {
		background-color: #fdfd96;
		border-left: solid 7px #fcfc4b;
	}
	
/*Styles for text post links, highlights, warnings*/	  	 
	.txtlink {
        color: var(--orange);
        text-decoration: underline dotted var(--orange);
      	}
     	 
	.txtlink:hover {
        color: var(--orange);
        text-decoration: underline;
      	}

	.postlink {
        color: var(--orange);
        text-decoration: none;
      	}
     	 
	.postlink:hover {
        color: var(--orange);
        text-decoration: underline dotted var(--orange);
      	}
	
	.hlblue {
        color: #333333;
        border-radius: 1px;
        background: #88bad0;
        text-decoration: none;
      	}

	.hlgreen {
        color: #333333;
        background: #d5e8bb;
        border-radius: 1px;
        text-decoration: none;
      	}

	.hlred {
        color: #333333;
        border-radius: 1px;
        background: #dc7b7f;
        text-decoration: none;
      	}

	.hlyellow {
        color: #333333;
        background: #fdfd96;
        border-radius: 1px;
        text-decoration: none;
      	}
/*
	.postwarning:link, a.postwarning:visited, a.postwarning:active {
        color: #333333;
        text-decoration: none;
        font-size: 100%;
        background: #dc7b7f;
      	}
     	 
	.postwarning:hover {
        color: var(--orange);
        text-decoration: none;
      	}

*/

/*Styles for contact links*/
	.contact:link, a.contact:visited, a.contact:hover, a.contact:active {
	  	color: var(--orange);
	  	text-decoration: none;
	  	/*display: inline;*/
	  	font-size: 0.75em;
		}

/* Images */
	img.responsive {
		max-width: 100%;
		height: auto;
		}

	img.avatar {
		/*grid-column: span 1 / auto;
		position: relative;
		color: #f5f5f5;*/
		display: block;
		border-radius: 50%;
		margin: auto;	
		width: 13%;
		padding: 13px;
		}